artDialog组件与iframe

8/10/2015来源:ASP.NET技巧人气:2412

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的朋友告知一下,谢谢!

测试代码