iframe页面使用Js实现父页面和子页面通信

最新推荐文章于 2025-05-09 15:38:32 发布

大雄Obear

最新推荐文章于 2025-05-09 15:38:32 发布

阅读量954

点赞数

文章标签： iframe页面使用Js实现父页面和子页面通信

本文链接：https://blog.csdn.net/bigbear00007/article/details/102100035

版权

本文详细介绍了HTML中iframe元素的特性和用法，包括如何使用document.getElementById方法获取iframe内的DOM节点，以及如何通过contentWindow属性访问iframe的window对象。此外，还探讨了父窗口与子窗口之间的通信机制，包括子页面向父页面发起通信和父页面向子页面发起通信的具体实现。

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

iframe 元素

<iframe>元素遵守同源政策，只有当父窗口与子窗口在同一个域时，两者之间才可以用脚本通信。

document.getElementById

对于iframe嵌入的窗口，document.getElementById方法可以拿到该窗口的 DOM 节点，然后使用contentWindow属性获得iframe节点包含的window对象。

 var iframe = document.getElementById("iframe");
 var iwindow = iframe.contentWindow;
 var idoc = iwindow.document;
 
 console.log("window：",iwindow);//获取iframe的window对象
 console.log("document：",idoc); //获取iframe的document
 console.log("html：",idoc.documentElement);//获取iframe的html
 console.log("head：",idoc.head); //获取head
 console.log("body：",idoc.body); //获取body

打印结果如下：
在这里插入图片描述

window.frames[‘iframe’]

<iframe name="iframe" src="/admin/common/map/mineMap"></iframe>

给iframe设置name属性，通过window.frames[‘iframe']也可以说去子页面的DOM节点。

多窗口通信

窗口内部，使用window.parent引用父窗口。如果当前页面没有父窗口，则window.parent属性返回自身。因此，可以通过window.parent是否等于window.self，判断当前窗口是否为iframe窗口。

window.parent 获取上一级的window对象，如果还是iframe则是该iframe的window对象
window.top 获取最顶级容器的window对象，即，就是你打开页面的文档
window.self 返回自身window的引用。可以理解 window===window.self

具体可以通过下图加深理解：
在这里插入图片描述

子页面(iframe)向父页面发起通信

示例：

子页面：
setMapinfo(){
    var vm = parent.page;
    var  params = {
        "lng": self.lng,
        "lat": self.lat,
        "address": self.address
    };

    // 为父级页面返回信息
    vm.getMapInfo(params);
},

父页面：
getMapInfo(point){
    if(point){
        this.form.lng = point.lng;
        this.form.lat = point.lat;
    }
},

子页面中取得数据，通过setMapinfo方法以参数的形式传给父页面中的getMapInfo

父页面向子页面(iframe)发起通信

示例：

<iframe id="liveview" name="liveview" src="/admin/videoSurveillance/index/getLiveVideo"></iframe>

// 视频内容切换
onVideoChange(value){
    document.getElementById("liveview").contentWindow.window.page.getVideo(sbbh);
   
    // 等同于上面方法 
    // window.frames[‘liveview'].window.page.getVideo(sbbh);
},