一个页面中可能嵌入多个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不会执行