js操作iframe兼容各种浏览器
来源:互联网 发布:vb平方根函数 编辑:程序博客网 时间:2024/04/30 10:03
在做项目时,遇到了操作iframe的相关问题。业务很简单,其实就是在操作iframe内部某个窗体时,调用父窗体的一个函数。于是就写了两个很简单的htm页面用来测试,使用网上流行的方法在谷歌浏览器中始终报错,不能通过。
子页面child.html的代码如下
父页面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"> functionParentFunction() { 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'); } // functionParentFunction() { // 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;// var t = window.opener; 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兼容各种浏览器
- js操作select各浏览器兼容
- js操作iframe的div移动 | 兼容FF+IE
- IE浏览器兼容iframe跳转
- ajax兼容各种浏览器
- CSS各种浏览器兼容
- ajax兼容各种浏览器
- 各种浏览器兼容知识
- JS兼容各种浏览器的回车事件监控
- js 获取屏幕各种宽高的方法(浏览器兼容)
- js,jquery字符串转换json,兼容各种浏览器
- js 获取屏幕各种宽高的方法(浏览器兼容)
- js 获取屏幕各种宽高的方法(浏览器兼容)
- JS生成二维码(兼容各种浏览器及中文)
- 模仿淘宝聚划算倒计时js,兼容各种浏览器
- js 获取屏幕各种宽高的方法(浏览器兼容)
- js 获取屏幕各种宽高的方法(浏览器兼容)
- js 获取屏幕各种宽高的方法(浏览器兼容)
- R.java
- C++关键字
- 【oracle错误解决】ORA-01033;ORA-00313;ORA-00312
- UIView.h 分析
- R并行程序框架
- js操作iframe兼容各种浏览器
- linux 中多线程使用
- tomcat 设置DEBUG模式
- iOS调用其他应用 的写法
- PDF417码制尺寸定义
- *nux平台上的C10M问题
- Hadoop后时代
- 《拆掉思维里的墙》简评和部分摘录
- 内存区划分、内存分配、常量存储区、堆、栈、自由存储区、全局区[C++][内存管理]