<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>06.iframe主页面调用子页面方法</title>
</head>
<body>
<iframe id="myiframe" src="07.childpage.html"></iframe>
<script>
/*
确保在iframe加载完成后调用子页面的函数,
这样可以确保子页面已经完全加载完毕,所有的函数和变量都可以被访问。
*/
// document.querySelector('#myiframe').contentWindow.functionName()
const iframe = document.querySelector('#myiframe')
iframe.onload = function () {
this.contentWindow.childFunction()
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>07.childpage</title>
</head>
<body>
<div>hello world!</div>
<script>
function childFunction() {
console.log('Function called from child page')
}
</script>
</body>
</html>