遇到了操作iframe的相关问题
其实就是在操作iframe内部某个窗体时
调用父窗体的一个函数
下面与大家分享下操作iframe兼容各种浏览器的方法
在做项目时遇到了操作iframe的相关问题业务很简单其实就是在操作iframe内部某个窗体时调用父窗体的一个函数于是就写了两个很简单的htm页面用来测试使用网上流行的方法在谷歌浏览器中始终报错不能通过
父页面parenthtml的代码如下
复制代码 代码如下:
<html xmlns="
<head><title>
</title>
<script src="jquery
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="
" src=
child
html
style="width:
%;height:
%;" ></iframe>
</body>
</html>
子页面childhtml的代码如下
复制代码 代码如下:
<html xmlns="
<head><title>
</title>
<script src="jquery
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=windowparent; tParentFunction();在IE中能调用可是在谷歌浏览器中总是提示如下错误
Blocked a frame with origin "null" from accessing a frame with origin "null" Protocols domains and ports must match
网上找了很长时间都没法发现方法有的也是很早以前的版本基本上没用了而且人云亦云基本上没有测试过于是自己摸索后来才发现谷歌浏览器其实那种方法其实也可以只是很奇怪必须发布后才可以在文件系统中调用就会出现上边的错误
其实还有一种html的方法postMessage于是就根据着进行了改写最终代码如下
父页面parenthtml的代码如下
复制代码 代码如下:
<html xmlns="
<head><title>
</title>
<script src="jquery
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
) {//使用html
的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="
" src=
child
html
style="width:
%;height:
%;" ></iframe>
</body>
</html>
子页面childhtml的代码如下
复制代码 代码如下:
<html xmlns="
<head><title>
</title>
<script src="jquery
min
js" type="text/javascript"></script>
<script type="text/javascript">
$(document)
ready(function () {
$("#btnTest")
click(function (e) {
var t=window
parent;
if(!t
ParentFunction)//在不支持时
使用html
的postMessage方法
{
t
postMessage("ParentFunction"
*
);
}
else
{
t
ParentFunction();
}
});
})
</script></head>
<body>
<input type="button" id="btnTest" class="button" value="应该获取的值" />rrr
</body>
</html>
经过改写后在文件系统中虽然也会出现那个错误但需要调用的方法确实调用了目的确实达到了不影响使用了
