layer弹出子iframe层父子页面传值的实现方法
本文介绍了layer弹出子iframe层父子页面传值的实现方法，分享给大家，具体如下：
父页面获取子页面元素
格式：
$("#iframeID").contents().find("#eleID")
示例代码：
father.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="father_dataChange" class="btn">父向子传值</span>
</div>
<iframe id="iframe_dataChange" src="son.html" frameborder="0"></iframe>
<script>
$("#father_dataChange").click(function () {
$("#iframe_dataChange").contents().find("#son_dataChange").html("我是父页面传过来的值……")
})
</script>
</body>
</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>
父页面调用子页面方法
格式：
$("#iframeID")[0].contentWindow.fun()
参数：fun()为子页面的函数
注意：$("#iframeID")[0]后面这个[0]必须要，亲测，删除就报错了，其原因是contentWindow是原生js的方法，所以用.eq(0)都不行。
示例代码：
father.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="father_fun" class="btn">父调子函数</span>
</div>
<iframe id="iframe_fun" src="son.html" frameborder="0"></iframe>
<script>
$("#father_fun").click(function () {
$("#iframe_fun")[0].contentWindow.son_fun()
})
</script>
</body>
</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>
子页面获取父页面元素
格式：
$("#fatherID",window.parent.document)
参数：fun()为子页面的函数
示例代码：
father.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父级页面</title> </head> <body> <div id="father_dataChange">我是父页面内容，点击“子向父传值”按钮我改变</div> <iframe src="son.html" frameborder="0"></iframe> </body> </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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父级页面</title>
</head>
<body>
<iframe src="son.html" frameborder="0"></iframe>
<script>
var ml_var="我是父级定义的变量";
function ml() {
alert("我被调用了！")
}
</script>
</body>
</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
<!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>
<script src="layer.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="father_dataChange" class="btn">layer弹出iframe层</span>
</div>
<iframe id="iframe_dataChange" src="son.html" frameborder="0"></iframe>
<script>
$("#father_dataChange").click(function () {
layer.open({
id:"son",
type: 2,
title: '我是子iframe页面',
shadeClose: true,
shade: 0.8,
area: ['380px', '90%'],
content: './son.html',
success:function(dom){
let $iframeDom=$(dom[0]).find("iframe").eq(0).contents();
$iframeDom.find("#test").html("我是从父级传来的值哟……")
}
});
})
</script>
</body>
</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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
详解layui弹窗父子窗口之间传参数的方法
本文介绍了layui弹窗父子窗口之间传参数的方法,分享给大家,具体如下: 1.父页面打开子页面并向子页面传参数 function setChooseValues(ret){ var oView = document.getElementById("userName"); var oValue = document.getElementById("userIds"); var i = 0; if( ret != null){ oValue.value="&q
-
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
一.Layer简介 Layer是一款近年来备受青睐的web弹层组件,基于jquery,易用.实用,兼容包括IE6在内的所有主流浏览器,拥有丰富强大的可自定义的功能. Layer官网地址:http://layer.layui.com/ 二.多个iframe弹出层(非嵌套) 1.打开iframe弹出层js代码 (1)示例一: layer.open({ type: 2, title: 'layer mobile页', shadeClose: true, shade: 0.8, area: ['380p
-
Layui实现主窗口和Iframe层参数传递
这应该是我们在开发中经常用到的吧,主窗口和Iframe层之间传值实现我们各种需求,比如打开某条记录的详细数据-. 主窗口向Iframe层传值: //主窗口代码 layer.open({ type: 2, title: "标题", shade: 0.5, area: ['500px', '500px'], anim: 2, content: ['url'], success: function (layero, index) { var iframe = window['layui-la
-
layer弹出子iframe层父子页面传值的实现方法
本文介绍了layer弹出子iframe层父子页面传值的实现方法,分享给大家,具体如下: 父页面获取子页面元素 格式: $("#iframeID").contents().find("#eleID") 示例代码: father.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&
-
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
如下所示: 这种弹出层在ajax执行完添加房间的动作后在回调里写 var index = parent.layer.getFrameIndex(window.name); setTimeout(function(){parent.layer.close(index)}, 1000); 1秒后,当前窗口就会关闭了 以上这篇layer弹出的iframe层在执行完毕后关闭当前弹出层的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
layer弹出层父子页面事件相互调用方法
// 父页面 <body> <a data-url="bbbb.html" id="parentIframe">小小提示层</a> <input id="shuzhi" /> <button class="but_par">父页面</button> </body> <script src="../jquery-1.9.1.min
-
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
重点是阻止默认的刷新,这样外部页面就不刷新了,然后指定刷新iframe,我下面给出了思路 document.onkeypress = function(e){ if(e.keyCode == 116){ e.preventDefault(); //组织默认刷新 var iframeSrc = iframe.src; iframe.src = iframeSrc; } } iframe页面里再写如下: var iframeSrc = parent.iframe.src; document.onke
-
.net 弹出消息框后导致页面样式变乱解决方法
点击按钮,执行提交操作,弹出消息框后,页面的样式变乱,解决方法: 首先,确定使用的css样式正确,页面中的宽高值保持规范统一: 然后,弹出框避免使用Response.Write(),如下所示 复制代码 代码如下: Response.Write("<script language=javascript>"); Response.Write("window.alert('"); Response.Write("计划添加失败!"); Res
-
jQuery Layer弹出层传值到父页面的实现代码
目前做的项目中用到layer弹层传值,弹层输入框输入文本,点击确定按钮,父页面的树结构,会自动添加分组. 在此粘贴下代码,以后遇到,方便回忆,如有疑问请留言,或许会为您解答 $(document).ready(function(){ //添加任务弹出层 addTask(); }); //弹出层 function addTask(){ $('[data-id="addList"]').on('click', function(){ layer.open({ type: 2,title:
-
解决layer弹出层的内容页点击按钮跳转到新的页面问题
在参与的一个项目中,有一个这样的需求,导入基础数据成功后,默认弹出一个管理员登录页,点击登录按钮,需要跳到管理页面. 导入页按钮: <button type="button" id="start" class="layui-btn layui-btn-radius layui-btn-lg layui-bg-orange btn3"><i>导入</i></button> 导入按钮的点击事件,点击后会
-
解决layer弹出层自适应页面大小的问题
前两天在Vue中引入了Vue-layer插件,实现了弹出层效果.不过由于是在22寸屏下开发的,没多想,弹出层的area的长宽就设定的都是800px,效果还很好.结果那给用户看,他们是12寸的笔记本.弹出层直接撑爆了页面,无法关闭... 网上的解决方案大都是以下几种: 1.改成百分比形式.有bug,下面细说. 2.改成em,rem等.同上 3.采用area:auto.可能是因为采用了swiper的原因吧,这样设置会导致弹出层出现"顶天立地"的效果 4.采用iframeAuto.这个没太搞
-
layer弹出层 iframe层去掉滚动条的实例代码
如下所示: function newcont(url) { var index = layer.open({ title:false, type: 2, shadeClose: true, scrollbar: false, content: [url , 'no'] }); } 试了很多方法 最后发现layer的手册上就有,传入url的时候直接在后面加一个"no"就可以屏蔽掉滚动条... 以上这篇layer弹出层 iframe层去掉滚动条的实例代码就是小编分享给大家的全部内容了,希望
-
详解Layer弹出层样式
前言:学习layer弹出框,之前项目是用bootstrap模态框,后来改用layer弹出框,在文章的后面,我会分享项目的一些代码(我自己写的). layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,layer已成为国内最多人使用的web弹层组件,GitHub自然Stars3000+,官网累计下载量达30w+,大概有20万Web平台正在使用layer. 具体请