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

news2024/12/23 17:47:34

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.coloradmin.cn/o/440130.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

STM32入门指南:了解STM32

1. 初识 STM32 STM32&#xff0c;从字面上来理解&#xff0c;ST 是意法半导体&#xff0c;M 是 Microelectronics 的缩写&#xff0c;32 表示 32 位&#xff0c;合起来理解&#xff0c;STM32 就是指 ST 公司开发的 32 位微控制器。在如今的 32 位控制器当中&#xff0c;STM32 …

GitHub新建仓库 上传文档

Author:龙箬 Computer Application Technology Change the World with Data and Artificial Intelligence ! CSDNweixin_43975035 振&#xff0c;而飞破虚空 点击New repository 自定义仓库名称&#xff0c;并勾选 “Add a README file” 选项 复制Code链接 打开终端Git git cl…

夏驰和徐策带你从零开始学数据结构——哈希表

哈希表的概念&#xff1a; 哈希表是一种常用的数据结构&#xff0c;它可以在 O(1) 的时间复杂度内执行插入、查找和删除操作。哈希表的核心思想是使用哈希函数将键值对映射到数组中的一个位置上&#xff0c;从而实现快速的访问和修改。 哈希表由两个主要部分组成&#xff1a;…

Android开发—入门Kotlin编程语言

一、Kotlin简介 为什么Kotlin能代替Java此为Android官方第一支持的开发语言&#xff1f; 1&#xff09;Kotlin的语法更加简洁&#xff0c;对于同样的功能&#xff0c;使用Ktolin开发的代码量可能会比使用Java开发减少50%甚至更多&#xff1b; 2&#xff09;Kotlin语法更加高…

【Linux】文件IO---应用开发角度

目录简述 目录 前言&#xff1a; 一、Linux的文件 二、Linux文件系统目录结构 三、文件访问的方式 &#xff08;1&#xff09;通用方式&#xff1a;open/read/write/lseek/close 示例&#xff1a; &#xff08;2&#xff09;非通用函数&#xff1a;ioctl/mmap 示例&am…

使用ChatGPT+MindShow一键生成PPT,以后再也不用担心制作PPT啦

&#x1f4cb; 个人简介 &#x1f496; 作者简介&#xff1a;大家好&#xff0c;我是阿牛&#xff0c;全栈领域优质创作者。&#x1f61c;&#x1f4dd; 个人主页&#xff1a;馆主阿牛&#x1f525;&#x1f389; 支持我&#xff1a;点赞&#x1f44d;收藏⭐️留言&#x1f4d…

深度学习及使用全连接神经网络实现手写数字识别案例开发

1.什么是深度学习和机器学习有什么区别&#xff1f;是什么原因使得部分问题机器学习无法解决需要深入研究深度学习&#xff1f; 人工智能、机器学习、深度学习的区别是什么&#xff1f;_哔哩哔哩_bilibili 深度学习是一种机器学习方法&#xff0c;它通过构建多层神经网络来实…

tmall.product.template.get( 产品接口 )

&#xffe5;免费必须用户授权 产品模板获取接口&#xff0c;对于非关键属性的类目&#xff0c;发布达尔文(监管)产品时&#xff0c;必须先根据类目获取产品模板。 产品模板定义产品发布需要的类目属性&#xff0c;包括&#xff1a; 关键属性:关键属性可以在类目上不存在。不…

spring的应用 xml配置实现定时任务

定时任务的实现&#xff1a; 通过xml实现&#xff1a; 创建qiuckstart的maven文件 把依赖配置改改 jdk1.8 以及12 再删掉一些不必要的配置 引入spring依赖坐标 和java同一个目录下创建resources 作为 资源根 结构如图&#xff1a; spring.xml配置&#xff1a; 从官网复制…

《JavaEE》网络中的基本概念

&#x1f451;作者主页&#xff1a;Java冰激凌 &#x1f4d6;专栏链接&#xff1a;JavaEE 局域网/广域网 在我们的生活中 经常会使用到网络 对于网络 我们现在已经变得与生活息息相关 甚至可以说为密不可分 而在我们的网络中 我们的网络是分为局域网与广域网 我们的局域网和广域…

【8086汇编】环境搭建 - 学习笔记:WIN10下安装配置 MASMPlus + DOSBox

【8086汇编】环境搭建 - 学习笔记&#xff1a;WIN10下安装配置 MASMPlus DOSBox 一、MASMPlus 1.2下载安装 二、DOSBox 0.74-3下载安装配置自动挂载C盘添加环境变量 三、masm v5.0四、ml.exe v6.11参考资料 一、MASMPlus 1.2 下载 脚本之家&#xff1a;MASMPlus(汇编开发环境…

【深度学习】第六阶段

1、超参数调试 在深度学习中&#xff0c;有各种各样的超参数&#xff0c;其中包括&#xff1a;学习率 α \alpha α、动量超参数 β \beta β、Adam中的超参数 β 1 \beta_1 β1​、 β 2 \beta_2 β2​和 ε \varepsilon ε、神经网络层数、每层的结点数量、 小样本数据集大小…

mlq color transfer: Color Transfer Using Probabilistic Moving Least Squares

文章目录 Color Transfer Using Probabilistic Moving Least Squares1. 颜色转换2. 如何计算匹配点的概率3. 核心思想和具体操作&#xff1a;4. 特征点覆盖不到的颜色4.1这里介绍一下引文7&#xff1a;4.2. 分析 5. Probabilistic Moving Least Squares with Spatial Constrain…

智能学习 | MATLAB实现ANT-BP多变量时间序列预测(蚁群算法优化BP神经网络)

智能学习 | MATLAB实现ANT-BP多变量时间序列预测(蚁群算法优化BP神经网络) 目录 智能学习 | MATLAB实现ANT-BP多变量时间序列预测(蚁群算法优化BP神经网络)预测效果基本介绍程序设计参考资料预测效果 基本介绍 MATLAB实现ANT-BP多变量时间序列预测(蚁群算法优化BP神经网络…

如何通过Bug跟踪管理,有效减少软件缺陷Bug?

1、Bug生命周期 Bug的生命周期是指从Bug被发现到被关闭的过程。一般的缺陷状态是&#xff1a;新建--指派--已解决--待验--关闭。如果待验的Bug没有解决&#xff0c;我们需要重新激活--指派--已解决&#xff0c;循环这个过程&#xff0c;中间还包括拒绝、延期等。 Bug跟踪管理 减…

设计模式:创建者模式 - 代理模式

文章目录 1.概述2.结构3.静态代理4.JDK动态代理5.CGLIB动态代理6.三种代理的对比7.优缺点8.使用场景 1.概述 由于某些原因需要给某对象提供一个代理以控制对该对象的访问。这时&#xff0c;访问对象不适合或者不能直接引用目标对象&#xff0c;代理对象作为访问对象和目标对象…

VUE3 学习笔记(八)引入 EasyUI for Vue

目录 一、什么是 EasyUI? 二、安装EasyUI for Vue3 1. 使用NPM安装 2. 导入EasyUI 三、安装完成出现问题解决 一、什么是 EasyUI? easyui是一个基于jQuery、Angular、Vue和React的用户界面组件的集合。easyui为构建现代的、交互式的、javascript应用程序提供了基本功能…

【历史上的今天】4 月 20 日:中国接入国际互联网;戴尔登顶 PC 市场;计算机先驱诞生日

整理 | 王启隆 透过「历史上的今天」&#xff0c;从过去看未来&#xff0c;从现在亦可以改变未来。 今天是 2023 年 4 月 20 日&#xff0c;在 2005 年的今天&#xff0c;CNET 网络公司宣布以 1100 万美元现金收购 PCHome 公司。根据当时的协议&#xff0c;PCHome 创始人将保留…

ManageEngine AD360:简化AD管理过程,提高组织安全性

Active Directory&#xff08;AD&#xff09;是微软提供的一种广泛使用的域管理工具&#xff0c;可以用于组织内部用户、计算机和其他资源的管理。尽管AD是一个强大的工具&#xff0c;但是它的管理不总是容易的&#xff0c;尤其是当需要处理大量的用户和计算机时&#xff0c;会…

linux下hive远程数据库模式安装

文章目录 前言1.安装mysql1&#xff09;使用yum安装2) 安装好启动服务3) 开启开机自动启动4) 修改权限4) 登录 2.Hive安装 Local/Embedded Metastore Database (Derby)1) 下载稳定版本解压即可2&#xff09;配置环境变量3) 配置远程连接mysql数据库4&#xff09;需要将mysql驱动…