Javascript iframe交互并兼容各种浏览器的解决方法

在Web前端开发中，我们经常会用到iframe这个控件。

但是这个控在内、外交互时，往往各个浏览器所用的关键字不同，很是麻烦，为了能够得到子iframe中的window对象，各家浏览器有着各家的指定，有的是window，有的是contentWindow等等也许还有我们不知道的。

但是从子页面访问父层页面，其本上大家都是window.parent就可以了。

那么通过这个特征，我们可以在子页面中，把自身的window对象传递给父页面就可以了，这样父页面就很轻松的访问子页面，再也不用靠虑如何从iframe对象上得到window对象了。

二话不说，我们先看代码：

父页面代码：

window.iframeWindow = null;
function frameReady(subWindow){
window.iframeWindow = subWindow; //赋值
};
<iframe src = "xx" ></iframe>

子页面代码：

$(function(){
window.parent.frameReady(window);
});

通过上面简单的代码，就可以在父页面中访问iframeWindow对象，直接得到了子页面的window对象，非常无脑也非常好用。

如果我有多个iframe该怎么办呢？

这种情况会稍微复杂一点，但是没关系。我们想继续使用上面的方案，就分析一下现状：

1.我们应该会需要一个类似iframeWindows的集合对象，用于管理所有子页面的window对象。

2.每个子页面在调用parent.frameReady时，必须靠诉父页面一个唯一名称，使得我们可以在父页面中对各个iframe进行精确访问

那么这下就简单了，子页面要做的事，无非就是一个名称、编号啥的，我们来看代码

window.subWindowName = "HelloWorldWindow";
$(function(){
window.parent.frameReady(window.subWindowName, window);
});

那么父页面要做的事就是重构frameReady并增加一个参数

window.iframeWindows = {}; //这里变成了一个对象
function frameReady(name, window){
window.iframeWindows[name] = window;
};
function getSubWindow(name){
return window.iframeWindows[name];
}

总结：

通过这种方案构建的页面存在以下优点：

1.父子页面的交互仅依赖于parent关键字（而以前的方式中，不仅依赖parent，还要依赖contentWindow、window等其它不确定关键字，最重要的是parent的支持还是非常好的）

2.window对象统一化，减少了每次使用时再请求的引用链，提高了运行的速度

3.最重要的一点：就是代码写起来轻松多了。

以上所述是小编给大家介绍的Javascript iframe交互并兼容各种浏览器的解决方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 谷歌浏览器不支持showModalDialog模态对话框的解决方法

    忽然发现Chrome浏览器版本 37.0.2062.103 m 不支持showModalDialog模态对话框和无法返回returnValue 项目原先用到的都不能正常执行 找了个折中方案利用window.open代替showModalDialog利用 window.opener.document来操作父页面的元素 复制代码 代码如下: window.open("xsp/exesp?todo=13","","height=500,width=280,sta

  • JavaScript中解决多浏览器兼容性23个问题的快速解决方法

    一.document.formName.item("itemName") 问题 问题说明:IE下,可以使用 document.formName.item("itemName") 或 document.formName.elements ["elementName"]:Firefox 下,只能使用document.formName.elements["elementName"]. 解决方法:统一使用document.formNa

  • 浏览器解析js生成的html出现样式问题的解决方法

    浏览器解析js生成的html出现样式问题的解决方法

    我实现的功能是添加标签,无刷新地添加到标签列表的最后,见下图中第二行,样式明显有问题 我反反复复地检查了chrome console的html结构,都是一样一样的,在IE和FF下我也认真比较过的,还是没有区别.见下图 同样的html结构,同样的style,竟然展现的样式差异很大,一时没了想法,像个无头苍蝇.索性我就把console下的html复制到notepad++进行对比,看出了一点端倪,见下图.左侧为js生成的html,右侧为页面(.aspx)中的html 引起样式差异的原因可能就是左侧缺少

  • Chrome中模态对话框showModalDialog返回值问题的解决方法

    没有找到太好的解决办法,暂时处理方法是,在弹出窗口中同时给 window.opener.ReturnValue 赋返回值.这样在关闭窗口后,通过下面的代码取得返回值: 复制代码 代码如下: var val = window.showModalDialog(...); if(!val) val= window.ReturnValue; 这样在IE.FF.及Chrome中,都可以得到返回值了.

  • javascript中IE浏览器不支持NEW DATE()带参数的解决方法

    复制代码 代码如下: var date1=new Date(dateTimes[z][1]); 在火狐下 可以正常取得时间,在IE7下 却是 NaN.纠结老长时间,放弃了new date 然后再老外的论坛中找了一段段代码可以兼容所有浏览器的格式化日期代码: 复制代码 代码如下: function NewDate(str) { str = str.split('-'); var date = new Date(); date.setUTCFullYear(str[0], str[1] - 1, s

  • JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法

    本文实例讲述了JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法.分享给大家供大家参考,具体如下: 主页面: <script type="text/javascript"> function SelectGroupCust() { var temp = window.showModalDialog("Default2.aspx?xx=" + Date(), "", "dialog

  • showModalDialog在谷歌浏览器下会返回Null的解决方法

    showModalDialog的返回值在IE.火狐下面都能够获取返回值,但是在谷歌浏览器下面会返回Null,下面介绍解决方法 父页面: 复制代码 代码如下: function openwindows(){ var obj = new Object(); //打开模态子窗体,并获取返回值 var retval = window.showModalDialog("ordervideo.jsp?rderIds="+"0010,0020,0030",obj,"di

  • Javascript iframe交互并兼容各种浏览器的解决方法

    在Web前端开发中,我们经常会用到iframe这个控件. 但是这个控在内.外交互时,往往各个浏览器所用的关键字不同,很是麻烦,为了能够得到子iframe中的window对象,各家浏览器有着各家的指定,有的是window,有的是contentWindow等等也许还有我们不知道的. 但是从子页面访问父层页面,其本上大家都是window.parent就可以了. 那么通过这个特征,我们可以在子页面中,把自身的window对象传递给父页面就可以了,这样父页面就很轻松的访问子页面,再也不用靠虑如何从ifra

  • javascript 开发之网页兼容各种浏览器

    javascript 开发之网页兼容各种浏览器 前言: 关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) <style> #wrapper { width: 100px!imp

  • javascript在IE下trim函数无法使用的解决方法

    本文实例分析了javascript在IE下trim函数无法使用的解决方法,对于web前段设计有一定的借鉴价值.具体分析如下: 首先,javascript的trim函数在firefox下面使用没有问题: <script language="javascript"> var test1 = " aa "; test1 = test1.toString(); test1 = test1.trim(); </script> 在火狐下这样用没有问题,

  • JS模态窗口返回值兼容问题的完美解决方法

    因系统要兼容原IE已使用的关闭方法,经调试测得,需对window.dialogArguments进行再较验,不然易出问题. function OKEnd(vals) { if (vals == null) vals = "TRUE"; if (typeof (window.opener) == "undefined") { if (typeof (window.dialogArguments) != "undefined") { if (wind

  • 关于spring版本与JDK版本不兼容的问题及解决方法

    在用ssh框架测试时出现问题,如下: java.lang.IllegalArgumentException at org.springframework.asm.ClassReader.<init>(Unknown Source) at org.springframework.asm.ClassReader.<init>(Unknown Source) at org.springframework.asm.ClassReader.<init>(Unknown Sourc

  • JavaScript实现省市联动过程中bug的解决方法

    本文为大家分享了JavaScript实现省市联动过程中bug的解决方法,供大家参考,具体内容如下 先把实现省市联动遇到的问题描述一下 1.1.原来的思路 1.1.1.初始化加载省份 $.ajax({ 'type' : 'POST', 'dataType' : 'json', 'url' : '${rc.contextPath}/crm/merchantMgr/editMerchantBankAccount.htm?method=getBankProvinces', 'success' : fun

  • vue+iview 兼容IE11浏览器的实现方法

    最近在搞一个基于vue的后台管理系统兼容IE浏览器,眼泪都要掉下来.后来和产品说了,同意兼容IE11,感动得我眼泪啊 这里也就是记录一下我遇到的超级烦的bug 首先是'babel-polyfill' 和 "autoprefixer-loader" 这个不用多说,资源一大堆 然后 打包之后一直  const  去不掉,查了之后是 webpack 有 webpack-dev 不支持IE低版本了,要把 webpack 版本往下调,我是拒绝的 1.IE  new Date() 失败 new D

  • JavaScript自定义DateDiff函数(兼容所有浏览器)

    复制代码 代码如下: <script type="text/javascript"> function NewDate(str) { str = str.split('-'); var date = new Date(); date.setUTCFullYear(str[0], str[1] - 1, str[2]); date.setUTCHours(0, 0, 0, 0); return date; } function TimeCom(dateValue) { var

  • javascript 日历提醒系统( 兼容所有浏览器 )

    功能介绍: 1.正常的日历功能. 2.等等等 3.接收 数组 例如: 复制代码 代码如下: new Calendar("id").show( { "20091120": "今天干了嘛嘛...", "2009320": "今天干了嘛嘛..." } ); 日历提示样式分为3类. a. 当日 b.当年当月当日提示样式 c.当月当日提示样式 鼠标覆盖在有提示的日期上自动出现提示内容 4...... 主要分为2种用处

  • JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)

    首先这里声明一下,关于我测试浏览器的版本是chrome15.0.874.121 Firefox 8.01 IE9 IETester 下面的代码关于声明 1:获得滚动条的情况 复制代码 代码如下: function getScroll(){        var t, l, w, h; if (document.documentElement && document.documentElement.scrollTop) {            t = document.documentEl

随机推荐