suchen

Heim >Web-Frontend >js-Tutorial >jquery-Methode zum Betrieb von iframe_jquery

jquery-Methode zum Betrieb von iframe_jquery

WBOY
WBOYOriginal
2016-05-16 16:29:231525Durchsuche

Werfen wir zunächst einen Blick auf die Hilfedatei für das Objekt content() in JQUERY

contents()
Übersicht
Suchen Sie alle untergeordneten Knoten (einschließlich Textknoten) innerhalb des passenden Elements. Wenn das Element ein Iframe ist, suchen Sie den Dokumentinhalt


Beispiel
Beschreibung:
Suchen Sie alle Textknoten und fetten Sie

ein

HTML

Code kopieren Der Code lautet wie folgt:

jQuery

Code kopieren Der Code lautet wie folgt:

$("p").contents().not("[nodeType=1]").wrap("");Ergebnis:

Hallo JohnJohn>, wie geht es dir tun?



Beschreibung:

Fügen Sie einem leeren Frame etwas Inhalt hinzu

HTML


Code kopieren Der Code lautet wie folgt:


jQuery


Code kopieren Der Code lautet wie folgt:
$("iframe").contents().find("body")
.append("Ich bin in einem Iframe!");


Entfernen Sie den Iframe-Rahmen frameborder="0"

1 Der Inhalt enthält zwei I-Namen

Code kopieren Der Code lautet wie folgt:



jQuery im linken Frame ändert den Quellcode des Mainiframes:


Code kopieren Der Code lautet wie folgt:
$("#mainframe",parent.document.body).attr("src","
http://www.baidu.com
")
2 Wenn es im Inhalt ein IAME mit der ID des Mainiframes gibt

Code kopieren Der Code lautet wie folgt:



In den Unterfenstern A und B habe ich ein P mit der ID „Hallo“ platziert, um unsere DOM-Operationsdemonstration zu erleichtern. Die wichtigsten HTML-Codes der Unterfenster A und B lauten wie folgt:

Code kopieren Der Code lautet wie folgt:

Hallo Welt!


1. In einem Iframe betreibt das übergeordnete Fenster das DOM des untergeordneten Fensters

Das übergeordnete Fenster und das untergeordnete Fenster wurden erstellt, sodass wir die folgende iframeA()-Funktion im übergeordneten Fenster verwenden können, um die Hintergrundfarbe des untergeordneten Fensters A in Rot zu ändern:

Code kopieren Der Code lautet wie folgt:

functioniframeA(){//Ändern Sie die Hintergrundfarbe von Unterfenster A mit der ID hello
vara=getIFrameDOM("wIframeA");
a.getElementById('hello').style.background="red";
}
functiongetIFrameDOM(id){//iframeDOM-Erfassungsfunktion kompatibel mit IE und Firefox
returndocument.getElementById(id).contentDocument||document.frames[id].document;
}

2. Im Iframe betreibt das untergeordnete Fenster das DOM des übergeordneten Fensters

Im untergeordneten Fenster können wir das übergeordnete Fenster DOM einfach bedienen. Wir müssen nur die Methode des übergeordneten Yige-Objekts vor der DOM-Operation hinzufügen. Im obigen untergeordneten Fenster B können wir beispielsweise Folgendes verwenden Code ersetzt den Inhalt durch die ID „pHello“ im übergeordneten Fenster:

------------------

3. Im Iframe betreibt Unterfenster A das DOM von Unterfenster B

Da das untergeordnete Fenster das Fensterobjekt und das Dokumentobjekt des übergeordneten Fensters bedienen kann, kann das untergeordnete Fenster auch das DOM eines anderen untergeordneten Fensters bedienen ~ Broken Bridge Canxue kann das übergeordnete Fenster im untergeordneten Fenster B direkt verwenden, um getIFrameDOM direkt aufzurufen Übergeordnetes Fenster. Die Funktion ruft das Dokumentobjekt von Unterfenster A ab, sodass es sehr einfach ist, den Inhalt von Unterfenster A zu ändern, z. B. den folgenden Code:

Code kopieren Der Code lautet wie folgt:

vara=parent.getIFrameDOM("wIframeA");

============================================= === ==================================

Ein Problem mit der automatischen Änderung der Iframe-Höhe hat mich schon lange gestört. Ich habe im Internet nach Informationen gesucht, aber es war nicht sehr gut. Ich habe es mit jquery (Version 1.3.2) kombiniert, was nur 4 ist Codezeilen. Es ist perfekt kompatibel mit IE, Firefox, Opera, Safari, Google
Chrome, js lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

Funktion heightSet(thisFrame){
if($.browser.mozilla || $.browser.msie){
             bodyHeight =window.frames["thisFrameName"].document.body.scrollHeight;
}else{
             bodyHeight =thisFrame.contentWindow.document.documentElement.scrollHeight;
//Diese Zeile kann die vorherige Zeile ersetzen, sodass die Parameter der heightSet-Funktion weggelassen werden können
//bodyHeight = document.getElementById("thisFrameId").contentWindow.document.documentElement.scrollHeight;
}
        document.getElementById("thisFrameId").height=bodyHeight; }


Zitat

Dieses Schlüsselwort scheint in verschiedenen Browsern unterschiedliche Bedeutungen zu haben. FF und IE müssen den Namen des Iframes verwenden, um die interne Seitenhöhe zu erhalten, während andere Browser dies oder die ID verwenden können

Zitat

Sie sprechen alle von einem asynchronen Problem. Wenn Sie Ajax häufig verwenden, es aber nicht jedes Mal einrichten möchten, wird das dynamische Ändern des Iframes Ihre Anforderungen an die Code-Sauberkeit definitiv nicht erfüllen. oder Sie können den iframe verlassen. Ich kann nur über die allgemeinen Verarbeitungsmethoden sprechen. Schließlich machen Ajax- oder dynamische Formulare in allgemeinen Anwendungen nur einen geringen Anteil aus. Nach einer asynchronen Anfrage müssen Sie am Ende nur Folgendes hinzufügen.

Js-Code


Code kopieren Der Code lautet wie folgt:
parent.window.heightSet();


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：c# JQurey implementiert das Abrufen der Werte von Radio und CheckboxNächster Artikel：c# JQurey implementiert das Abrufen der Werte von Radio und Checkbox

In Verbindung stehende Artikel

Mehr sehen