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);//
self.parent.add();========================= =========== ==============================Unterschiede im Iframe Dokumentobjekte zwischen IE und FirefoxIn 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;}
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>
<p id="hello">Hello World!</p>
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; }
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 BDa 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中文网其它相关文章!
推荐阅读:
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!