layer.open打不开弹窗的问题

我的项目页面是复合结构的，使用layui-iframe版的框架，最外面的页面保持不变，然后里面可以打开多个tap。

然后在子iframe里面，调用top.layer.open可以打开一个弹窗，但是当我直接用新的页面打开iframe，调用top.layer.open却不生效。实际上对实际的项目来说影响不大，因为用户都是打开主页，然后用tab的形式打开iframe，不会有这个问题，但是却让我这个强迫症十分不爽。这个问题存在好久了，然后今天终于忍不住死磕了三个小时终于找到原因了，甚至影响了我的任务，不过终于解决这个问题后气顺多了，哈哈。

直接上代码，顺便分享自己找源码的过程。这里不得不吐槽，js框架的代码全是这种单个字母的变量，十分难读，只能祭出debug大发。

在console页面，先选择环境，因为这里直接用页面打开iframe页面，所以这个top就是我的环境，如果有多个iframe就会有多个环境，例如

然后在console页面输入layer.open

直接点击这个方法就能调到source里面。

如果是这种压缩版没有回车排版的min.js文件可以点击source里面的格式化图标

layer.js里面，layer.open是在这里定义的。

    o.run = function(t) {i = t,n = i(e),l.html = i("html"),r.open = function(e) {var t = new s(e);return t.index}}

debug大法示意图

    s = function(e) {var t = this;t.index = ++r.index,t.config = i.extend({}, t.config, o.config, e),document.body ? t.creat() : setTimeout(function() {t.creat()}, 30)};

使用debug大法找到s方法，然后可以看出关键是t.creat方法

把鼠标移到方法上点击，就可以移到指定位置

 s.pt.creat = function() {var e = this, t = e.config, a = e.index, s = t.content, f = "object" == typeof s, c = i("body");if (!t.id || !i("#" + t.id)[0]) {switch ("string" == typeof t.area && (t.area = "auto" === t.area ? ["", ""] : [t.area, ""]),t.shift && (t.anim = t.shift),6 == r.ie && (t.fixed = !1),t.type) {case 0:t.btn = "btn"in t ? t.btn : o.btn[0],r.closeAll("dialog");break;case 2:var s = t.content = f ? t.content : [t.content || "http://layer.layui.com", "auto"];t.content = '<iframe scrolling="' + (t.content[1] || "auto") + '" allowtransparency="true" id="' + l[4] + a + '" name="' + l[4] + a + '" onload="this.className=\'\';" class="layui-layer-load" frameborder="0" src="' + t.content[0] + '"></iframe>';break;case 3:delete t.title,delete t.closeBtn,t.icon === -1 && 0 === t.icon,r.closeAll("loading");break;case 4:f || (t.content = [t.content, "body"]),t.follow = t.content[1],t.content = t.content[0] + '<i class="layui-layer-TipsG"></i>',delete t.title,t.tips = "object" == typeof t.tips ? t.tips : [t.tips, !0],t.tipsMore || r.closeAll("tips")}if (e.vessel(f, function(n, r, u) {c.append(n[0]),f ? function() {2 == t.type || 4 == t.type ? function() {i("body").append(n[1])}() : function() {s.parents("." + l[0])[0] || (s.data("display", s.css("display")).show().addClass("layui-layer-wrap").wrap(n[1]),i("#" + l[0] + a).find("." + l[5]).before(r))}()}() : c.append(n[1]),i(".layui-layer-move")[0] || c.append(o.moveElem = u),e.layero = i("#" + l[0] + a),t.scrollbar || l.html.css("overflow", "hidden").attr("layer-full", a)}).auto(a),i("#layui-layer-shade" + e.index).css({"background-color": t.shade[1] || "#000",opacity: t.shade[0] || t.shade}),2 == t.type && 6 == r.ie && e.layero.find("iframe").attr("src", s[0]),4 == t.type ? e.tips() : e.offset(),t.fixed && n.on("resize", function() {e.offset(),(/^\d+%$/.test(t.area[0]) || /^\d+%$/.test(t.area[1])) && e.auto(a),4 == t.type && e.tips()}),t.time <= 0 || setTimeout(function() {r.close(e.index)}, t.time),e.move().callback(),l.anim[t.anim]) {var u = "layer-anim " + l.anim[t.anim];e.layero.addClass(u).one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend", function() {i(this).removeClass(u)})}t.isOutAnim && e.layero.data("isOutAnim", !0)}}

然后重点是这个if判断，如果该页面有这个id的元素，那么就不会生成弹窗，而我之前设置layer.open的弹窗id是和页面上的元素是重复的。那么为什么在主页面时就不会这样呢，因为我用的是top.layer.open,而在主页面使用时top指的就是主页面，而主页面并没有这个id的元素，所以可以弹窗了。

因此只要要让layer.open(option)里面的id不要和页面元素的id重复就行了，统一加上layer_前缀，避免重复就解决这个问题了

layer.open打不开弹窗的问题相关推荐

confirm关闭 layer_基于 vue+layer.js 超青睐的弹窗组件VueLayer
今天给大家分享一个功能强健高水准的web弹窗组件VueLayer. vue-layer 一款备受web开发者青睐的layer.js弹窗组件的vue.js版本.拥有丰富友好的操作体验及文档,兼容主流浏览 ...
parent.layer.open打开的页面向上个页面传值
平时遇到的传值问题,一般都是父子页面,父页面定义一个全局的方法,类似 functionName = function(){} 然后再子页面就可以通过parent来调用. window.parent.f ...
html5相对父元素定位,layer弹出层设置相对父级元素定位
layer弹出层默认是相对body固定定位的,可是项目中一般需要相对某个盒子相对定位,下面是个加载弹层例子: var loadIndex = layer.open({ type: 3, //3 表示加 ...
Layer 弹出层组件
Layer 弹出层组件一.Layer是什么? 用于实现网页中的各种弹出层交互, 如 Alert/Confirm/Message/Tips/Page/Iframe/Loading/Prompt/Tab ...
layui如何存在多个弹窗_layui常见弹窗使用方法
1:confim类型使用方法 layui.use('layer', function(){ layer.confirm('是否立即上传卷宗信息?', { btn: ['是','否'], time: 2 ...
top.layer.open()是什么东西
如有错误欢迎指正首先,top代表,调用的layer.open()打开的东西会显示在top层,也就是顶层. layer是什么,layer已成为国内最多人使用的web弹层组件. open()就是laye ...
ios 键盘弹出后马上收回_ios12键盘唤起后，收回键盘弹窗错位解决方案
问题最近React的一个H5移动端项目遇到个问题,在iOS12中发现:点开弹窗后,点击弹窗里的input输入框,唤起键盘后,弹窗被键盘顶到页面顶部.但是在收起键盘后,弹窗表面上看是回到原位了,但是却 ...
JavaScript学习笔记(九）(验证框架,layer弹出层)
JavaScript学习笔记(九) 一.jQuery Validate验证框架 1.引入相关插件路径 2. 修改一些规则 3. 自定义验证规则 4.异步验证整体代码二.layer弹出层 1.引入相 ...
js单例模式——创建弹窗
一.了解单例模式单例模式的定义:保证一个类仅有一个实例,并提供一个访问他的全局访问点单例模式的核心:是确保只有一个实例,并提供全局访问二.javascript中的单例模式在js中,我们经常会把 ...

layer.open打不开弹窗的问题

layer.open打不开弹窗的问题相关推荐

最新文章

热门文章