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

Posted 知

篇首语：青春须早为，岂能长少年。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 js操作iframe兼容各种主流浏览器示例代码相关的知识，希望对你有一定的参考价值。

遇到了操作iframe的相关问题 其实就是在操作iframe内部某个窗体时 调用父窗体的一个函数 下面与大家分享下操作iframe兼容各种浏览器的方法  

　　在做项目时 遇到了操作iframe的相关问题 业务很简单 其实就是在操作iframe内部某个窗体时 调用父窗体的一个函数 于是就写了两个很简单的页面用来测试 使用网上流行的方法在谷歌浏览器中始终报错 不能通过 父页面parent 的代码如下

复制代码 代码如下: < 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" value="测试" /> <iframe id="FRMdetail" name=FRMdetail frameborder=" " src=child ></iframe> </body> </>

　　 子页面child 的代码如下

复制代码 代码如下: < 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" value="应该获取的值" />rrr </body> </>

　　 网络上流行的方法 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 网上找了很长时间都没法发现方法 有的也是很早以前的版本 基本上没用了 而且人云亦云 基本上没有测试过 于是自己摸索 后来才发现 谷歌浏览器其实那种方法其实也可以 只是很奇怪 必须发布后才可以 在文件系统中调用 就会出现上边的错误 其实还有一种 的方法postMessage 于是就根据着进行了改写 最终代码如下 父页面parent 的代码如下

复制代码 代码如下: < 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 ) //使用 的postMessage必须处理的 window addEventListener( message receiveMessage false); else if (typeof window attachEvent !=undefined ) window attachEvent( onmessage receiveMessage); </script></head> <body> <input type=button id="btnCancel" value="测试" /> <iframe id="FRMdetail" name=FRMdetail frameborder=" " src=child ></iframe> </body> </>

　　 子页面child 的代码如下

复制代码 代码如下: < 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)//在不支持时 使用 的postMessage方法 t postMessage("ParentFunction" * ); else t ParentFunction(); ); ) </script></head> <body> <input type=button id="btnTest" value="应该获取的值" />rrr </body> </> cha138/Article/program/Java/JSP/201311/19998

相关参考

知识大全 js获得指定控件输入光标的坐标兼容IE等多种主流浏览器

js获得指定控件输入光标的坐标兼容IE等多种主流浏览器  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧

知识大全 js实现拉伸拖动iframe的具体代码

这篇文章介绍了js实现拉伸拖动iframe的具体代码有需要的朋友可以参考一下 　　左边iframe放树目录右边的iframe放index页拖鼠标同时控制个iframe的宽高期待有人能改进操作

知识大全 捕获键盘事件(且兼容各浏览器)

　　例子屏蔽浏览器F刷新代用刷新iframe框架复制代码代码如下://捕获F事件$("body")keydown(function(e)varev=windowevent||e;varcode=evk

知识大全 javascript跟随滚动效果插件代码

　　JavascriptFollowPlugin　　Js跟随滚动效果插件　　支持定义多个跟随ID采用cssfixed属性不支持ie兼容其他主流浏览器　　支持定义滚动到底部的最小高度不会覆蓋底部　　页面

知识大全 js导出格式化的excel 实例方法

最常见的方式是使用js函数操作excle文件这种方式可能因浏览器不同存在兼容性问题另一种简单方法就是导出一个excel能识别格式的xml文件用excel打开 复制代码代码如下:functio

知识大全 javascript[js]获取url参数的代码

　　最近做个页面需要用javascript获取url参数可发现网上的东西实在是多了错误也实在是多啊真晕浪费了我不少时间于是我便总结一下一个好用的就可以了先声明下用正则是简单但多浏览器的兼容性和速度不敢

知识大全 js操作iframe的一些方法介绍

　　获得iframe的window对象存在跨域访问限制　　chromeiframeElementcontentWindowfirefoxiframeElementcontentWindowieifra

知识大全 js监听键盘事件示例代码

本文为大家详细介绍下使用js如何监听键盘事件具体实现代码如下感兴趣的朋友可以参考下希望对大家有所帮助 复制代码代码如下:cha138/Article/program/Java/JS

知识大全 js正则解析URL参数示例代码

js正则解析URL参数示例代码  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！URL参数使用js正则

知识大全 JS实现图片直接下载示例代码

JS实现图片直接下载示例代码  以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！　　本文为大家详细介绍下