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


Posted in Javascript onJuly 12, 2016

在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交互并兼容各种浏览器的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于jQuery的消息提示插件之旅 DivAlert(三)
Apr 01 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
Jun 05 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
Jun 01 Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 Javascript
JS实现为排序好的字符串找出重复行的方法
Mar 02 Javascript
JS创建对象的写法示例
Nov 04 Javascript
Vue.js devtool插件安装后无法使用的解决办法
Nov 27 Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 Javascript
js实现拖动缓动效果
Jan 13 Javascript
创建nuxt.js项目流程图解
Mar 13 Javascript
jquery实现抽奖功能
Oct 22 jQuery
vue element el-transfer增加拖拽功能
Jan 15 Vue.js
javascript加减乘除的简单实例
Jul 12 #Javascript
浅谈javascript中的加减时间
Jul 12 #Javascript
多功能jQuery树插件zTree实现权限列表简单实例
Jul 12 #Javascript
基于BootStrap环境写jQuery tabs插件
Jul 12 #Javascript
Angular 路由route实例代码
Jul 12 #Javascript
javascript中获取class的简单实现
Jul 12 #Javascript
springMVC结合AjaxForm上传文件
Jul 12 #Javascript
You might like
Symfony2联合查询实现方法
2016/03/18 PHP
php+jquery+html实现点击不刷新加载更多的实例代码
2016/08/12 PHP
PHP实现批量检测网站是否能够正常打开的方法
2016/08/23 PHP
利用laravel+ajax实现文件上传功能方法示例
2017/08/13 PHP
php面向对象重点知识分享
2019/09/27 PHP
PHP 面向对象程序设计之类属性与类常量实现方法分析
2020/04/13 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
windows系统php环境安装swoole具体步骤
2021/03/04 PHP
javascript 动态table添加colspan\rowspan 参数的方法
2009/07/25 Javascript
javascript 面向对象,实现namespace,class,继承,重载
2009/10/29 Javascript
javascript操作JSON的要领总结
2012/12/09 Javascript
JS调试必备的5个debug技巧
2014/03/07 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
2016/01/19 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
2016/04/01 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
2016/08/15 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
2016/09/23 Javascript
JavaScript实现自定义媒体播放器方法介绍
2017/01/03 Javascript
Vue如何基于es6导入外部js文件
2020/05/15 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
2020/08/13 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
[01:05:07]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第一场2月1日
2021/03/11 DOTA
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
Python命令启动Web服务器实例详解
2017/02/23 Python
Python中list查询及所需时间计算操作示例
2018/06/21 Python
Python3+PyInstall+Sciter解决报错缺少dll、html等文件问题
2019/07/15 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
毕业生文员求职信
2013/11/03 职场文书
化工专业求职信
2014/07/01 职场文书
2014年社区党建工作汇报材料
2014/11/02 职场文书
故宫导游词
2015/01/31 职场文书
小学安全教育主题班会
2015/08/12 职场文书
2019年学校消防安全责任书(2篇)
2019/10/09 职场文书
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis
最新动漫情报:2022年7月新番定档超过30部, OVERLORD骨王第四季也在其中噢
2022/05/04 日漫
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript
clear 万能清除浮动(clearfix:after)
2023/05/21 HTML / CSS