html简单父子页面 js 的 iframe 父子页面通信的简单方法

1、获取子页面 的 window 对象

在父页面中，存在如下两个对象

window.frames

document.iframeElement.contentWindow

可以获取到 子页面 window 对象

// iframe id

document.getElementById('menuIframe').contentWindow

// iframe name

window.frames['menuIframe'].window

// iframe index 当前窗体的第几个 iframe

window.frames[1].window

既然拿到了 window 对象，那函数和DOM就到手了。

2、子 iframe 获取父页面

window.parent 对象

window.top对象

// 判断当前页面是否是 iframe 或 顶级页面

window.parent == window

window.top == window

window.parent 即为当前页面的上一级页面的 window 对象，如果当前页面已是 顶层 页面，则 window.parent 就是自己。

3、小实例

Document

function parentHello() {

alert("this is parent hello function!");

}

window.frames['iframeContainer'].subHello();

Document

function subHello() {

alert("this is sub hello function!");

}

window.parent.parentHello();