组件官网。 未用过的朋友可以先了解下。
当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的朋友告知一下,谢谢!
测试代码
新闻热点
疑难解答