✔ Zugriff auf iframe-Inhalte per jQuery

W

wahu

Benutzer
Hallo,

ich will auf die Inhalte eines iframes in einer Seite zugreifen, mache aber irgendetwas falsch.
Der iframe ingesamt ist über
Code: 
$(frames['lightboxbilder'].document)
erreichbar. Wenn ich da ein .text() anhänge, dann sehe ich den gesamten Text, der im iframe enthalten ist.

Die Doku habe ich so verstanden, dass ich jetzt z.B. mit einem
Code: 
$(frames['lightboxbilder'].document).find('div#id1')
auf ein div mit id="id1" im iframe zugreifen kann.
Aber das geht nicht. Keine Fehlermeldung, sondern es passiert nichts.

Da scheine ich irgendwas nicht verstanden zu haben, aber was?
Ein Tipp wäre sehr nett!

Christian
 
meine aktuelle Lösung für folgende Aufgabenstellung "Wie greife ich per jQuery auf den Inhalt eines iframes zu?" schaut so aus:

Die Beispiel-HTML-Seite mit dem iframe sieht so aus:
HTML: 
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE" lang="de-DE">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
		<script src="js/getIframeContent.js" type="text/javascript"></script>
		<title>Seite mit iframe-Aufruf</title>
	</head>
	<body>
		<div id="vorher">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
		</div>
		<div id="platzFuerDieBilderAusDemIframe"></div>
		<div id="nachher">
			<p>Integer pharetra vehicula libero, sed euismod mi condimentum id.</p>
		</div>
		<iframe src="iframe.html" id="bilder" name="bilder"></iframe>
	</body>
</html>

Die im iframe aufgerufene Seite sieht so aus:
HTML: 
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-DE" lang="de-DE">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Bildergalerie als InlineFrame</title>
	</head>
	<body>
		<div id="bildergalerie">
			<div class="galeriebild">
				<img src="pic_01.jpg" width="220" height="220" alt="bild1" title="bild1" />
				<h3>Titel 1</h3>
				<p>Noch etwas Text zum Bild 1</p>
			</div>
			<div class="galeriebild">
				<img src="pic_02.jpg" width="220" height="220" alt="bild2" title="bild2" />
				<h3>Titel 2</h3>
				<p>Noch etwas Text zum Bild 2</p>
			</div>
			<div class="galeriebild">
				<img src="pic_03.jpg" width="220" height="220" alt="bild3" title="bild3" />
				<h3>Titel 3</h3>
				<p>Noch etwas Text zum Bild 3</p>
			</div>
		</div>
	</body>
</html>

Und der jQuery-Code, um auf Inhalte im iframe zuzugreifen (hier: Bilder und Texte aus dem iframe in die "Haupt"-Seite rüber bringen), sieht so aus:
Code: 
$(document).ready(function() {
	$('#bilder').load(function() {
		$('#platzFuerDieBilderAusDemIframe').after( $('#bilder').contents().find('#bildergalerie').html() );
		$('#platzFuerDieBilderAusDemIframe').remove();
	});
});

Vielleicht hilft es ja jemand.

Aber warum
Code: 
$(frames['lightboxbilder'].document).find('div#id1')
nicht funktioniert, weiß ich leider noch nicht.
Vielleicht kann es mir jemand verraten. Wäre nett!
 
Hi,

ich vermute, dass das Dokument im Augenblick, in dem du darauf zugreifen möchtest, noch nicht fertig geladen ist. Dann existiert der Dokumentenbaum noch nicht und ein Zugriff auf die Elemente (Knoten) ist nicht möglich.

Führst du die Anweisung etwas später aus (z.B. über einen Button), funktioniert es wie gewünscht.

Ciao
Quaese
 
JA, das war's! Danke für die Hilfe!

Wenn ich vorher auf load warte, dann geht es wie im obigen Beispiel auch:
Code: 
$(document).ready(function() {
	$('#bilder').load(function() {
		$('#platzFuerDieBilderAusDemIframe').after( $(frames['bilder'].document).find('div#bildergalerie').html() );
	});
});
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück