layer弹出子iframe层父子页面传值的实现方法
2018-11-25 04:00
1306 查看
本文介绍了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- layer弹出层父子页面事件相互调用方法
- 结合jQuery的unload方法实现JS退出页面弹出对话框
- zTree插件和layer弹出层结合进行添加，删除，修改操作时，针对出现调用父父页面方法出现问题，解决方法
- js关闭当前页面不弹出提示的方法 js实现浏览器的各种菜单命令
- layer实现删除确认及操作完成后弹出提醒，然后刷新本页面
- layer---弹出多个iframe如何找到父页面方法
- bootstarpTable点击行事件，点击数据事件，layer实现的包含页面的弹出层
- 使用ajax技术实现txt弹出在页面上的方法
- Ajax加载外部页面弹出层效果实现方法
- 20171207学习笔记之layer实现删除确认及操作完成后弹出提醒，然后刷新本页面
- Layui学习笔记--layer弹出层父子页面互相获取
- javascript实现页面弹出对话框，点确定再跳转到其他页面的方法
- MUI关于父子页面交互之，子页面调用父页面的方法实现一些功能
- js与css实现弹出层覆盖整个页面的方法
- layer弹出层父子页面事件相互调用
- layui框架中layer父子页面交互的方法分析
- JS实现刷新父页面不弹出提示框的方法
- js与css实现弹出层覆盖整个页面的方法
- 用window.open方法实现子页面调用的父子页面传值
- jQuery实现页面点击后退弹出提示框的方法