js操作iframe兼容各种主流浏览器示例代码

在做项目时，遇到了操作iframe的相关问题。业务很简单，其实就是在操作iframe内部某个窗体时，调用父窗体的一个函数。于是就写了两个很简单的htm页面用来测试，使用网上流行的方法在谷歌浏览器中始终报错，不能通过。
父页面parent.html的代码如下

复制代码代码如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><title> 
</title> 
<script src="jquery-1.10.1.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
function ParentFunction() { 
alert('ParentFunction'); 
} 
</script></head> 
<body> 
<input type="button" id="btnCancel" class="button" value="测试" /> 
<iframe id="FRMdetail" name="FRMdetail" frameborder="0" src='child.html' style="width:100%;height:100%;" ></iframe> 
</body> 
</html> 

子页面child.html的代码如下

复制代码代码如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><title> 
</title> 
<script src="jquery-1.10.1.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function () { 
$("#btnTest").click(function (e) { 
var t=window.parent; 
t.ParentFunction(); 
}); 
}) 
</script></head> 
<body> 
<input type="button" id="btnTest" class="button" value="应该获取的值" />rrr 
</body> 
</html> 

网络上流行的方法 var t=window.parent; t.ParentFunction();在IE中能调用，可是在谷歌浏览器中总是提示如下错误，
Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.
网上找了很长时间都没法发现方法，有的也是很早以前的版本，基本上没用了，而且人云亦云，基本上没有测试过。于是自己摸索，后来才发现，谷歌浏览器其实那种方法其实也可以，只是很奇怪，必须发布后才可以，在文件系统中调用，就会出现上边的错误。
其实还有一种html5的方法postMessage，于是就根据着进行了改写，最终代码如下：
父页面parent.html的代码如下

复制代码代码如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><title> 
</title> 
<script src="jquery-1.10.1.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
this.ParentFunction= function() {//和注释掉的方法是一样的，也就是说加不加this都是一样的，因为此处的this就是windows 
alert('ParentFunction'); 
} 
// function ParentFunction() { 
// alert('ParentFunction'); 
// } 
function receiveMessage(e) { 
var data = e.data; 
if(data=="ParentFunction") 
{ 
ParentFunction() ; 
} 
} 
if (typeof window.addEventListener != 'undefined') {//使用html5 的postMessage必须处理的 
window.addEventListener('message', receiveMessage, false); 
} else if (typeof window.attachEvent != 'undefined') { 
window.attachEvent('onmessage', receiveMessage); 
} 
</script></head> 
<body> 
<input type="button" id="btnCancel" class="button" value="测试" /> 
<iframe id="FRMdetail" name="FRMdetail" frameborder="0" src='child.html' style="width:100%;height:100%;" ></iframe> 
</body> 
</html> 

子页面child.html的代码如下

复制代码代码如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head><title> 
</title> 
<script src="jquery-1.10.1.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function () { 
$("#btnTest").click(function (e) { 
var t=window.parent; 
if(!t.ParentFunction)//在不支持时，使用html5 的postMessage方法 
{ 
t.postMessage("ParentFunction", '*'); 
} 
else 
{ 
t.ParentFunction(); 
} 
}); 
}) 
</script></head> 
<body> 
<input type="button" id="btnTest" class="button" value="应该获取的值" />rrr 
</body> 
</html> 

经过改写后，在文件系统中虽然也会出现那个错误，但需要调用的方法确实调用了，目的确实达到了，不影响使用了。

js操作iframe兼容各种主流浏览器示例代码

相关推荐