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

测试代码

 

　　

转载于:https://www.cnblogs.com/codealone/p/3540086.html