nicht angemeldet
Mit JQuery ein Element aus einem IFrame selektieren
Rolf BHallo,
ich möchte mit JQuery ein Element aus einem IFrame selektieren. Dafür nutze ich folgenden Code:
<body>
<div id="box">
<iframe src="iframe-content.html" width="500" height="500" id="meinIframe">iframetext</iframe>
<div id="box1">Inline 1</div>
</div>
</body>
<script>
$(document).ready(function(){
var getIframe = $("#meinIframe").contents();
var readDivText = getIframe.find("#dbox1").text();
console.log(readDivText);
});
</script>
Iframe - iframe-content.html:
<body>
<p>p text</p>
<div id="dbox1">dbox1 text</div>
<div id="dbox2">
<div class="cssKlasse">cssKlasse text</div>
</div>
</body>
console.log(readDivText) ist aber leer. Tests den Text zu ändern funktionierten auch nicht. Ich habe auch schon verschiedene Selektionen ausprobiert wie u.a. "body > #dbox1". Aber irgendwie scheine ich #dbox1 nicht selektieren zu können.
JQuery funktioniert, wie z.B. den "iframetext" auszulesen. Wenn ich getIframe in der Console ausgebe, wird "r.fn.init [document, prevObject: r.fn.init(1)]" angezeigt. Wenn ich das ausklappe werden verschiedene Infos zur Seite selbst und auch zur Iframeseite gezeigt.
Weiß jemand, wie ich #dbox1 im IFrame selektieren kann?
Gruß ebody
-
Hallo ebody,
das wird daran liegen, dass der iframe eine nachgeladene Ressource ist und Du erstmal warten musst, bis dieser Ladevorgang beendet ist. Das ist allerdings nicht ganz trivial.
Quelle 1: https://stackoverflow.com/questions/16960829/detect-domcontentloaded-in-iframe
Du könntest Dich auf das DOMContentLoaded Event des contentWindow im iframe registrieren. Das funktioniert laut Quelle nicht, wenn Du das src Attribut nachträglich änderst (weil es dann ein anderes Document gibt), aber wenn ich die Quelle 1 richtig verstehe, sollte es für das erste Laden funktionieren.
Alternativ kannst Du Dich auch auf das load Event des iframe-Elements registrieren, musst dann nur abwarten bis der iframe alle seine Ressourcen geholt hat.
Quelle 2: https://stackoverflow.com/questions/2161388/calling-a-parent-window-function-from-an-iframe
Da steht noch eine dritte Idee - in der Window.postMessage() Antwort. Lass den iframe Bescheid sagen, wenn er geladen ist. Mit postMessage funktioniert das sogar wenn Rahmen und iframe von unterschiedlichen Domains stammen. Kommen sie von der gleichen Domain, kannst Du im iframe über window.parent das window-Objekt der Rahmenseite erreichen und dort direkt Scripte aufrufen (die dann natürlich global sichtbar sein müssen). Messaging ist besser. Kompatibilität sollte hinreichend sein, solange iframes verwendet werden (bei Popup-Fenstern geht Messaging in MS Browsern nur mit Tricks).
Rolf
--
sumpsi - posui - clusi-
Hallo Rolf,
vielen Dank für deine Hilfe. Ich werde es testen und gebe hier dann nochmal Feedback.
Gruß ebody
-
Hallo Rolf,
vielen Dank nochmal.
So funktioniert es zumindest im Chrome, andere Browser habe ich noch nicht getestet:
<body> <div id="box"> <iframe src="iframe-content.html" width="500" height="500" id="meinIframe">iframetext</iframe> <div id="box1">Inline 1</div> </div><script> $("#meinIframe").on("load",function(){ var getIframe = $("#meinIframe").contents(); var readDivText = getIframe.find("#dbox1").text(); console.log(readDivText); // gibt "dbox1 text" aus }); </script></body>Das Script muss nach dem HTML Code folgen. Als ich es davor platziert habe, hat es nicht funktioniert.
Gruß ebody
-
Hallo ebody,
Das Script muss nach dem HTML Code folgen. Als ich es davor platziert habe, hat es nicht funktioniert.
Theoretisch: Jein. Wenn Du es - wie in deinem ersten Beispiel - in einen ready-Handler packst, kannst Du es auch im head unterbringen. Allerdings mit einem Risiko:
Beim ready-Handler hast Du die Gefahr einer race-condition. Zum einen wird das DOM des Haupt-HTML geladen. Sobald das passiert ist, folgt das Laden der Resourcen, und das HTML des iframe ist eine davon. Ob garantiert ist, dass der ready-Handler von jQuery vor dem Laden des HTML im iframe erfolgt, das kann ich Dir nicht zusichern.
Also: lass es besser so, wie es ist :)
Rolf
--
sumpsi - posui - clusi
-
-
-