当前位置: 首页 > news >正文

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

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

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

在这里插入图片描述
1.打开iframe弹出层js代码
(1)示例一:
content参数可传入要打开的页面,type参数传2,即可打开iframe类型的弹层

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

(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);" class="a1" <br>onclick="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();//取得父页面之父页面的动态生成的元素

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

Jquery代码 父窗口中获取iframe中的非动态生成元素
格式:KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲iframe的ID").con…(“#ifm”).contents().find(“#btnOk”).click();//jquery 方法1
Jquery代码 父窗口中获取iframe中的动态生成元素
格式:KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲iframe中的控件ID",d…(“#btnOk”,document.frames(“ifm”).document).click();//jquery 方法2

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

格式:KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲父窗口中的元素ID', par…(‘#btnOk’, parent.document).click();

四、不显示iframe中的滚动条

在这里插入图片描述

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

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

相关文章:

  • BearPi环境搭建及基本使用
  • 算法笔记-换根DP
  • LeetCode 785. Is Graph Bipartite【DFS,二分图】中等
  • 【微信小程序】-- 分包 - 独立分包 分包预下载(四十五)
  • 2.3 连续性随机变量
  • 【DES详解】(一)处理input block(64 bits)
  • redis笔记——三种特殊的数据结构
  • 网络安全之编码加密算法
  • mp4视频无法播放的解决方法
  • 搭建Mysql
  • 气传导和骨传导耳机哪个好?简单科普这两种蓝牙耳机
  • 浅尝GoWeb开发之Gin框架
  • 工程行业管理系统-专业的工程管理软件-提供一站式服务
  • 目标检测YOLO系列-YOLOV7运行步骤(推理、训练全过程)
  • Spring Boot + Spring Security基础入门教程
  • MySQL数据库,表的增删改查详细讲解
  • SpringCloud-Gateway实现网关
  • Redis 如何配置读写分离架构(主从复制)?
  • 代码随想录二刷day05 | 哈希表之242.有效的字母异位词 349. 两个数组的交集 202. 快乐数 1. 两数之和
  • 2023年4月广东省计算机软考中/高级备考班招生简章
  • 在Github中77k星的王炸AutoGPT,会独立思考,直接释放双手
  • FVM链的Themis Pro,5日ido超百万美元
  • OpenCV实战——尺度不变特征检测器
  • 如何快速建立一个podman环境
  • 计算机视觉:人工智能领域当下火热的计算机视觉技术综述
  • EMC 专用名词大全~骚扰波形
  • 14:24面试,14:32就出来了 ,问的实在是太...
  • 高频算法题
  • AI工程师眼中的未来 | 年轻人如何求职选方向
  • 能自动翻译的软件-最精准的翻译软件