关于Javascript与iframe的那些事儿

嵌入 iframe 的页面父页面与子页面均可以很轻松的在同域或跨子域的情况下进行读写操作在完全不同域的情况下也可以通过更改 hash 的方式进行通信下面我在九个不同（版本的）浏览器中对此进行数据传输与更改的兼容性测试
同域或跨子域读写操作 iframe 里的内容
父页面读写操作子页面

复制代码 代码如下:
<iframe id="testiframe" name="testiframe" src="childhtml" scrolling="no" frameborder=""></iframe>
<script>
windowonload = function () {
/*
* 下面两种获取节点内容的方式都可以
* 由于 IE IE 不支持 contentDocument 属性所以此处用了通用的
* windowframes["iframe Name"] or windowframes[index]
*/
var d = windowframes["testiframe"]document;
dgetElementsByTagName(h)[]innerHTML = pp;
alert(dgetElementsByTagName(h)[]firstChilddata);
}
</script>

注在请务必通过 windowonload 方法访问 iframe 中的节点否则浏览器会提示错误拒绝访问在 IE Firefox Opera 下在DOMReady 时也可以访问 iframe 中的节点
子页面读写操作父页面

复制代码 代码如下:
<script>
parentdocumentgetElementsByTagName(h)[]innerHTML = pp;
alert(parentdocumentgetElementsByTagName(h)[]firstChilddata);
</script>

小结
• 测试通过 IE IE IE Firefox Firefox Firefox Chrome Opera Safari
• 查阅资料得出 documentgetElementById(‘id name)contentDocument 全等于 windowframes["iframe Name"]document
• 跨子域时需要在父页面和子页面 JS 中分别加上 documentdomain = xxxcom;
跨域操作 iframe 里内容
当两个网页所在域不同时要实现数据的互相调用只能通过 JS 改变 location 对象的 hash 属性的值来做到互相通信
父页面

复制代码 代码如下:
<iframe id="testiframe" src="" scrolling="no" frameborder=""></iframe>
<input type="button" value="send" onclick="sendRequest()" />
<script>
function sendRequest() {
documentgetElementById(testiframe)src += #a;
}
var interval = windowsetInterval(function(){
if(locationhash) {
alert(locationhash);
windowclearInterval(interval);
}
});
</script>

子页面

复制代码 代码如下:
<h>RRRRRR</h>
<script>
var url = ;
oldHash = selflocationhash
newHash
interval = windowsetInterval(function(){
newHash = selflocationhash;
if(oldHash != selflocationhash) {
documentgetElementsByTagName(h)[]innerHTML = pp;
//alert(parentlocationhref); //去掉这个注释浏览器会提示无权限
parentlocationhref = url + #b;
windowclearInterval(interval);
}
});
</script>

小结
• 经测试 IE IE IE Firefox Firefox Firefox Chrome Opera Safari 除 IE IE 外只要改变hash 就会记录在浏览器 history 中
• 我有试图在子页面用 parentlocationreplace 的方法来避免父页面向服务器发送请求而进行跳转这样理论上浏览器就不会记录历史但未能奏效
• 子页面无权读取父页面的 url 但可以对父页面的 url 进行写操作所以跨域操作时要提前得知父页面的url
由于前端解决跨域问题的局限性比较大所以最好用服务器端解决方案