弹出层插件的编写-layer(跨iframe传值回调)

最新推荐文章于 2023-07-04 13:43:33 发布

原创

最新推荐文章于 2023-07-04 13:43:33 发布 · 1.7w 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍了如何编写一个弹出层插件-layer，重点关注跨iframe传值和回调函数的设计。作者指出传统通过parent访问父页面元素的方法违背了设计模式原则，并提出layer插件通过注册window对象并利用动态ID实现真正的回调。文章通过示例代码解释了layer插件的调用方式和iframe回调的实现机制，强调了插件的解耦与减少依赖的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

弹出层(layer)在往上有非常多，这里为什么我要把它的实现提出来，原因有以下2点：

1、写这篇文章也算是我博客的一个开端，他们都说：“不写博客成不了大神” - -

2、我见过的弹出层中都基本没有处理跨iframe传值回调，或者说不是真正意义上的回调函数。

3、一个layer 10K左右就可以完成的功能，非得引用一个jquery EasyUI、jquery 等等的方式，都是我不能接受的。

一个独立的插件应该尽量减少依赖，这也是设计模式中追求的解耦与减少依赖。(layer去依赖某种库或多个库，不是一个很好的选择。)

先说说调用方式：插件做出来是让人使用的，我觉得从最终的展现形式入手，能让人更直观的了解这个插件是干嘛的。以及它的优点。

演示代码中我仅仅演示了Iframe弹出层的方式，主要就是看它的回调函数。其它方式，可以在源码中自己查看，稍后将放出源码。

调用方式Code：

<input type="button" onclick="iframe0()" value="iframe层，默认无底部" />

<textarea id="callBox" style="height:200px"></textarea>

    function iframe0() {
        layer.win("回调函数的演示", "callback.htm", function (data) {
            document.getElementById("callBox").value += data + "\r\n";
        })
    }

上面代码是在index.html页面中的代码，这种场景很多，（比如：订单页面里，需要选择部门的数据，往往会把部门的数据做成一个单独的页面，通过弹出层调用之后选择，然后返回对应的数据）

layer.win是弹出iframe的方式，参数1为弹出层的标题(这个参数其实非常灵活)，参数2一看就是一个页面的url，这里设置为callback.html。参数3：这个参数很关键了。它是一个真正意义上的回调函数，也就是当callback.html选择数据返回之后执行的代码。文字比较抽象，还是看代码。