在JavaScript中，实现子父窗体（iframe或window.open打开的窗口）之间的互相传值，可以通过几种方式来完成。这里我将提供一个简单的例子，展示如何通过`window.postMessage`方法来实现跨域（或同域）的父子窗体通信。
### 父页面（parent.html）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Parent Page</title>
</head>
<body>
<iframe id="childFrame" src="child.html" width="500" height="300"></iframe>
<script>
// 监听来自子页面的消息
window.addEventListener('message', function(event) {
// 验证消息来源，防止XSS攻击
if (event.origin !== 'http://yourdomain.com') { // 替换为你的子页面域名
return;
}
console.log('Received message from child:', event.data);
// 可以在这里处理接收到的数据
}, false);
// 发送消息到子页面
function sendMessageToChild() {
var childFrame = document.getElementById('childFrame').contentWindow;
childFrame.postMessage('Hello from parent!', 'http://yourdomain.com'); // 替换为你的子页面域名
}
// 示例：在页面加载完成后发送消息
window.onload = function() {
sendMessageToChild();
};
</script>
</body>
</html>
### 子页面（child.html）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Child Page</title>
</head>
<body>
<h1>Child Page</h1>
<script>
// 监听来自父页面的消息
window.addEventListener('message', function(event) {
// 验证消息来源，防止XSS攻击
if (event.origin !== 'http://parentdomain.com') { // 替换为你的父页面域名
return;
}
console.log('Received message from parent:', event.data);
// 可以在这里处理接收到的数据
// 发送消息回父页面
event.source.postMessage('Hello back from child!', event.origin);
}, false);
</script>
</body>
</html>
**注意**：
- 在实际使用中，你需要将`event.origin`中的URL替换为实际的父页面或子页面的域名，以确保消息来源的安全性。
- `postMessage`方法允许你安全地跨源通信，只要接收方愿意接收你的消息。
- 这种方法不仅适用于iframe，也适用于通过`window.open`打开的窗口。
- 示例中的`sendMessageToChild`函数展示了如何从父页面向子页面发送消息，而子页面中的事件监听器则展示了如何接收并处理这些消息，并可选地发送回复。