JavaScript父、子页面交互技巧总结
在Web开发中，经常需要在父页面和子页面之间进行信息交互，这时就需要用到JavaScript。本文将介绍JavaScript父、子页面交互的几种常见技巧。
通过iframe元素实现父、子页面交互
在父页面中，可以通过iframe元素引入子页面。父页面可以访问子页面中的元素和JavaScript函数，子页面也可以通过window.parent访问父页面的元素和JavaScript函数。
以下是一个示例：
父页面
<html>
<head>
<title>父页面</title>
</head>
<body>
<iframe id="myFrame" src="child.html"></iframe>
<script>
function sayHello() {
alert('Hello from parent page');
}
</script>
</body>
</html>
子页面（child.html）
<html>
<head>
<title>子页面</title>
</head>
<body>
<button onclick="window.parent.sayHello()">Click me</button>
<script>
function sayHello() {
alert('Hello from child page');
}
</script>
</body>
</html>
在本示例中，当点击子页面的按钮时，子页面会调用父页面中的sayHello函数，弹出“Hello from parent page”的弹窗。同样地，在父页面中调用子页面的函数也十分方便，只需要使用iframe元素的contentWindow属性即可。
通过window.open打开子窗口实现页面交互
除了使用iframe元素，还可以通过window.open打开一个子窗口。父页面可以访问子窗口的元素和JavaScript函数，子窗口也可以通过window.opener访问父页面的元素和JavaScript函数。
以下是一个示例：
父页面
<html>
<head>
<title>父页面</title>
</head>
<body>
<button onclick="openChildWindow()">打开子窗口</button>
<script>
function sayHello() {
alert('Hello from parent page');
}
function openChildWindow() {
var childWindow = window.open('child.html');
childWindow.opener = window;
}
</script>
</body>
</html>
子页面（child.html）
<html>
<head>
<title>子页面</title>
</head>
<body>
<button onclick="window.opener.sayHello()">Click me</button>
<script>
function sayHello() {
alert('Hello from child window');
}
</script>
</body>
</html>
在本示例中，当点击父页面的按钮时，父页面会打开子页面，在子页面中点击按钮时，子页面会调用父页面中的sayHello函数，弹出“Hello from parent page”的弹窗。
通过以上两个示例，我们可以看到，在Web开发中，JavaScript父、子页面交互是必不可少的一部分，掌握如何进行页面交互是十分重要的。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript父、子页面交互技巧总结 - Python技术站
微信扫一扫 
支付宝扫一扫 