Layer组件多个iframe弹出层打开与关闭及参数传递的方法


Posted in Javascript onSeptember 25, 2019

一、Layer简介

Layer是一款近年来备受青睐的web弹层组件,基于jquery,易用、实用,兼容包括IE6在内的所有主流浏览器,拥有丰富强大的可自定义的功能。

Layer官网地址:http://layer.layui.com/

Layer组件多个iframe弹出层打开与关闭及参数传递的方法

二、多个iframe弹出层(非嵌套)

Layer组件多个iframe弹出层打开与关闭及参数传递的方法

1.打开iframe弹出层js代码

(1)示例一:

layer.open({
type: 2,
 
title: 'layer mobile页',
 
shadeClose: true,
 
shade: 0.8,
 
area: ['380px', '90%'],
 
content: 'mobile/' //iframe的url
 
});

content参数可传入要打开的页面,type参数传2,即可打开iframe类型的弹层

(2)示例二:

layer.open({
 type: 2,
 title: false,
 closeBtn: 0, //不显示关闭按钮
 shade: [0],
 area: ['340px', '215px'],
 offset: 'rb', //右下角弹出
 time: 2000, //2秒后自动关闭
 anim: 2,
 content: ['test/guodu.html', 'no'], //iframe的url,no代表不显示滚动条
 end: function(){ //此处用于演示
 layer.open({
  type: 2,
  title: '很多时候,我们想最大化看,比如像这个页面。',
  shadeClose: true,
  shade: false,
  maxmin: true, //开启最大化最小化按钮
  area: ['893px', '600px'],
  content: '//fly.layui.com/'
 });
 }
});

(3)示例三:在弹出层A中打开新弹出层B,与弹出层A同一DOM层级

可根据项目需求,简单封装弹出层打开方法,如下:

//在弹出层A(子页面1)打开新弹出层B(子页面2),弹出层A、B在同一DOM层级,即父页面内有多个iframe,子页面2不嵌套在子页面1中;<br>//在弹出层A(子页面1)中封装如下方法,在需要触发打开新弹出层B事件中执行如下方法;
function openLayerUrl(url, width, height) {
    parent.layer.open({
    type: 2,
    title: false,
    closeBtn: false,
    shadeClose: false,
    shade: 0.6,
    border: [0],
    area: [width <= 0 ? "auto" : width + 'px', height <= 0 ? "auto" : height + 'px'],
    content: url,
   })
  }

2.关闭iframe弹出层js代码

(1)关闭特定iframe

//当在iframe页面关闭自身时,在iframe页执行以下js脚本
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭

(2)关闭所有弹出层

如果没有弹层叠加等复杂逻辑,可根据需要关闭所有弹出层

layer.closeAll(); //疯狂模式,关闭所有层
layer.closeAll('dialog'); //关闭信息框
layer.closeAll('page'); //关闭所有页面层
layer.closeAll('iframe'); //关闭所有的iframe层
layer.closeAll('loading'); //关闭加载层
layer.closeAll('tips'); //关闭所有的tips层

3.刷新另一个弹出层

(1)刷新已知index的iframe弹层

layer.iframeSrc(index, 'http://sentsin.com') //官方示例,其中参数index为iframe索引,第二个参数为iframe的URL,暂未使用过

(2)刷新未知index的iframe弹层

parent.$("iframe").each(function () {
        $(this).attr('src', $(this).attr('src'));//需要引用jquery
})

如果刷新所有iframe不影响,则可以重置所有iframe。在弹层A关闭后,需要刷新弹层B,在弹层A执行以上脚本后关闭当前弹层A;

4.iframe弹出层参数传递

(1)父页面传参到iframe弹出层

var collectionId = parent.$("#hideCollectionId").val();//可在父页面定义隐藏域,id为hideCollectionId,需要引用jquery

(2)iframe弹出层A传参到iframe弹出层B

比如在弹出层A按钮打开另一个弹出层B,可在layer.open()函数content参数配置中,以URL形式传参即可,(content:'http://www.baidu.com?id='+100)

<a href="javascript:void(0);" rel="external nofollow" class="a1" <br>οnclick="openLayerUrl('@domainTeamUrl/Notice/Update?id='+ @Model.Id,876,575);closeLayer()">修改</a><br>//在ASP.Net MVC Razor视图中使用示例,openLayerUrl()为本篇中介绍的打开Layer弹出层的封装方法,closeLayer()为封装的关闭layer弹出层的方法;

也可以考虑使用success(弹出后回调)、end(销毁后回调)、cancel(关闭回调)等参数配置中做其他工作;

三、多个iframe弹出层(嵌套)

1.弹出层打开与关闭

如果使用嵌套的iframe也是可以的,如iframe弹出层B(子页面2)嵌套在iframe弹出层A(子页面1)中,iframe弹出层A嵌套在父页面中,

在父页面打开弹出层A,父页面脚本用layer.open();

在弹出层A打开弹出层B,子页面2脚本用layer.open();

在弹出层B中关闭弹出层A和B,弹出层B用脚本parent.parent.closeAll();

2.弹出层传参

jquery取得父页面元素:

parent.parent.$("#hideCollectionId").val();//取得父页面之父页面的非动态生成的元素
$("#hideCollectionId",parent.parent.document).val();//取得父页面之父页面的动态生成的元素

附:jquery父页面与子页面如何互相访问元素与方法

(1)jquery在父窗口中获取iframe中的元素

Jquery代码 父窗口中获取iframe中的非动态生成元素

格式:$("#iframe的ID").contents().find("#iframe中的控件ID").click();//jquery 方法1

实例:$("#ifm").contents().find("#btnOk").click();//jquery 方法1

Jquery代码 父窗口中获取iframe中的动态生成元素

格式:$("#iframe中的控件ID",document.frames("frame的name").document).click();//jquery 方法2

实例:$("#btnOk",document.frames("ifm").document).click();//jquery 方法2

(2) jquery在iframe中获取父窗口的元素

格式:$('#父窗口中的元素ID', parent.document).click();

实例:$('#btnOk', parent.document).click();

四、不显示iframe中的滚动条

Layer组件多个iframe弹出层打开与关闭及参数传递的方法

有时候不想让iframe弹层出现滚动条,则可以在content参数中传入一个字符串数组

layer.open({
 type: 2,
 content: 'http://sentsin.com' //这里content是一个URL,如果你不想让iframe出现滚动条,你还可以content: ['http://sentsin.com', 'no']
});

更多使用技巧,请移步官网阅读弹层组件开发文档

结语

本篇介绍了Layer弹出层组件在多个弹出层场景使用及传参方法,包括非嵌套弹出层和嵌套弹出层打开与关闭方法。希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js change,propertychange,input事件小议
Dec 20 Javascript
javascript中attribute和property的区别详解
Jun 05 Javascript
微信分享的标题、缩略图、连接及描述设置方法
Oct 14 Javascript
JS控制表格实现一条光线流动分割行的方法
Mar 09 Javascript
深入理解JavaScript编程中的同步与异步机制
Jun 24 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
Mar 28 Javascript
jquery事件绑定解绑机制源码解析
Sep 19 Javascript
文件上传,iframe跨域数据提交的实现
Nov 18 Javascript
EasyUI在Panel上动态添加LinkButton按钮
Aug 11 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
Jan 19 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
Apr 25 Javascript
Nuxt.js nuxt-link与router-link的区别说明
Nov 06 Javascript
layer 关闭指定弹出层的例子
Sep 25 #Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
Sep 25 #Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
Sep 25 #Javascript
Vue 实现一个命令式弹窗组件功能
Sep 25 #Javascript
layui prompt 设置允许空白提交的方法
Sep 24 #Javascript
微信小程序制作扭蛋机代码实例
Sep 24 #Javascript
layer.prompt输入层的例子
Sep 24 #Javascript
You might like
优化php效率,提高php性能的一些方法
2011/03/24 PHP
PHP请求Socket接口测试实例
2016/08/12 PHP
php自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
JS实现标签页效果(配合css)
2013/04/03 Javascript
JavaScript闭包实例讲解
2014/04/22 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
2018/09/27 Javascript
基于Vue SEO的四种方案(小结)
2019/07/01 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
2019/07/10 Javascript
layui table复选框禁止某几条勾选的实例
2019/09/20 Javascript
JS实现拖拽元素时与另一元素碰撞检测
2020/08/27 Javascript
[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7
2014/06/25 DOTA
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
3分钟学会一个Python小技巧
2018/11/23 Python
python最小生成树kruskal与prim算法详解
2019/01/17 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
大家都说好用的Python命令行库click的使用
2019/11/07 Python
Python 窗体(tkinter)下拉列表框(Combobox)实例
2020/03/04 Python
django xadmin action兼容自定义model权限教程
2020/03/30 Python
html5自动播放mov格式视频的实例代码
2020/01/14 HTML / CSS
Html5跳转到APP指定页面的实现
2020/01/14 HTML / CSS
《再别康桥》教学反思
2014/02/12 职场文书
遗嘱公证书标准样本
2014/04/08 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
2014年保卫工作总结
2014/12/05 职场文书
自荐信格式模板
2015/03/27 职场文书
土木工程毕业答辩开场白
2015/05/29 职场文书
开场白怎么写
2015/06/01 职场文书
陶瓷类经典广告语集锦
2019/10/25 职场文书
JavaScript声明变量和数据类型的转换
2022/04/12 Javascript