iframe的基本使用

蓝格子.

于 2020-11-13 11:24:47 发布

阅读量777

点赞数

CC 4.0 BY-SA版权

分类专栏： js技巧文章标签： js

本文链接：https://blog.csdn.net/qq_35168861/article/details/109671184

js技巧专栏收录该内容

28 篇文章

订阅专栏

本文详细探讨了如何在网页中通过iframe实现父页面与子页面之间的数据通信。介绍了利用`contentWindow`属性从父页面获取子页面的数据，以及通过监听`load`事件在子页面中调用父页面方法进行传值的方法。这些技术对于前后端分离的项目或者多页面应用的交互具有重要的实践意义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当一个页面使用了iframe作为嵌套时，如何想要将父页面的数据传给iframe子页面，那iframe所指向的呢个子页面是怎么获取呢，又或者子页面的数据要给父页面使用，那么父页面又如何获取子页面的数据呢？

父页面获取子页面中的变量与方法：

 <iframe id="file_iframe" name="file_iframe" src="" frameborder="0" style=" width:300px;height: 200px;"></iframe>

window.parent.document.getElementById('file_iframe').contentWindow.xxx

传值：父页面调用子页面方法传参即可

// 子页面加载完成后执行
  document.getElementById('file_iframe').addEventListener('load',() => {
    window.parent.document.getElementById('file_iframe').contentWindow.ParentContext(_fileData,exportType)
  })

子页面给父页面传值：即子页面调父页面方法传参

parent.GetChildValue(value);