父框架与子框架的互操作

一个页面中可能嵌入多个iframe，该页面与iframe中的子页面的互操作方式如下：

1、父页面访问子页面

　　说明实例，index.aspx为父页面，index2.aspx为子页面并定义了函数save()，index.aspx如下:

<div>
    <iframe id="assetReportIframe" name="myframe" src="index2.aspx"></iframe>
</div>

　1.1 window.frames

　　window对象包含属性frames，其为当前页面中子框架window对象的集合，因此可以通过该属性访问子框架window对象。属性frames的访问方式有两种：

　　　　a、索引

　　　　b、名称

　　　　c、id

　　通过索引或名称，ie7、ie8、ie11、chrome表现相同，如：window.frames[0]或者window.frames['myframe']

　　通过id，ie(包括7、8、11)与chrome存在差异：

　　　　ie中，window.frames['assetReportIframe']返回的是该框架的window对象

　　　　chrome中，window.frames['assetReportIframe']返回的是该框架元素的对象

　1.2 iframe.contentWindow

　　此为通用方式：document.getElementById('assetReportIframe').contentWindow.save()

2、子页面访问父页面

　　子页面访问父页面方式比较简单，即在子页面调用window.top或window.parent

3、子页面与父页面的js执行均调用同一线程，即仍为单线程

　　测试方法：利用同步ajax会阻断线程执行的特点，分别在父页面与子页面调用ajax和alert函数，结果为子页面js会被父页面阻断

 

window.open()打开的页面也可以与父页面互操作，另外，注意：

　　1、以上所有操作须在同一域中，不同域之间的消息传递可是使用XDM，详见《javascript高级程序设计》

 　  2、在ie7、ie8、ie11、chrome中，iframe定义的格式为<iframe></iframe>，而不能使用<iframe />，后一种格式虽然浏览器能够识别，但会导致浏览器忽略该iframe之后script标签，即iframe之后的js不会执行