iframe应用 相互之间发送消息 postMessage

IFRAME
  IFRAME 元素也就是文档中的文档

window 对象
  浏览器会在其打开一个 HTML 文档时创建一个对应的 window 对象。但是,如果一个文档定义了一个或多个框架(即,包含一个或多个 frame 或 iframe 标签),浏览器就会为原始文档创建一个 window 对象,再为每个框架创建额外的 window 对象。这些额外的对象是原始窗口的 子窗口,可能被原始窗口中发生的事件所影响。例如,关闭原始窗口将导致关闭全部子窗口。如果想要创建新窗口(以及对应的 window 对象),可以使用像 open, showModalDialog 和 showModelessDialog 这样的方法。

contentWindow
  contentWindow属性是指指定的frame或者iframe所在的window对象在IE中iframe或者frame的contentWindow属性可以省略,但在Firefox中如果要对iframe对象进行编辑则必须指定contentWindow属性。

一、在使用iframe的页面,要操作这个iframe里面的DOM元素可以用:
contentWindow、contentDocument(测试的时候chrom浏览器,要在服务器环境下)

1.先获取iframe里面的window对象,再通过这个对象,获取到里面的DOM元素

例子:
var ifr = document.getElementById("iframe");
ifr.contentWindow.document.getElementById("XXXXX")
<iframe src="a.html" id=""></iframe>
ifr.contentWindow 这里,返回的是iframe的window对象,所以后面可以接着调用document方法,再接着调用getElementByTagName。那么就可以对iframe里面的元素进行操作了。

二、在iframe本页面,要操作这个iframe的父页面的DOM元素(即嵌套这个iframe的页面)可以用:
window.parent、window.top(这里的TOP是获取的顶层,即有多层嵌套iframe的时候使用)

var ifr = document.getElementByTagName("iframe");
ifr.parent.document.getElementById("XXXXX")
<iframe src="a.html" id=""></iframe>

三、onload事件

非IE下用法
ifr.onload = function(){
  //SOMETHING
}

IE下,需要绑定
ifr.attachEvent("onload",function(){
  //SOMETHING
})

原文地址:https://www.cnblogs.com/ms-grf/p/6913347.html