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调试说明
Jun 07 Javascript
js获得地址栏?问号后参数的方法
Aug 08 Javascript
如何将网页表格内容导入excel
Feb 18 Javascript
jQuery页面加载初始化常用的三种方法
Jun 04 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
Jun 06 Javascript
JavaScript变量声明详解
Nov 27 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
Mar 06 Javascript
jQuery实现下拉加载功能实例代码
Apr 01 Javascript
在JavaScript中调用Java类和接口的方法
Sep 07 Javascript
JS刷新父窗口的几种方式小结(推荐)
Nov 09 Javascript
JavaScript实现简单音乐播放器
Apr 17 Javascript
react 组件传值的三种方法
Jun 03 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使用Cookie实现和用户会话的方法
2015/01/21 PHP
php实现约瑟夫问题的方法小结
2015/03/23 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
PHP解析url并得到url参数方法总结
2018/10/11 PHP
PHP实现倒计时功能
2020/11/16 PHP
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
jquery ajax中使用jsonp的限制解决方法
2013/11/22 Javascript
javascript制作的滑动图片菜单
2015/05/15 Javascript
jquery实现的树形目录实例
2015/06/26 Javascript
jQuery实现布局高宽自适应的简单实例
2016/05/28 Javascript
使用vue + less 实现简单换肤功能的示例
2018/02/21 Javascript
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
2019/03/07 Javascript
Vue+abp微信扫码登录的实现代码示例
2020/01/06 Javascript
jquery+ajax实现异步上传文件显示进度条
2020/08/17 jQuery
Python中协程用法代码详解
2018/02/10 Python
浅谈python的深浅拷贝以及fromkeys的用法
2019/03/08 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2019/07/09 Python
Django使用中间键实现csrf认证详解
2019/07/22 Python
python3实现带多张图片、附件的邮件发送
2019/08/10 Python
Python实现微信翻译机器人的方法
2019/08/13 Python
Python 多线程其他属性以及继承Thread类详解
2019/08/28 Python
在Python中使用turtle绘制多个同心圆示例
2019/11/23 Python
python二维键值数组生成转json的例子
2019/12/06 Python
Django Admin 上传文件到七牛云的示例代码
2020/06/20 Python
python不同系统中打开方法
2020/06/23 Python
Pandas DataFrame求差集的示例代码
2020/12/13 Python
戴尔英国官网:Dell英国
2017/05/27 全球购物
美国巧克力喷泉品牌:Sephra
2019/05/05 全球购物
校本教研工作方案
2014/01/14 职场文书
创业融资计划书
2014/04/25 职场文书
导游词400字
2015/02/13 职场文书
复兴之路展览观后感
2015/06/02 职场文书
解读MySQL的客户端和服务端协议
2021/05/10 MySQL
深入理解Pytorch微调torchvision模型
2021/11/11 Python
一次项目中Thinkphp绕过禁用函数的实战记录
2021/11/17 PHP