关于引用iframe的一点小说明

有时候，在web页面中使用iframe，可以解决一些实际问题，比如跨域访问等……这篇文章的关键不是iframe适用于哪些场景？而是iframe间如何进行互通？所谓互通是指：

情况1：在任何一个页面中调用其它页面的方法或数据（比如：在frameb.html中调用index.html中的sayHello）

情况2：在任何一个页面中访问其它页面的元素（比如：在frameb.html中访问framea.html中的文本框）

针对情况1：

设有一个index.html页面，包含了两个iframe，id分别是framea和frameb，同时对应的url是framea.html和frameb.html。

index.html有自己的sayHello()方法，及run_framea()、run_frameb()两个方法，分别调用framea.html和frameb.html中的sayHello()方法。

 <h1>我是主(父)窗口</h1>
 <button onclick="run_framea()">调用A窗口中的数据</button>
 <button onclick="run_frameb()">调用B窗口中的数据</button>

 <iframe id="framea" src="framea.html"></iframe>
 <iframe id="frameb" src="frameb.html"></iframe>
 <script>
 function sayHello() {
     alert('Hello, 我是主窗口');
 }
 function run_framea() {
     //window.frames['framea'].sayHello();
     window.frames['framea'].contentWindow.sayHello();
 }
 function run_frameb() {
     window.frames['frameb'].contentWindow.sayHello();
 }
 </script>

调用的时候要注意两点：

1）文档要加载完毕（包括iframe中的文档）。建议这类调用，要用在window.onload之后再执行相应的操作。

2）访问iframe中的数据源的方法有如下几种：

 window[i].method(); //i是iframe的索引号

 window.frames[i].method(); //i是iframe的索引号

 window.frames['id'].contentWindow.method(); //id是iframe的DOM id

 //window.frames['id']方式访问得到是的iframe本身
 //window.frame[0]方式访问得到是iframe里文档的window
 //window.frames['id'].contentWindow === window.frame[0]

下面是framea.html的原代码：也有他自己的sayHello()方法，和调用run_parent()、run_frameb()方法

<h1>我是窗口A</h1>
<button onclick="run_parent()">调用父窗口中的数据</button>
<button onclick="run_frameb()">调用B窗口中的数据</button>

<script>
function sayHello() {
    alert('Hello, 我是窗口A');
}
function run_parent() {
    parent.sayHello();
}
function run_frameb() {
    parent.frames['frameb'].contentWindow.sayHello();
}
</script>

注：parent是某个iframe的包含页面的window

针对情况2：

通过上面的例子可以得知，iframe[0]为一个文档的window对象，那么iframe[0].document则是对应的document对象。