时间:2021-05-26
本文介绍了layer弹出子iframe层父子页面传值的实现方法,分享给大家,具体如下:
父页面获取子页面元素
格式:
示例代码:
father.html
son.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>子级页面</title> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script></head><body><div id="son_dataChange">我是子页面内容,点击“父向子传值”按钮我改变</div></body></html>父页面调用子页面方法
格式:
参数:fun()为子页面的函数
注意:$("#iframeID")[0]后面这个[0]必须要,亲测,删除就报错了,其原因是contentWindow是原生js的方法,所以用.eq(0)都不行。
示例代码:
father.html
son.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>子级页面</title> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script></head><body><div id="son_fun">我是子页面内容,点击“父调子函数”按钮我改变</div><script> function son_fun() { $("#son_fun").html("我变啦!啦啦啦……") }</script></body></html>子页面获取父页面元素
格式:
参数:fun()为子页面的函数
示例代码:
father.html
son.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>子级页面</title> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <style> .btn{display:inline-block;height:30px;line-height:30px;border-radius:5px;background:darkturquoise;padding:5px 12px;color:#fff;cursor:pointer;margin-right:20px;} </style></head><body><div> <span id="son_dataChange" class="btn">子向父传值</span></div><script> $("#son_dataChange").click(function () { $("#father_dataChange",window.parent.document).html("变咯……"); });</script></body></html>子页面调用父页面方法
格式:
parent.ele
参数:fun()为子页面的函数
示例代码:
father.html
son.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>子级页面</title> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <style> .btn{display:inline-block;height:30px;line-height:30px;border-radius:5px;background:darkturquoise;padding:5px 12px;color:#fff;cursor:pointer;margin-right:20px;} </style></head><body><div> <span id="son_dataChange" class="btn">点我后记得看控制台哟</span></div><script> $("#son_dataChange").click(function () { console.log(parent.ml_var); parent.ml(); });</script></body></html>layer弹出iframe层
layer弹出iframe层,其他都差不多,主要是如何找到iframe,先看下一般的layer调用iframe弹框代码:
layer.open({ type: 2, title: '我是子iframe页面', shadeClose: true, shade: 0.8, area: ['380px', '90%'], content: './son.html' //iframe的url});于是我就想给这个iframe弹框设置一个id,
layer.open({ id:"son", type: 2, title: '我是子iframe页面', shadeClose: true, shade: 0.8, area: ['380px', '90%'], content: './son.html' //iframe的url});再通过这个id进行操作,操作方法和上面介绍的方法对应就可以,可是这种方法太繁琐,我又找了个更好的办法——利用layer的success回调函数:
layer.open({ type: 2, title: '我是子iframe页面', shadeClose: true, shade: 0.8, area: ['380px', '90%'], content: './son.html', //iframe的url success:function(dom){ let $iframeDom=$(dom[0]).find("iframe").eq(0).contents(); $iframeDom.find("#test").html("我是从父级传来的值哟……") }});示例代码:
father.html
son.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>子级页面</title> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script></head><body><div id="test"></div></body></html>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文介绍了layui弹窗父子窗口之间传参数的方法,分享给大家,具体如下:1、父页面打开子页面并向子页面传参数functionsetChooseValues(re
因为项目框架用了iframe,所以在用layer时,默认layer.open弹出的窗口只能在iframe子窗口区域显示。现在想让layer在父窗口或者说框架的最
这应该是我们在开发中经常用到的吧,主窗口和Iframe层之间传值实现我们各种需求,比如打开某条记录的详细数据….主窗口向Iframe层传值://主窗口代码lay
一.父子组件传值父子组件传值{{total}}//父组件向子组件传值用props,加:号后传递的为js表达式,示例中则为数字,不加:号代表的是字符串varcou
本文实例讲述了在Javascript调用iframe框架页面中函数的方法,这个调用方法其实非常的简单,有了这个方法我们就可以实现iframe之间传值或修改值了,