HTML DIV Box von externer Webseite in eigene einfügen?
Ist es möglich, dass ich eine DIV Box von einer anderen Webseite z.B. von YouTube in meiner Webseite einbinde??
Vielleicht mit dem Tag "include" oder "iframe" aber damit kenne ich mich leider nicht aus.
Danke für eure Hilfe!
6 Antworten
Nein, jedenfalls nicht pauschal. Das wäre dann im Grunde auch schon Contentdiebstahl und nicht nur für Google ein Zeichen das abzustrafen.
Möglich ist ein solches Übernehmen fremder Inhalte in Teilen eigentlich nur dann, wenn eine entsprechende Schnittstelle/API vom Betreiber der jeweiligen Seite bereit gestellt wird, um die Informationen mit externen zugriffen abzufragen.
Naja...Möglich wäre es ansich schon, nur unter bestimmten Umständen möglicherweise illegal...
Das kannst du indem du den Quellcode per PHP einliest und dann einen PHP HTML Parser benutzt wie: http://simplehtmldom.sourceforge.net/
Am einfachsten wäre es vermutlich mit JQuery...
In Jquery wäre das folgender Code:
$(document).ready(function($){
$.ajax({
url: 'URL.zur.website',
dataType: 'html',
success: function(data){
$('#id_des_Div_wo_du_das_einfügen_willst').html($data);
}
});
});
JQuery bekommst du von hier und bindest du folgendermaßen in deinen Code ein:
<script type='text/javascript' src='Pfad/zur/datei/jquery.js'></script>
$(document).ready(function($){
$.ajax({
url: 'URL.zur.website',
dataType: 'html',
success: function(data){
var $data=$(data).("#id_des_divs_das_du_haben_willst...);
$('#id_des_Div_wo_du_das_einfügen_willst').html($data);
}
});
});
Jetzt passts...Sorry, die erste Variante wird nicht funktionieren...
Das funktioniert dann aber nur bei aktivioertem javascript...
Es gibt aber noch andere Lösungen, zt.B. die serverseitige mit PHP...
- Das ist klauen von Content und kann rechtliche Folgen haben. Frage zuerst beim Besitzer nach.
Hier wäre ein Lösungsansatz (index.html ist deine Seite, index2.html ist die externe Seite):
index.html:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id='A'></div>
<button>Div mit der ID "B" aus index2.html laden</button>
<script>
$(document).ready( function() {
$("button").click(function(){
$('#A').load('http://lukas.atspace.eu/index2.html #B');
});
});
</script>
</body>
</html>
index2.html:
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id='B'>Ich bin ein Text von index2.html</div>
</body>
</html>
Zum testen:
Das Script funktioniert übrigens bei mir, Firefox neuste Version nicht, da das Laden der JQuery-Bibliothek fehlschlägt...(Nur als Debugginfo...)
Geht das echt so einfach?
Und ich schreib eine ajax-Anweisung...Da sieht man, dass ich mich noch nicht wirklich mit jquery auskenne...
Danke für die Info. Ich habe es nur kurz mit Chrome gebastelt ;). Ich habe es nun kurz in Firefox getestet (61.0) und dort hat es über die Website auch funktioniert? Wie hast du es gedebuggt? ^^
Nein, natürlich nicht. Du kannst aber den Code ablesen, also nachbauen oder den Code einbetten. Schon mal was von iframe gehört? Google mal einfach nach.
Zum selektieren von einzelnen Divs musst du das evtl. noch einschränken... Wart kurz, dann ändere ich den Code entsprechend...