关于引用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对象。