Html5 iframe子页面与父页面js方法相互调用
super
2022-01-20 16:00
1909
父页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe父页面与子页面传值，方法调用</title>
</head>
<body>
<button onclick="giveValueToSonPage();">向子页面传值</button>
<iframe src="son.html" id="son_page" frameborder="1"></iframe>
</body>
<script>
/**
* 给子页面传值
*/
function giveValueToSonPage() {
let value = 1;
document.getElementById("son_page").contentWindow.sonPageFunction(value);
}
/**
* 父页面的方法，由子页面调用
*/
function parentPageFunction(value) {
alert('这里是父页面，子页面传的值：' + value);
}
</script>
</html>
子页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子页面</title>
</head>
<body>
<button onclick="giveValueToParentPage();">向父页面传值</button>
</body>
<script>
/**
* 给父页面传值
*/
function giveValueToParentPage() {
let value = 2;
window.parent.parentPageFunction(value);
}
/**
* 子页面的方法，由父页面调用
*/
function sonPageFunction(value) {
alert('这里是子页面的方法，父页面传来的值为' + value);
}
</script>
</html>0 条讨论
