Explication détaillée des étapes pour faire fonctionner iframe à l'aide de jquery

Cette fois, je vais vous donner une explication détaillée des étapes pour utiliser jquery pour faire fonctionner iframe. Quelles sont les précautions pour utiliser jquery pour faire fonctionner iframe. Voici un cas pratique, jetons un coup d'œil.

Jetons d'abord un coup d'œil au fichier d'aide de l'objet contents() dans JQUERY

contents()
Aperçu
Trouver tous les nœuds enfants (y compris les nœuds de texte) à l'intérieur du élément correspondant. Si l'élément est une iframe, recherchez le contenu du document

Exemple

<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>

Description :
Ajouter du contenu à un cadre vide

HTML

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

jQuery

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

Supprimer la bordure iframe frameborder="0"

1 Il y a deux ifame

dans le content

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

jQuery dans leftiframe modifie le code src du mainiframe :

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

2 S'il y a un ifame avec l'ID du mainiframe dans le contenu

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

ifam contient un someID

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

Obtenir le contenu de someID

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

2 Comme indiqué ci-dessus
jQuery dans leftiframe exploite le contenu de mainiframe et le contenu de someID

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

Jquery obtient Go to

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

de la balise avec l'identifiant xuan à l'intérieur de la fenêtre parent à laquelle l'iframe //js crée des éléments et les ajoute aux problèmes de fonctionnement dom dans les éléments. dans l'Iframe de l'élément parent :

Appelez directement la méthode dans la fenêtre parent dans l'iframe : Supposons que la fenêtre parent ait une méthode add

self.parent.add();

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

La différence entre IE et Firefox sur les objets de document iframe

Dans IE6 et IE7, nous pouvons utiliser le document .frames[ID].document pour accéder à l'objet document dans la fenêtre enfant iframe, mais il s'agit d'une méthode d'écriture qui n'est pas conforme aux normes du W3C et est unique à IE. Elle ne peut pas être utilisée sous Firefox utilise le document.getElementById. (ID).contentDocument conforme aux normes du W3C. Aujourd'hui, j'écris. Lorsque vous utilisez l'exemple, testez-le via IE8 en utilisant également la méthode
document.getElementById(ID).contentDocument qui est conforme à la norme W3C. Nous pouvons donc écrire une fonction commune sous IE et Firefox pour obtenir l'
objet document iframe—getIFrameDOM :

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

P.S. : Si nous voulons obtenir l'objet fenêtre, Au lieu de l'objet document, vous pouvez utiliser la méthode document.getElementById(ID).contentWindow. De cette façon, nous pouvons utiliser l'objet window dans la fenêtre enfant, comme les fonctions de la fenêtre enfant.

Utilisez la fonction de la fenêtre parent dans la fenêtre enfant pour obtenir l'objet document de la fenêtre parent

Dans la fenêtre enfant, nous pouvons obtenir l'objet fenêtre de la fenêtre parent via parent. Si nous sommes dans la fenêtre parent, il existe une fonction appelée getIFrameDOM, que nous pouvons appeler via parent.getIFrameDOM. De même, nous pouvons utiliser parent.document pour accéder à l'objet document de la fenêtre parent dans la fenêtre enfant.

Exemple de fonctionnement DOM d'iframe à l'aide de JavaScript

Tout d'abord, nous introduisons deux fenêtres enfants iframe dans la fenêtre parent, avec les ID wIframeA et wIframeB, et les adresses sont respectivement : a.html, b.html.

Le code HTML principal de la fenêtre parent est le suivant :

<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>

Dans les sous-fenêtres A et B, je mets un P avec l'ID bonjour pour faciliter notre démonstration du fonctionnement du DOM. Le HTML principal. le code est le suivant :

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

1. Dans l'iframe, la fenêtre parent exploite le DOM de la fenêtre enfant

a créé la fenêtre parent et la fenêtre enfant, pour que nous. pouvez dans la fenêtre parent, utilisez la fonction iframeA() suivante pour changer la couleur d'arrière-plan de la fenêtre enfant A en rouge :

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 Dans l'iframe, la fenêtre enfant exploite le DOM de la fenêtre parent.

dans la fenêtre enfant , nous pouvons facilement effectuer des opérations DOM sur la fenêtre parent. Il nous suffit d'ajouter la méthode de l'objet parent Yige avant l'opération DOM. Par exemple : dans la fenêtre enfant B ci-dessus. peut utiliser le code suivant pour le mettre dans la fenêtre parent. Le contenu avec l'ID "pHello" est remplacé :

----------------------------------<.>

3. Dans l'iframe, la fenêtre enfant A exploite le DOM de la sous-fenêtre B

Puisque la sous-fenêtre peut exploiter l'objet fenêtre et l'objet document de la fenêtre parent, la sous-fenêtre La fenêtre peut également faire fonctionner le DOM d'autres sous-fenêtres ~ Broken Bridge Xue peut-il le faire dans la sous-fenêtre B Utiliser directement le parent pour appeler directement la fonction getIFrameDOM dans la fenêtre parent pour obtenir l'objet document de la fenêtre enfant A. De cette façon , il est très simple de modifier le contenu de la fenêtre fille A, comme le code suivant :

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从数组移除选中值步骤详解

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!