iframe嵌套，父子页面之间变量，方法，元素的相互调用使用介绍

红太狼 2021-01-19 09:00 633阅读 0赞

子页面：<iframe id="XXX" scrolling="auto" frameborder="0" width="100%" height="570px" src="XXX"> </iframe>

**父页面取子页面的全局变量**：  var 变量名称= document.getElementById('XXX').contentWindow.变量名称;  
**父页面调子页面的方法：**

$("\#XXX")\[0\].contentWindow.子页面方法名();

或  document.getElementById("XXX").contentWindow.子页面方法名();

**父页面获取子页面的元素:**

$("\#XXX").contents().find(".mycontainer")//获取的是元素。

或 $(window.frames\["XXX"\].contentDocument.documentElement).find(".mycontainer")

window.frames\["XXX"\].contentDocument.getElementsByClassName("mycontainer")

document.getElementById('XXX').contentWindow.document.getElementsByClassName("mycontainer")

**子页面调用父页面的全局变量：**

parent.父页面全局变量名;//获取父页面的全局变量
      parent.父页面的全局变量=值;//为父页面的变量赋值

**子页面调用父页面方法：**

parent.父页面方法名();

**子页面获取父页面的元素：**

window.parent.$(父页面内的元素选择器或id)//获取的是元素；

或

①window.parent.document.getElementById("父页面元素ID");  
②window.parent.document.getElementsByTagName("父页面元素标签名")\[i\];  
③window.parent.document.getElementsByClassName("父页面元素类名")\[i\];

发表评论取消回复

表情：

评论列表（有 0 条评论，633人围观）

还没有评论，来说两句吧...

相关阅读

相关原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法

用原生js在父页面获取iframe子页面的元素，以及在子页面获取父页面元素，这是平时经常会用到的方法，这里写一个例子来总结下： 1、父页面（demo.html），在父页面修改

我不是女神ヾ/ 2023年10月11日 15:28/ 0 赞/ 58 阅读

相关 iframe父子页面通信

iframe获取当前子页面url parent.document.getElementById("ID name").contentWindow.location

冷不防/ 2022年12月23日 13:28/ 0 赞/ 251 阅读

相关 iframe父子兄弟之间调用传值(contentWindow && parent)

iframe的调用包括以下几个方面：（调用包含html dom，js全局变量，js方法）主页面调用iframe； iframe页面调用主页面；

╰+攻爆jí腚メ/ 2022年08月14日 04:39/ 0 赞/ 220 阅读

相关 javascript 父子iframe相互传参数

前端开发的过程中。可能用iframe去嵌套html页面。当我们在父iframe中传递参数去给子iframe的时候。我们可以通过将参数对象设置成子类iframe的win

超、凢脫俗/ 2022年06月13日 08:29/ 0 赞/ 443 阅读

相关 iframe父页面与子页面之间的元素获取与方法调用

1、JS 父调子元素： window.frames\[iframe的name属性值\]; 方法： ① document.getElementById("子页面

港控/mmm°/ 2022年04月13日 14:51/ 0 赞/ 942 阅读

相关 html页面中嵌套iframe与不嵌套iframe获取元素的不同方式

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI1

青旅半醒/ 2022年02月03日 06:55/ 0 赞/ 459 阅读

相关 jQuery iframe父页面和子页面相互调用

jQuery操作iframe父子页面相互操作父页面调用子页面子页面调用父页面父页面调用子页面根据iframe的id找到子页面，取

悠悠/ 2022年01月14日 10:07/ 0 赞/ 553 阅读

相关 iframe 父子页面间方法/属性互相调用

父页面调用子页面父页面调用子页面方法： $("mainfrm")[0].contentWindow.test(); //mainfrm 父页面I

痛定思痛。/ 2021年12月04日 02:45/ 0 赞/ 378 阅读

相关 JQuery javascript实现父子页面相互调用

javascript实现父子页面相互调用 By:授客 QQ：1033553122 ![1569452-20190718124645203-223680087.png

古城微笑少年丶/ 2021年11月13日 19:30/ 0 赞/ 386 阅读

相关 iframe嵌套，父子页面之间变量，方法，元素的相互调用使用介绍

子页面：父页面取子页面的全局变量： var 变量名称= document.getElementById(‘XXX’).contentWindow.变量名称; 父页面调...

红太狼/ 2021年01月19日 09:00/ 0 赞/ 634 阅读