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图片切换效果实现代码
Sep 24 Javascript
jQuery实现跨域iframe接口方法调用
Mar 14 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
Apr 28 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
Jun 12 Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
Jan 04 Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
详解JS中的this、apply、call、bind(经典面试题)
Sep 19 Javascript
浅谈vux之x-input使用以及源码解读
Nov 04 Javascript
一个小时快速搭建微信小程序的方法步骤
Apr 15 Javascript
详解微信小程序自定义组件的实现及数据交互
Jul 22 Javascript
javascript实现前端分页功能
Nov 26 Javascript
Vuex实现简单购物车
Jan 10 Vue.js
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
VFP与其他应用程序的集成
2006/10/09 PHP
PHP 字符截取 解决中文的截取问题,不用mb系列
2009/09/29 PHP
php中分页及SqlHelper类用法实例
2017/01/12 PHP
js时间戳转为日期格式的方法
2015/12/28 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
JS给swf传参数的实现方法
2016/09/13 Javascript
javascript汉字拼音互转的简单实例
2016/10/09 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
extjs简介_动力节点Java学院整理
2017/07/17 Javascript
详解基于vue-cli配置移动端自适应
2018/01/13 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
2018/03/05 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
2019/02/21 Javascript
了解重排与重绘
2019/05/29 Javascript
Vue对象赋值视图不更新问题及解决方法
2019/06/03 Javascript
Vue-cli3多页面配置详解
2020/03/22 Javascript
Vue封装Axios请求和拦截器的步骤
2020/09/16 Javascript
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
Python字符串切片操作知识详解
2016/03/28 Python
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
python用模块zlib压缩与解压字符串和文件的方法
2016/12/16 Python
Python中顺序表的实现简单代码分享
2018/01/09 Python
Python批处理删除和重命名文件夹的实例
2018/07/11 Python
python中pika模块问题的深入探究
2018/10/13 Python
Python基础之条件控制操作示例【if语句】
2019/03/23 Python
200行python代码实现2048游戏
2019/07/17 Python
Flask框架模板渲染操作简单示例
2019/07/31 Python
python requests包的request()函数中的参数-params和data的区别介绍
2020/05/05 Python
PyCharm常用配置和常用插件(小结)
2021/02/06 Python
基于CSS3特效之动画:animation的应用
2013/05/09 HTML / CSS
美国受信赖的教育产品供应商:Nest Learning
2018/06/14 全球购物
如何判断计算机可能已经中马
2013/03/22 面试题
房屋公证委托书
2014/04/03 职场文书
个人诉讼委托书范本
2014/10/17 职场文书
2015年大班保育员工作总结
2015/05/18 职场文书
2019年入党思想汇报
2019/03/25 职场文书
vue组件vue-esign实现电子签名
2022/04/21 Vue.js