layer弹出子iframe层父子页面传值的实现方法
25 浏览量
2020-12-10
12:55:04
上传
评论
收藏 47KB PDF 举报
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>
资源评论
