Ausführliche Erläuterung der Schritte zum Betrieb von iframe mit jquery

Dieses Mal werde ich Ihnen die Schritte zur Verwendung von jquery zum Betreiben von iframe ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die Verwendung von jquery zum Betreiben von iframe?

Werfen wir zunächst einen Blick auf die Hilfedatei des Objekts content() in JQUERY

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

Beispiel

<p>Hello <a href="http://ejohn.org/">John</a>, how are 
you doing?</p>

jQuery

$("p").contents().not("[nodeType=1]").wrap("<b/>");结果:
<p><b>Hello</b> 
<a href="http://ejohn.org/">John</a>, <b>how are you 
doing?</b></p>

Beschreibung:
Fügen Sie etwas Inhalt zu einem leeren Frame hinzu

HTML

<iframe 
src="/index-blank.html" width="300" height="100"></iframe>

jQuery

$("iframe").contents().find("body")
.append("I'm in an iframe!");

Entfernen Sie den Rand von iframe frameborder="0"

1 Es gibt zwei iname

<iframe id="leftiframe"...</iframe> 
<iframe id="mainiframe..</iframe>

jQuery-Änderungen in Leftiframe-Mainiframes Quellcode:

$("#mainframe",parent.document.body).attr("src","http://www.baidu.com")

2 Wenn es ein ifame mit der ID des Mainiframes im Inhalt gibt

<iframe id="mainifame"...></ifame>

ifame enthält eine someID

<p id="someID">you want to get this content</p>

erhalten Sie den Inhalt von someID

$("#mainiframe").contents().find("someID").html()html 或者 
$("#mainiframe").contains().find("someID").text()值

2 Wie oben gezeigt
jQuery in leftiframe verwaltet den Inhalt des Mainiframes someID

$("#mainframe",parent.document.body).contents().find("someID").html()或者 
$("#mainframe",parent.document.body).contents().find("someID").val()

Jquery ruft das

$(window.parent.document).find("#xuan").html(x);//

//JS erstellt ein Element und hängt es an das Dom-Operationsproblem im Element im Iframe des übergeordneten Elements an:

Rufen Sie die Methode direkt im übergeordneten Fenster im Iframe auf: Angenommen, das übergeordnete Element Fenster hat eine Add-Methode

self.parent.add();

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

Unterschiede im Iframe Dokumentobjekte zwischen IE und Firefox

In IE6 und IE7 können wir document.frames[ID].document verwenden, um auf das Dokumentobjekt im Iframe-Unterfenster zuzugreifen. Dies ist jedoch eine Schreibmethode, die dies nicht tut entspricht den W3C-Standards und ist auch eine einzigartige Methode unter IE. Firefox verwendet jedoch nicht die Methode document.getElementById(ID).contentDocument, die dem W3C-Standard entspricht es über IE8. IE8 verwendet auch die

document-Methode, die dem W3C-Standard entspricht. Wir können also eine Funktion schreiben, die unter IE und Firefox üblich ist, um das
Dokumentobjekt des Iframes abzurufen – getIFrameDOM:

functiongetIFrameDOM(id){returndocument.getElementById(id).contentDocument||document.frames[id].document;}

P.S.: Wenn wir das

Fensterobjekt des Iframes abrufen möchten, Anstelle von Dokumentobjekten können Sie auch die Methode document.getElementById(ID).contentWindow verwenden. Auf diese Weise können wir das Fensterobjekt im untergeordneten Fenster verwenden, beispielsweise die Funktionen im untergeordneten Fenster.

Verwenden Sie die Funktion des übergeordneten Fensters im untergeordneten Fenster, um das Dokumentobjekt des übergeordneten Fensters abzurufen.

Im untergeordneten Fenster können wir das Fensterobjekt des übergeordneten Fensters über das übergeordnete Fenster abrufen. Wenn wir uns im übergeordneten Fenster befinden, gibt es eine Funktion namens getIFrameDOM, die wir über parent.getIFrameDOM aufrufen können. Ebenso können wir über parent.document auf das Dokumentobjekt des übergeordneten Fensters im untergeordneten Fenster zugreifen.

Beispiel für den DOM-Betrieb von Iframe mit JavaScript

Zunächst führen wir im übergeordneten Fenster zwei untergeordnete Iframe-Fenster mit den IDs wIframeA und wIframeB und den entsprechenden Adressen ein : a.html, b.html.

Der Haupt-HTML-Code des übergeordneten Fensters lautet wie folgt:

<p id="pHello" style="margin:10px 
auto;width:360px;height:30px;">此处可通过iframeB的JavaScript函数，来替换哦~</p> 
<iframe id="wIframeA" name="myiframeA" src="a.html" scrolling="no" 
frameborder="0"></iframe> <iframe id="wIframeB" name="myiframeB" 
src="b.html" scrolling="no" frameborder="0"></iframe>

In den Unterfenstern A und B habe ich ein P mit der ID „Hallo“ eingefügt, um die Demonstration unserer DOM-Operation zu erleichtern -windows A und B Der Code lautet wie folgt:

<p id="hello">Hello World!</p>

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

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

functioniframeA(){//给子窗口A改变ID为hello的背景色
vara=getIFrameDOM("wIframeA");
a.getElementById('hello').style.
background
="red";
}
functiongetIFrameDOM(id){//兼容IE、Firefox的iframeDOM获取函数
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 bequem DOM-Operationen des übergeordneten Fensters ausführen. Sie müssen lediglich die Methode des übergeordneten Yige-Objekts vor der DOM-Operation hinzufügen. Beispiel: Im obigen untergeordneten Fenster B können wir Folgendes verwenden Code zum Hinzufügen des übergeordneten Fensters mit der ID „pHello“ Ersetzen Sie den Inhalt:

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

3. In iframe, Unterfenster A arbeitet im 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 anderer untergeordneter Fenster bedienen ~ Broken Bridge Canxue kann das übergeordnete Element im untergeordneten Fenster B direkt aufrufen, um das übergeordnete Element direkt aufzurufen. Die getIFrameDOM-Funktion im Fenster ruft das Dokumentobjekt von Unterfenster A ab, sodass es sehr einfach ist, den Inhalt von Unterfenster A zu ändern, z folgenden Code:

vara=parent.getIFrameDOM("wIframeA");

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

一个iframe高度自动变化的问题搞了我半天，网上找了下资料，不是很好，结合了一下jquery(版本1.3.2)，4行代码即可，完美兼容IE、Firefox、Opera、Safari、Google
Chrome,js如下:

function  heightSet(thisFrame){
if($.browser.mozilla || $.browser.msie){
          bodyHeight =window.frames["thisFrameName"].document.body.scrollHeight;
}else{
          bodyHeight =thisFrame.contentWindow.document.documentElement.scrollHeight;
//这行可代替上一行，这样heightSet
函数的参数
可以省略了
          //bodyHeight = document.getElementById("thisFrameId").contentWindow.document.documentElement.scrollHeight;
}
       document.getElementById("thisFrameId").height=bodyHeight;  
}
<iframe id="mainFrame" name="mainFrame" frameborder="0"  scrolling="no" src=""onload="heightSet(this)"></iframe>

引用

this关键字在各种浏览器似乎有不同的意思,FF和IE必须要通过iframe的名字去得到内部页面高度,而其他浏览器则可以用this或ID

引用

都在说一个异步的问题，如果你ajax用得特别多,但又不想每次都去设置，那动态改变iframe肯定达不到你的代码清洁要求，没办法，要么你就脱离iframe。我只能说说一般处理方式，毕竟ajax或动态表单在一般应用中只占小数比例,异步请求后只需在后面加上:

Js代码

parent.window.heightSet();

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

jquery遍历筛选数组与json对象的方法合集

jquery从数组移除选中值步骤详解

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Schritte zum Betrieb von iframe mit jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!