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


Posted in Javascript onJuly 22, 2013

在做项目时,遇到了操作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>

经过改写后,在文件系统中虽然也会出现那个错误,但需要调用的方法确实调用了,目的确实达到了,不影响使用了。
Javascript 相关文章推荐
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
Jan 15 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
Apr 15 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
Apr 23 Javascript
pace.js页面加载进度条插件
Sep 29 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
微信jssdk在iframe页面失效问题的解决措施
Mar 03 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
Ionic默认的Tabs模板使用实例
Aug 29 Javascript
prototype.js简单实现ajax功能示例
Oct 18 Javascript
VSCode配置react开发环境的步骤
Dec 27 Javascript
vue配置font-awesome5的方法步骤
Jan 27 Javascript
Vue中父子组件的值传递与方法传递
Sep 28 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
Jul 22 #Javascript
JS判定是否原生方法
Jul 22 #Javascript
js图片延迟加载的实现方法及思路
Jul 22 #Javascript
js添加table的行和列 具体实现方法
Jul 22 #Javascript
JS中eval函数的使用示例
Jul 21 #Javascript
JS中prototype关键字的功能介绍及使用示例
Jul 21 #Javascript
原生JS实现表单checkbook获取已选择的值
Jul 21 #Javascript
You might like
php设计模式 Chain Of Responsibility (职责链模式)
2011/06/26 PHP
Zend Framework入门教程之Zend_Db数据库操作详解
2016/12/08 PHP
PHP cURL获取微信公众号access_token的实例
2018/04/28 PHP
PHP生成随机码的思路与方法实例探索
2019/04/11 PHP
yii2 在控制器中验证请求参数的使用方法
2019/06/19 PHP
Cookie跨域问题解决方案代码示例
2020/11/24 PHP
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
2014/12/18 Javascript
jquery常用的12个小功能
2016/07/22 Javascript
JavaScript中splice与slice的区别
2017/05/09 Javascript
通过示例彻底搞懂js闭包
2017/08/10 Javascript
AngularJS select设置默认值的实现方法
2017/08/25 Javascript
nodejs socket服务端和客户端简单通信功能
2017/09/14 NodeJs
Vue 应用中结合vux使用微信 jssdk的方法
2018/08/28 Javascript
微信小程序渲染性能调优小结
2019/07/30 Javascript
vue中对象数组去重的实现
2020/02/06 Javascript
keep-alive不能缓存多层级路由菜单问题解决
2020/03/10 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
2020/05/06 Javascript
vscode+gulp轻松开发小程序的完整步骤
2020/10/18 Javascript
vue实现两个组件之间数据共享和修改操作
2020/11/12 Javascript
vue实现可移动的悬浮按钮
2021/03/04 Vue.js
python 算法 排序实现快速排序
2012/06/05 Python
Python编程中flask的简介与简单使用
2018/12/28 Python
Python的缺点和劣势分析
2019/11/19 Python
Python Tornado批量上传图片并显示功能
2020/03/26 Python
python利用蒙版抠图(使用PIL.Image和cv2)输出透明背景图
2020/08/04 Python
详解css3中 text-fill-color属性
2019/07/08 HTML / CSS
澳大利亚买卖正宗二手奢侈品交易平台:Luxe.It.Fwd
2019/10/16 全球购物
诉讼代理人授权委托书
2014/04/08 职场文书
2014年重阳节活动策划方案书
2014/09/16 职场文书
邀请函模板
2015/02/02 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
食品安全责任书范本
2015/05/09 职场文书
2019年年中工作总结讲话稿模板
2019/03/25 职场文书
Java 关于String字符串原理上的问题
2022/04/07 Java/Android