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 相关文章推荐
超级退弹代码
Jul 07 Javascript
js中查找最近的共有祖先元素的实现代码
Dec 30 Javascript
jquery学习笔记 用jquery实现无刷新登录
Aug 08 Javascript
JavaScript解析URL参数示例代码
Aug 12 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
Apr 06 Javascript
Javascript实现Array和String互转换的方法
Dec 21 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
Dec 12 Javascript
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
详解node.js的http模块实例演示
Jul 12 Javascript
vue简单练习 桌面时钟的实现代码实例
Sep 19 Javascript
vue实现手机端省市区区域选择
Sep 27 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
Sep 01 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 set_time_limit(0)长连接的实现分析
2010/03/02 PHP
PHP array_multisort() 函数的深入解析
2013/06/20 PHP
解析argc argv在php中的应用
2013/06/24 PHP
JS中style属性
2006/10/11 Javascript
jquery 弹出层注册页面等(asp.net后台)
2010/06/17 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
2012/08/24 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
探讨javascript是不是面向对象的语言
2013/11/21 Javascript
js 通用订单代码
2013/12/23 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
JS DOM实现鼠标滑动图片效果
2020/09/17 Javascript
jQuery判断checkbox选中状态
2016/05/12 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
jquery-mobile表单的创建方法详解
2016/11/23 Javascript
详解微信小程序Page中data数据操作和函数调用
2017/09/27 Javascript
vue注册组件的几种方式总结
2018/03/08 Javascript
jQuery HTML设置内容和属性操作实例分析
2020/05/20 jQuery
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
[04:04]DOTA2亚洲邀请赛比赛场馆&酒店全攻略
2017/03/23 DOTA
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
python使用phoenixdb操作hbase的方法示例
2019/02/28 Python
Python整数对象实现原理详解
2019/07/01 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
电子商务专业学生的学习自我评价
2013/10/27 职场文书
房屋改造计划书
2014/01/10 职场文书
校园活动策划书范文
2014/01/10 职场文书
运动会邀请函范文
2014/02/06 职场文书
新员工试用期自我鉴定
2014/04/17 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
国际政治学专业推荐信
2014/09/26 职场文书
劳资员岗位职责
2015/02/13 职场文书
2015年村党支部工作总结
2015/04/30 职场文书
学校工会工作总结2015
2015/05/19 职场文书
国博复兴之路观后感
2015/06/02 职场文书
《钢铁是怎样炼成的》高中读后感
2019/08/07 职场文书