artDialog组件与iframe
背景
组件官网。 未用过的朋友可以先了解下。
当Content参数传递html元素时,官方的解释是:
备注:1、元素不是复制而是完整移动到对话框中,所以原有的事件与属性都将会保留 2、如果隐藏元素被传入到对话框,会设置display:block属性显示该元素 3、对话框关闭的时候元素将恢复到原来在页面的位置,style display属性也将恢复
如果说该元素是页面本身,最终显示的载体也是页面本身,那么没有任何问题。但在使用了iframe下会有个奇怪的问题,当元素为iframe时,在chrome下,frame会重新加载一次。
问题现象
先看top.html代码。
<iframe id="ff" src="child1.html"></iframe>
<input type="button" onclick="fn()" value="弹出黄色Frame(在Chrome下frame会重新加载一次,所以值丢失了)" />
<script>
function fn() {
$.dialog({
title: '测试',
content: document.getElementById("ff")
});
}
</script>
child1页面上有个输入框,每次加载时会显示重新加载。我们可以在里面输入,会发现点击button后,IE(本机IE8)下正常,输入的值未丢失。在Chrome下frame会被重新加载一次,导致输入的值丢失了。
这样带来的问题是:init事件则有问题。init是在对话框弹出后会执行的函数,我们希望在弹出一个frame后,加载frame的数据等,而此时init函数就不能发挥作用。既然是iframe重新加载了,导致了这个问题,那么init的执行时机应该是当frame加载完毕后,再调用init事件。通过一翻搜索,找到兼容各种浏览器监听iframe加载完毕的代码:
thisFrame.onload = thisFrame.onreadystatechange = function () {
if (this.readyState && this.readyState != 'complete') return;
thisFrame.onload = _top.frames[config.content.name].onreadystatechange = null;
//执行方法
};
于是我修改init的事件则为:
if(webkit){ //若是chrome
thisFrame.onload = thisFrame.onreadystatechange = function () {
if (this.readyState && this.readyState != 'complete') return;
thisFrame.onload = _top.frames[config.content.name].onreadystatechange = null;
//执行方法
};
}
else{
//执行方法
}
到这里问题算是基本上解决了。
进一步处理
首先解释下为什么要使用frame。
对话框需要穿越。例如主页top.html,有个frame专门用来显示具体的内容。某个内容页需要弹出数据的详情对话框,而且该对话框里面在top顶部,所以使用了artDialog提供的穿越机制,它可以直接将元素显示top页面的最上方。但由于artDialog的做法是将元素完整移动,所以如果是普通的div,该div又引用了很多js,穿越后会出问题,相应的事件会提示缺少js。
当然如果把这个div需要的js或css一律拷贝到top页面上,是没有问题的,但这样肯定不好。所以我使用了iframe,相关的js和css都在frame内部,故不存在穿越后缺少js或者css问题。
这也引出了我自己的需求,希望在显示穿越对话框并且元素为frame时,init事件能被顺利加载。
上面的初步解决,虽然达到了目的,但是如果每个调用的地方都这么写,会不会有点郁闷。所以我改写了iframeTools.js文件下的through方法,做了这样一个判断,请看:
artDialog.through = _proxyDialog = function () {
var config = arguments[0];
//检测元素是否是frame,如果是,init的执行时机则必须保证在iframe加载完毕后,在chrome模式下,弹出frame元素会导致frame重新加载
if (config.init && config.content.tagName && config.content.tagName == 'IFRAME' && webkit) {
var tmpfn = config.init;
arguments[0].init = function () {
var thisFrame = _top.frames[config.content.name];
thisFrame.onload = thisFrame.onreadystatechange = function () {
if (this.readyState && this.readyState != 'complete') return;
thisFrame.onload = _top.frames[config.content.name].onreadystatechange = null;
tmpfn();
};
}
}
var api = _topDialog.apply(this, arguments);
// 缓存从当前 window(可能为iframe)调出所有跨框架对话框,
// 以便让当前 window 卸载前去关闭这些对话框。
// 因为iframe注销后也会从内存中删除其创建的对象,这样可以防止回调函数报错
if (_top !== window) artDialog.list[api.config.id] = api;
return api;
};
代码增加了一个判断,如果through时定义了init,content是frame,并在webkit核心浏览器下,将init方法套一层监听frame加载。
最后一点疑惑,为什么artDialog弹出frame元素时,在chrome下会重新加载一次。希望使用artDialog的朋友告知一下,谢谢!
最新文章
- js Ajax跨域调用JSON并赋值全局变量
- java 反射获取类的属性 类型 名称和值
- FastDFS.Client操作文件服务器
- MVC - Action和ActionResult
- 二叉查找树 C++实现(含完整代码)
- nginx反向代理、优化
- 你不知道的 Javascript
- HTTP BIN测试
- DOM操作和样式操作库的封装
- maven(03)
- Neutron:ML2 Core Plugin
- Postgresql - jsonb_pretty &; dateStyle
- Ajax传参讲解
- [UE4]图片按钮设置技巧
- 解决linux下安装nodejs后npm未成功安装的问题
- iOS 图标
- WPF 改变Datagrid的选中行的颜色
- PyQt5教程——布局管理(4)
- jquery的委托处理
- Django settings.py 的media路径设置
热门文章
- 12 new方法和单例、定制访问函数、装饰器
- Makefile (2) gdb
- 裸机——Nand
- POJ 3484 二分
- 笔记-python-built-in functions-eval,exec,compile
- 《Cracking the Coding Interview》——第1章:数组和字符串——题目2
- win 7 查看端口被占用
- eclipse importing maven projects 卡顿
- HDU 4027 Can you answer these queries(线段树 + 观察 )
- 用Linkedhashmap的LRU特性及SoftReference软引用构建二级缓存