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 相关文章推荐
javascript获取元素偏移量的方法有哪些
Jun 24 Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
Feb 26 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
Sep 16 Javascript
javascript 中的 delete及delete运算符
Nov 15 Javascript
React Native实现简单的登录功能(推荐)
Sep 19 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
Feb 12 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
Sep 22 Javascript
谈谈React中的Render Props模式
Dec 06 Javascript
React 实现拖拽功能的示例代码
Jan 06 Javascript
微信小程序实现授权登录
May 15 Javascript
jquery实现动态创建form并提交的方法示例
May 27 jQuery
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下对字符串的递增运算代码
2010/08/21 PHP
一个实用的php验证码类
2017/07/06 PHP
JavaScript中“+=”的应用
2007/02/02 Javascript
基于jquery的返回顶部效果(兼容IE6)
2011/01/17 Javascript
jQuery Ajax提交表单查询获得数据实例代码
2012/09/19 Javascript
JS冒泡事件的快速解决方法
2013/12/16 Javascript
js检测浏览器版本、核心、是否移动端示例
2014/04/24 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
2015/12/16 Javascript
jquery表单验证插件formValidator使用方法
2016/04/01 Javascript
Bootstrap carousel轮转图的使用实例详解
2016/05/17 Javascript
浅谈jQuery效果函数
2016/09/16 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
javascript入门之string对象【新手必看】
2016/11/22 Javascript
Vue学习笔记进阶篇之函数化组件解析
2017/07/21 Javascript
jQuery plugin animsition使用小结
2017/09/14 jQuery
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
基于JavaScript实现每日签到打卡轨迹功能
2018/11/29 Javascript
手动实现vue2.0的双向数据绑定原理详解
2021/02/06 Vue.js
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
python并发2之使用asyncio处理并发
2017/12/21 Python
windows环境下tensorflow安装过程详解
2018/03/30 Python
python爬取微信公众号文章的方法
2019/02/26 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
打包python 加icon 去掉cmd黑窗口方法
2019/06/24 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
python 使用事件对象asyncio.Event来同步协程的操作
2020/05/04 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
Python如何输出百分比
2020/07/31 Python
介绍一下Python下range()函数的用法
2013/11/07 面试题
灵泰克Java笔试题
2016/01/09 面试题
大学本科毕业生的自我鉴定
2013/11/26 职场文书
优秀团支部申报材料
2014/12/26 职场文书
美术教师个人总结
2015/02/06 职场文书
画展观后感
2015/06/17 职场文书
vue 自定义的组件绑定点击事件
2022/04/21 Vue.js