iframe+Layer+闭包下window对象传递的实例

来源：互联网发布：沈阳网络代运营编辑：程序博客网时间：2024/05/16 09:21

目的：在iframe布局模式下，layer的弹窗只能弹出当前调用方法所在页面的上层，多重iframe嵌套时，子层的layer弹框会被覆盖

核心：

子父层js的方法通过window对像传递

layer的多重ifrmae嵌套的最外层弹窗实现方法

参数传递过程中推荐以json形式封装后再进行传递更佳<方法使用者无需在方法中追加过多参数，便于阅读和使用>

1.子层

    var option = {                path        :   '${contextPath}/js/lib/layer',                type        :   2,                title       :   '',                fix         :   false,                shadeClose  :   true,                scrollbar   :   false,                maxmin      :   false,                areaW       :   '900px',                areaH       :   '950px',                content     :   contextPath+'/html/activiti/act-xj-detail.html?proId='+procIdTaskCHeck                      };    window.top.openLayerWin(option);

2.父层

引入layer.js
父层弹框通用方法

    /**     * 所有工作流、维修过程等Layer弹框在下 部分被覆盖问题     * 定义父层的layer弹框 可复用的全局方法     * @url layer 需要打开的页面路径     * @option layer 可配置参数     *  > path  : '${contextPath}/js/lib/layer'     *  > type     *  > title     *  > shadeClose     *  > scrollbar     *  > areaW     *  > areaH     *  > content     *  > success     *  > end     */    window.openLayerWin = function(option,success,end){        /**         * 模块化引用layer         * 主页面需在当前js前引入layer.js         */        layer.config({            path : option.path        });         layer.open({            type        : option.type       == undefined ?  2       :   option.type,            title       : option.title      == undefined ?  ''      :   option.title,            fix         : option.fix        == undefined ?  false   :   option.fix,            shadeClose  : option.shadeClose == undefined ?  true    :   option.shadeClose,            scrollbar   : option.scrollbar  == undefined ?  false   :   option.scrollbar,            maxmin      : option.maxmin     == undefined ?  false   :   option.maxmin,            area        : [ option.areaW    , option.areaH ],            content     : option.content    == undefined ?  ''      :   option.content,             success     : success           == undefined ? (function(layero,index){})   :  (function(layero,index){success();})  ,            end         : end               == undefined ? (function(){})               :   (function(){end();}),                               });    }

3.父层的js闭包的封装方式下，需将window对象传入子层的js中

父层

;(function(window, $){    ····    window.openLayerWin = function(option,success,end){        ····    }   })(window,jQuery);

子层

;(function(window,$){    ····    /**     * 查看详情弹框处理：     */    function openReviewWindow(procIdTaskCHeck) {        var option = {                path        :   '${contextPath}/js/lib/layer',                type        :   2,                title       :   '',                fix         :   false,                shadeClose  :   true,                scrollbar   :   false,                maxmin      :   false,                areaW       :   '900px',                areaH       :   '950px',                content     :   contextPath+'/html/activiti/act-xj-detail.html?proId='+procIdTaskCHeck                      };        window.top.openLayerWin(option);    }    ····})(window,jQuery);

4.若是父层js没有使用闭包的形式进行封装，不需要进行window的对象传递

1 0