获取iframe弹出层window对象

弹出层插件的编写-layer(跨iframe传值回调) 弹出层(layer)在往上有非常多,这里为什么我要把它的实现提出来,原因有以下2点: 1、写这篇文章也算是我博客的一个开端,他们都说:“不写博客成不了大神” - - 2、我见过的弹出层中都基本没有处理跨iframe传值回调,或者说不是真正意义上的回调函数。 3、一个layer 10K左右就可以完成的功能,非得引用一个jquery EasyUI、jquery 等等的方式,都是我不能接受的。 阅读详情

前文回顾

问题:无法获取弹出层window对象里的内容_前端-优快云问答

解决办法:http://t.csdnimg.cn/peZz6

当时获取window对象的方式是:

layer.open({
            type: 1,
            title:"墓穴查询",
            content: '<iframe style="width: 1316px;height: 617px;" src="analysis_select.jsp" frameborder="0" class="layadmin-iframe"></iframe>',
            area: ['320px', '195px'], // 初始宽高
            maxmin: true,
            success: function(layero, index){
              layer.full(index); // 最大化  
              var iframeWindow = layero.find('iframe')[0];
              console.log(iframeWindow)                          //打印弹出层window
              console.log(iframeWindow.contentWindow)            //打印弹出层window的内容contentWindow
              console.log(iframeWindow.contentWindow.layui)      // 打印contentWindow里的layui
          //submit = layero.find('iframe').contents().find('#tomb_sub_box');
              //监听提交
          // iframeWindow.layui.form.on('submit(tomb_sub_box)', function(data){
           // layer.close(index); //关闭弹层      
          // }); 
            }
});
 

使用的解决办法是 settimeout(),缺点是不能确定具体的等待时间。

现在新的解决方式出炉了

首先,我忽略了最重要的一点:弹层的类型type

content 中定义的看似是 iframe,但真正决定它性质的还是 type 的值。参照我的另一篇文章:http://t.csdnimg.cn/iyxXy

type 值为2,才是 iframe 层!

然后是获取 window 对象:

var iframeWin =  window[layero.find('iframe')[0]['name']];

这种方式拿到的 window 对象是官方提供的方法,没有延迟无需添加 settimeout(),拿到 window 对象后就可以在父页面尽情操纵弹出层了。

使用 JavaScript 操纵 iframe 中的 window 对象 通过 JavaScript,我们可以操纵 iframe 中的 window 对象,从而实现对嵌入网页的控制和交互。现在,我们可以使用 iframeWindow 对象来执行与 iframe 中的网页交互的操作。除了修改文档内容,我们还可以通过 iframeWindow 对象执行其他操作,例如触发 iframe 中的事件、调用 iframe 中的函数等。在 JavaScript 中,我们可以通过获取 iframe 元素的引用来访问 iframe 中的 window 对象。 阅读详情

相关推荐

VSCODE编辑+EIDE插件调试+STM8_Debug插件调试+IAR_STM8工具链编译开发项目

1. 安装 在VS CODE安装EIDE、STM8-Debug插件 2. 使用 EIDE 创建一个 8/16 Bit MCU 项目 新建虚拟文件夹,把工程外部的文件添加进虚拟文件夹,实现工程和源文件之间的关系,而不用实际把源文件复制到工程目录下。 EIDE工程和源文件实现分开放置,EIDE(EIDE工程)、EWSTM8(IAR STM8工程)、Project(ST Visual Develop工程) 选择工具链 烧录工具选择 头文件包含目录 添加宏定义 3. 编译 4. 使用STM8

TrueLink的博客 5501

layui获取iframe

layui获取iframe父页面子页面(iframe) 父页面 $(document).on('click','.mapShow',function(){ var data = table.cache["demo"]; //layui table 表格的全部值 var location = $("#location").val(); layer.open({ type: 2,

weixin_45647612的博客 1789

【新手必看】挖漏洞流程指南,黑客手把手教你挖漏洞月入过万!收藏这篇就够了!(附学习笔记)

【新手必看】挖漏洞流程指南,黑客手把手教你挖漏洞月入过万!收藏这篇就够了!(附学习笔记)【新手必看】挖漏洞流程指南,黑客手把手教你挖漏洞月入过万!收藏这篇就够了!(附学习笔记)

weixin_57514792的博客 1105

iframe页面中获取window对象及上一级window对象

iframe页面中获取window对象及上一级window对象

qq_42931285的博客 5716

Jasper Report使用JSON数据源创建报表

最近在做一个项目小功能,表单结案要生成PDF报表。 起初,想用HTML模板(art-template模板引擎)编写,利用浏览器的打印功能保存成pdf文件下载。但是HTML编写好的模板,页码、页眉、页脚设置有坑,表单内容中的表格较多,表格不能设置跨页,导致跨页的表格内容与页眉重叠,没能解决这个问题。 于是,转战研究Jasper report生成报表,用更加专业的报表生成工具来做。刚开始,也是跌跌撞撞,遇到了很多问题,因为觉得没有退路了,必须要用这个搞出来,所以就硬着头皮去找各种资料。 主要使用的json

xiaogege2012的专栏 3321

光谱预处理最简单实现方法--基于OpenSA光谱分析库

系列文章目录 “光晰本质,谱见不同”,光谱作为物质的指纹,被广泛应用于成分分析中。伴随微型光谱仪/光谱成像仪的发展与普及,基于光谱的分析技术将不只停留于工业和实验室,即将走入生活,实现万物感知,见微知著。本系列文章致力于光谱分析技术的科普和应用。 文章目录系列文章目录前言一、数据来源二、代码解读2.1 读取数据2 .2 划分数据集2 .3 返回训练集和测试集并绘制光谱图片2.4 建立1-D CNN模型2.5 训练1-D CNN模型2.6 测试1-D CNN模型2.7 运行CNN模型,并用查看结果总结

Echo_Code的博客 7069

Layui 主窗口调用 iframe 弹出框模块,获取控件的相应值

在iframe中调用上层窗口的模块就简单很多。

weixin_38897313的博客 1065

计算机模拟爆破过程,基于LSDYNA岩石爆破模拟建模分析

原标题:基于LSDYNA岩石爆破模拟建模分析 Ls Dyna岩石爆破模拟仿真作者:dyna_focus擅长领域:dyna/abaqus/hypermesh一、 数值模型的建立1.1 单元及算法的选择岩石,炸药,空气都采用solid164实体单元。岩石采用常应力实体单元,该种单元属于纯粹的lagrange算法,该种算法单元网格附着在材料上,随着材料的流动而产生单元网格的变形,但是在结构变形巨大时,有...

weixin_29494379的博客 7317

layui父页面获取子页面的窗口对象

在父页面的layer.open方法中的按钮点击回调方法中,使用以下方法,可以调用子页面中的js方法。 一、 //获得iframe窗口的id至,其中下面的‘customerServiceOpen’为layer.open方法中的id值 var frameId=document.getElementById(‘customerServiceOpen’).getElementsByTagName(“i

hlx156的博客 7767

【异常】OpenClaw调用火山引擎大模型提示词 Agent failed before reply: All models failed (6): volcengine/kimi-k2-5-26

摘要: 本文针对OpenClaw调用火山引擎大模型服务时触发的全量熔断报错(All models failed)提供全链路排查方案。报错核心为服务熔断(cooldown)和模型不可用(model_not_found),主要源于账号权限、API凭证失效或模型标识错误。解决方案按优先级分步实施:1)校验账号状态与AK/SK有效性;2)核对官方模型标识;3)重启服务解除熔断;4)修复配置文件;5)通过原生API测试定位网络或服务端问题。日志分析(openclaw logs)可快速识别HTTP状态码(如401/40

奶爸的编程之路,也就一周冷个三天 838

【C++】ROS:ROS1环境配置与基础示例

ROS1环境配置与基础示例

DevFrank的博客 2106

获取layer.open弹出层中bootstrap table选中行数据

获取弹出层容器 var iframeWin = window[layero.find('iframe')[0]['name']]; 获取弹出层bootstrap table选中行数据 var selectTemplate = JSON.stringify(iframeWin.$('#bootstrap-table').bootstrapTable('getSelections')); ...

真是适合睡觉的天气 2801

Kafka 性能优化与常见问题排查

Kafka 的高性能依赖于合理的集群设计、参数优化与高效的监控体系。生产环境中,应重点关注I/O 瓶颈、分区规划、Producer/Consumer 参数调优,并通过监控与排查手段快速定位问题,从而保障 Kafka 在实时场景下的稳定运行。

X2829352498的博客 236

[iframe] 扩展百度ueditor时获取dialog内的表单值

百度ueditor的dialog弹出层方式为,创建一个 iframe,在 iframe 里打开一个 html 页面,因此问题转化为:如何从 iframe 中获取表单内容 根据iframe的id属性,获取window; 即可使用 window.document.getElementById(“id”); 代码如下:$({ var window = fGetWindow("iframeId");

列苗 3095

lwip-2.0.3

lwip是瑞典计算机科学院(SICS)的Adam Dunkels 开发的一个小型开源的TCP/IP协议栈。实现的重点是在保持TCP协议主要功能的基础上减少对RAM 的占用。

Devexpress16.2.6破解工具

Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具Devexpress16.2.6破解工具

获取iframe的window对象

1. 获得iframe的window对象 存在跨域访问限制。 chrome:iframeElement. contentWindow firefox: iframeElement.contentWindow ie6:iframeElement.contentWindow 文章Iframes, onload, and document.domain中说“he iframe element

王星乐的博客 4200

Probability and Statistics - 4th edition

Probability and Statistics - 4th edition

layui弹出层iframe取子页面的数据

layui打开弹出层代码: $('#accountBtn').on('click', function () { layer.open({ title: 'title', type: 2, shadeClose: false, shade: 0....

Huangsiqi7的博客 2695

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

Window 对象中的parent属性——iframe子窗口访问父窗口

Window 对象 Window 对象表示浏览器中打开的窗口。如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。   手中的一个项目包含iframe与父窗口的交互,之前的一个同事的调用一个基于jQuery组件的方法是 parent.$.functionName  之前没太弄...

iteye_4328的博客 4603

无法获取弹出层window对象里的内容,或无法读取

获取window对象的异步问题

java_csdnn的博客 886

JS操作iframe 对象

1. 获得iframe的window对象 存在跨域访问限制。 chrome:iframeElement. contentWindow firefox: iframeElement.contentWindow ie6:iframeElement.contentWindow 文章Iframes, onload, and document.domain中说“he iframe eleme

lizhangxiong1234的专栏 866

layer弹出层父子层之间的操作

layer 的基本API可参考;http://www.layui.com/doc/modules/layer.html 在项目开发中遇到使用layer弹出层包裹其他页面的进行修改密码的需求,在修改密码后,后续页面在弹出层中展示,为了解决这一问题,进行记录。首先明确一点,layer的一个重要参数 index,标示当前层的索引。 一 layer父子层之间的操作 1 访问页面的元素

a669277756的博客 2万+

在iframe结构中,如何使弹出层位于所有框架的上方(-)

在做后台管理页面的时候,经常用到iframe.虽说这东西有些过时,也不利于SEO,但是后台就是后台,不需要考虑那么多东西,综合来说,用iframe还是很适合后台管理界面的. 但是在遇到弹出层时,出现了问题.由于页面是由三个html文件拼合而成的,所以每个分页面的弹出层,只能存在于自己的页面中,无法做到遮盖所有的分页面. 我在这里学到的第一种方法就是利用DIV包装Iframe的方法.可以解决这个...

weixin_30727835的博客 701

【selenium】三大切换 iframe 弹窗alert 句柄window 和 鼠标操作

iframe往内层iframe进,只能一层层进,跳出去可以直接跳出最外面,iframe是一层一层往里面切。

weixin_40772077的博客 1975

window弹出框在iframe之外显示

Ext.net 使用了tab 控件,但是加载的时候用的iframe,导致里面如果有window弹出框,并且要全屏显示的时候,不能跳出iframe显示。 function addMainTab(tabPanel, url, id, title, icon) { var tab = Ext.getCmp(id); if (!tab) { tab

彷徨de等待 9063

BOM:window对象,screen对象,history对象,location对象,弹出框,计时相关

目录前端基础之BOM和DOMWindow对象window的子对象navigator对象screen对象history对象location对象弹出框警告框>>>alert确认框>>>confirm提示框>>>prompt计时相关setTimeout()clearTimeout()>>>取消setTimeout()设置setln...

felix的博客 157

Ie window.showModalDialog()弹出框

前些天做项目时遇到了个浏览器兼容问题,解决后记录一下,也将模式化的资料放上! 详细问题描述: 在火狐浏览器中弹出一个子窗口,子页面中是一个分页,点下一页后子页面会刷新,然后window.dialogArguments对象就丢失了,alert输出显示undefined [解决方法见第三项] 最近做网站的时候需要用到模式化窗口功能,也遇到了一些问题,所以查了查资料以解决        1....

Java地摊 698

iframe+Layer+闭包下window对象传递的实例

目的:在iframe布局模式下,layer的弹窗只能弹出当前调用方法所在页面的上层,多重iframe嵌套时,子层的layer弹框会被覆盖核心: 子父层js的方法通过window对像传递 layer的多重ifrmae嵌套的最外层弹窗实现方法 参数传递过程中推荐以json形式封装后再进行传递更佳<方法使用者无需在方法中追加过多参数,便于阅读和使用> 1.子层 var opt

架构探险之道 917
上一篇: layui关闭iframe弹出层,方法失效
下一篇: 分离式前后端的交互(超详细)
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值