Heim > Artikel > Web-Frontend > Detaillierte Erläuterung gängiger Methoden für jQuery zum Abrufen von Elementen in iframe_jquery

Detaillierte Erläuterung gängiger Methoden für jQuery zum Abrufen von Elementen in iframe_jquery

WBOYOriginal: 2016-05-16 15:19:461228Durchsuche

In diesem Artikel werden die gängigen Methoden von jQuery zum Abrufen von Elementen im Iframe analysiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Mehrere Möglichkeiten, Elemente in Iframe mit JQuery abzurufen:

Rufen Sie das übergeordnete Seitenelement in der Iframe-Unterseite ab

Der Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

$('#objId', parent.document);

Fertig...

Rufen Sie die Elemente der Iframe-Unterseite auf der übergeordneten Seite ab:

$("#objid",document.frames('iframename').document)
$(document.getElementById('iframeId').contentWindow.document.body).html()

Zeigen Sie den Inhalt des Body-Elements im Iframe an.

Code kopieren Der Code lautet wie folgt:

$("#testId", document.frames("iframename") .document) .html();

Rufen Sie das Element ab, dessen ID „testId“ basierend auf iframename ist

Code kopieren Der Code lautet wie folgt:

$(window.frames["iframeName"].document).find ("# testId").html()

Verwenden Sie JS oder jQuery, um auf den Iframe auf der Seite zuzugreifen, kompatibel mit IE/FF

Hinweis: Seiten innerhalb des Frames können nicht domänenübergreifend sein!

Angenommen, es gibt zwei Seiten unter derselben Domain.

Die Datei

index.html enthält einen iframe:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>页面首页</title>
</head>
<body>
<iframe src="iframe.html" id="koyoz" height="0" width="0"></iframe>
</body>
</html>

iframe.html-Inhalt:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>iframe.html</title>
</head>
<body>
<div id="test">www.jb51.net</div>
</body>
</html>

1. Führen Sie JS in index.html aus, um direkten Zugriff zu erhalten:

Code kopieren Der Code lautet wie folgt:

document.getElementById('koyoz').contentWindow.document .getElementById( 'test').style.color='red'

Greifen Sie auf die Iframe-Seite mit dem ID-Namen „koyoz“ in index.html zu, rufen Sie das Objekt mit dem ID-Namen „test“ in dieser Iframe-Seite ab und setzen Sie seine Farbe auf Rot Dieser Code wurde getestet und kann IE/Firefox unterstützen.

2. Zugriff mit jQuery in index.html:

Code kopieren Der Code lautet wie folgt:

$("#koyoz").contents().find(" #test" .css('color','red');

Die Wirkung dieses Codes ist die gleiche wie beim direkten Zugriff über JS. Mit Hilfe des jQuery-Frameworks ist der Code kürzer.

Sammeln Sie einige Beispiele aus dem Internet:

Die Verwendung von jQuery zum Abrufen des Werts eines Elements des übergeordneten Fensters im IFRAME kann nur durch Kombination der DOM-Methode und der jquery-Methode erreicht werden

1. Arbeiten Sie im übergeordneten Fenster und wählen Sie alle Optionsfelder im IFRAME aus

Code kopieren Der Code lautet wie folgt:

$(window.frames["iframe1"].document).find ("input :radio").attr("checked","true");

2. Arbeiten Sie im IFRAME und wählen Sie alle Optionsfelder im übergeordneten Fenster
aus

Code kopieren Der Code lautet wie folgt:

$(window.parent.document).find("input:radio "). attr("checked","true");

Wenn das übergeordnete Fenster den Iframe im IFrame abrufen möchte, fügen Sie einfach einen untergeordneten Frame hinzu, z. B.:

Code kopieren Der Code lautet wie folgt:

$(window.frames["iframe1"].frames["iframe2 "]. document).find("input:radio").attr("checked","true");

Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Erlernen Sie ganz einfach JQuery-Akkordeon-Effekt_Javascript-KenntnisseNächster Artikel：Erlernen Sie ganz einfach JQuery-Akkordeon-Effekt_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen