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之HTMLCollection接口代码
Apr 27 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
Mar 03 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
Apr 17 Javascript
深入浅析javascript立即执行函数
Oct 23 Javascript
jQuery检测滚动条是否到达底部
Dec 15 Javascript
Bootstrap输入框组件简单实现代码
Mar 06 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
随机生成10个不重复的0-100的数字(实例讲解)
Aug 16 Javascript
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
bootstrap下拉框动态赋值方法
Aug 10 Javascript
微信小程序单选框自定义赋值
May 26 Javascript
javascript使用正则表达式实现注册登入校验
Sep 23 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&amp;java(一)
2006/10/09 PHP
PHP生成HTML静态页面实例代码
2008/08/31 PHP
利用PHP+JS实现搜索自动提示(实例)
2013/06/09 PHP
适用于抽奖程序、随机广告的PHP概率算法实例
2014/04/09 PHP
PHP实现将科学计数法转换为原始数字字符串的方法
2014/12/16 PHP
PHP中Cookie的使用详解(简单易懂)
2017/04/28 PHP
Yii2.0实现生成二维码功能实例
2017/10/24 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
jquery实现图片上传之前预览的方法
2015/07/11 Javascript
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
基于JS实现EOS隐藏错误提示层代码
2016/04/25 Javascript
jQuery简单实现tab选项卡切换效果
2016/06/20 Javascript
JavaScript 身份证号有效验证详解及实例代码
2016/10/20 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
Vue 2.x教程之基础API
2017/03/06 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
vue v-for 使用问题整理小结
2019/08/04 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
vue解决跨域问题(推荐)
2020/11/10 Javascript
[02:32]DOTA2完美大师赛场馆静安体育中心观赛全攻略
2017/11/08 DOTA
详解如何使用Python编写vim插件
2017/11/28 Python
基于数据归一化以及Python实现方式
2018/07/11 Python
Python实现监控键盘鼠标操作示例【基于pyHook与pythoncom模块】
2018/09/04 Python
Python使用requests提交HTTP表单的方法
2018/12/26 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
使用Python+selenium实现第一个自动化测试脚本
2020/03/17 Python
七年级历史教学反思
2014/02/05 职场文书
暑假学习心得体会
2014/09/02 职场文书
汽车服务工程专业自荐信
2014/09/02 职场文书
2014年培训工作总结范文
2014/11/27 职场文书
学历证明范文
2015/06/16 职场文书
聘任通知书
2015/09/21 职场文书
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang