iframe标签父子通讯

发布于 2022-07-22  126 次阅读


1、获取 子页面 的 window 对象 ----- 获取iframe节点的contentWindow属性

获取 子页面 的 window 对象 ,即获取了子页面的所有变量和方法,获取方法如下:

// iframe id
document.getElementById('menuIframe').contentWindow

// iframe name
window.frames['menuIframe'].window

// iframe index 当前窗体的第几个 iframe
window.frames[1].window

2、子 iframe 获取 父页面----- window.parent

window.parent 即为当前页面的上一级页面的 window 对象

window.parent  

3、通过iframe标签获取原本网页的url

window.parent.location.href

4、与打开的同源新标签页面通信,发送消息----- postMessage

页面对象.postMessage(message, targetOrigin);
//父获子页面对象:
document.getElementById("otherPage").contentWindow
//子获父页面对象:
//window.parent : 获取父页面的window对象
//window.opener : 获取打开这个页面的那个页面的window对象

5、接收消息----- 监听message方法

window.addEventListener("message", function(event) {       
    console.log(event, event.data);   
}, false);

一沙一世界,一花一天堂。君掌盛无边,刹那成永恒。