layer弹出⼦iframe层⽗⼦页⾯传值的实现⽅法
本⽂介绍了layer弹出⼦iframe层⽗⼦页⾯传值的实现⽅法，分享给⼤家，具体如下：
⽗页⾯获取⼦页⾯元素
格式：
$("#iframeID").contents().find("#eleID")
⽰例代码：
father.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>⽗级页⾯</title>
<script src="code.jquery/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="code.jquery/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="code.jquery/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="code.jquery/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="code.jquery/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="code.jquery/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="code.jquery/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("我是从⽗级传来的值哟……")
}
});
})
jquery弹出div窗口</script>
</body>
</html>
son.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>⼦级页⾯</title>
<script src="code.jquery/jquery-2.2.4.min.js"></script>
</head>
<body>
<div id="test"></div>
</body>
</html>
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。