网络编程

js操作iframe兼容各种主流浏览器示例代码
网络编程 2025/5/18 佚名
3 2
在做项目时，遇到了操作iframe的相关问题。业务很简单，其实就是在操作iframe内部某个窗体时，调用父窗体的一个函数。于是就写了两个很简单的htm页面用来测试，使用网上流行的方法在谷歌浏览器中始终报错，不能通过。
父页面parent.html的代码如下
复制代码 代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title>
<script src="/UploadFiles/2021-04-02/jquery-1.10.1.min.js"><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="/UploadFiles/2021-04-02/jquery-1.10.1.min.js"><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="/UploadFiles/2021-04-02/jquery-1.10.1.min.js"><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="/UploadFiles/2021-04-02/jquery-1.10.1.min.js"><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>

经过改写后，在文件系统中虽然也会出现那个错误，但需要调用的方法确实调用了，目的确实达到了，不影响使用了。
标签：
iframe,浏览器
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
www.dyhadc.com 白云城资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
白云城资源网 Copyright www.dyhadc.com