一、父頁面向子頁面傳值
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層父子頁面傳值的實現方法