iframe弹出层layer父子容器之间传值
程序员文章站
2024-03-15 08:47:41
...
一、父页面向子页面传值
1，父页面获取子页面元素
格式：$("iframe").contents().find("#son")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父级页面</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<iframe src="son.html"></iframe>
<button>父向子传值</button>
<script>
$("button").click(function () {
$("iframe").contents().find("#son").html("我是父页面传过来的值……")
})
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子页面</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="son">
我是子页面
</div>
</body>
</html>2，父页面调用子页面的方法
格式：$("iframe")[0].contentWindow.son_fun()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父级页面</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<iframe src="son.html"></iframe>
<button>调用子页面的方法</button>
<script>
$("button").click(function () {
$("iframe")[0].contentWindow.son_fun()
})
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子页面</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="son">
我是子页面
</div>
<script>
function son_fun() {
alert("我是子页面的方法哦")
}
</script>
</body>
</html>二、子页面向父页面传值
1，子页面获取父页面元素
格式：$("#father",window.parent.document)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父级页面</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<iframe src="son.html"></iframe>
<div id="father">我是父页面的内容</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子页面</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<button>获取父页面元素</button>
<script>
$("button").click(function () {
$("#father",window.parent.document).html("我是子页面传过来的值哦！");
})
</script>
</body>
</html>2，子页面调用父页面的方法，及获取父页面变量
格式：
变量：parent.fa_var
方法：parent.faFun()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父级页面</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<iframe src="son.html"></iframe>
<script>
var fa_var = "我是父变量";
function faFun() {
alert("我是父方法");
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子页面</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<button>获取父页面元素</button>
<script>
$("button").click(function () {
console.log(parent.fa_var);
parent.faFun();
})
</script>
</body>
</html>三、参考文章
1，layer弹出子iframe层父子页面传值的实现方法
上一篇： PHP开发实践-页面传值
下一篇： Kotlin语法基础篇（一）