iframe子页面与父页面元素的访问以及js变量的访问

系统管理员 2021-09-17 03:36 390阅读 0赞

**1、子页面访问父页面元素 **  
  
parent.document.getElementById('id')和document相关的方法都可以这样用   
  
**2、父页面访问子页面元素 **  
  
document.getElementById('iframeId').contentDocument.getElementsByTagName('table'); contentDocument后可以使用document相关方法   
  
**3、子页面访问父页面js变量（注：父页面的js变量需为全局变量） **  
  
子页面var variable = parent.variableParent   (variableParent为父页面定义的变量)   
  
**4、父页面访问子页面js变量 **  
  
这部分目前的解决方案是在父页面设置全局变量，在子页面进行修改后将子页面的变量赋值给父页面 。

网上还有一种方法，但我在chrome上试过了，不好使。

1）获取iframe节点

2）获取iframe中的变量

示例：

a.html
    <iframe id='x' name='x' src='b.html'/>
    
    b.html
    <script>
     var y='1';
    </script>
    
    在a.html中获取y，则可以通过以下方式
    window.frames['x'].y  //先获取frame,在获取y
    或者
    document.getElementById('x').contentWindow.y

在iframe 定义了name属性的情况下：window.frames\['x'\]==document.getElementById('x').contentWindow。

iframe尽量定义name属性。

参考：[https://blog.csdn.net/cuihaiyang/article/details/40587075][https_blog.csdn.net_cuihaiyang_article_details_40587075]

[https_blog.csdn.net_cuihaiyang_article_details_40587075]: https://blog.csdn.net/cuihaiyang/article/details/40587075

发表评论取消回复

表情：

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

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

相关阅读

相关 iframe 根据子页面找到当前父页面的元素对象

场景：有时候，在iframe中的子页面需要调用父页面，甚至是父页面的兄弟标签对象。方法： 1. iframe 在子页面中获取父页面的元素对

╰+哭是因爲堅強的太久メ/ 2022年06月01日 01:19/ 0 赞/ 223 阅读

相关 iframe——html子页面调用父页面的方法

$( function () \{ //在iframe子页面中查找父页面元素 alert($( '\default' , window.parent.document

心已赠人/ 2022年05月25日 00:36/ 0 赞/ 374 阅读

相关子页面获取父页面元素

刚写完一个项目，有用到iframe 因为是新手，所以研究了一下，啥也没鼓捣出来。也就是会用了子页面调用父页面的方法。 <iframe id="ifpage" name="

柔情只为你懂/ 2022年05月22日 10:36/ 0 赞/ 259 阅读

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

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

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

相关 iframe父页面自适应子页面的高度

我们一般情况下是在子页面获取高度传递给父页面，但是由于存在跨域问题，解决起来不是很方便而 [html5 postMessage解决跨域、跨窗口消息传递][html5 pos

系统管理员/ 2022年04月11日 12:22/ 0 赞/ 365 阅读

相关 iframe子页面获取父页面的文本值

iframe子页面获取父页面的文本值子页面直接获取： var yearMin = $(’\yearMin’, parent.document).val();

浅浅的花香味﹌/ 2022年03月20日 05:21/ 0 赞/ 358 阅读

相关 iframe 父页面调用子页面方法

<script type="text/javascript"> //调用子页面的方法. var childWi

￡神魔★判官ぃ/ 2022年03月14日 09:36/ 0 赞/ 1134 阅读

相关 iframe 框架父页面刷新子页面

1.父页面添加： <script>　 function testBtn()\{ 　　 var reshSrc = document.getElementById('

向右看齐/ 2021年09月30日 14:38/ 0 赞/ 682 阅读

相关 Js 父页面、子页面互相访问的方法

1、子页面访问父页面元素 parent.document.getElementById('id')和document相关的方法都可以这样用 2、父页面

太过爱你忘了你带给我的痛/ 2021年09月28日 00:30/ 0 赞/ 512 阅读

相关 iframe子页面与父页面元素的访问以及js变量的访问

1、子页面访问父页面元素 parent.document.getElementById('id')和document相关的方法都可以这样用 2、父页面访

系统管理员/ 2021年09月17日 03:36/ 0 赞/ 391 阅读