父框架与子框架的互操作

标签：

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

1、父页面访问子页面

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

　　　　a、索引

　　　　b、名称

　　例如，父页面index.aspx:　

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

　　子页面index2.aspx定义了函数save()，则从index.aspx中调用该函数的方法为：window.frames[0]或者window.frames[‘myframe‘]，这两种方式适用于ie7、ie8、ie11、chrome；

　　1.2 属性frames也可以通过id进行索引，但ie(包括7、8、11)与chrome存在差异，其中，

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

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

　　　　因此，这种方式并不合理，通过id的方式访问iframe中window对象的通用方式是先获取iframe对象，之后通过该对象获取其中的页面的window对象，即：

　　　　　　document.getElementById(‘assetReportIframe‘).contentWindow.save()

2、子页面访问父页面

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

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

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

window.open()打开的页面也可以与父页面互操作，待总结...

父框架与子框架的互操作

标签：

原文地址：http://www.cnblogs.com/MattCheng/p/5069713.html