window.parent.postMessage("I am xiaojin", "*");
时间: 2025-03-18 20:07:52 浏览: 43
### 关于 `window.parent.postMessage` 的用法
`window.parent.postMessage` 是一种用于跨域通信的方法,允许不同源的网页之间安全地传递消息。此方法通过向父窗口发送消息来实现子页面与父页面之间的交互。
以下是关于其基本语法和参数解释:
#### 基本语法
```javascript
otherWindow.postMessage(message, targetOrigin);
```
- **`message`**: 要发送的消息内容,可以是字符串或其他可序列化的数据结构。
- **`targetOrigin`**: 指定目标窗口所在的域名地址。如果设置为 `"*"`,则表示不限制接收方的来源,但这可能会带来安全隐患[^1]。
#### 示例代码
下面是一个简单的例子展示如何利用 postMessage 进行父子框架间的通讯:
假设有一个主页面加载了一个来自其他站点的 iframe 子页面.
**Parent Page (index.html):**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Post Message Example</title>
</head>
<body>
<iframe id="myIframe" src="https://example.com/child.html"></iframe>
<script type="text/javascript">
var childFrame = document.getElementById('myIframe').contentWindow;
function sendMessageToChild() {
let messageData = 'Hello from parent!';
childFrame.postMessage(messageData, 'https://example.com');
}
// Listen for messages coming back from the child frame.
window.addEventListener('message', function(event) {
console.log(`Received response: ${event.data}`);
// Always check event.origin to ensure it's expected domain sending data.
if (event.origin !== 'https://example.com') return;
alleet(`Response received: ${event.data}`);
});
setTimeout(sendMessageToChild, 2000);
</script>
</body>
</html>
```
**Child Frame (child.html on https://example.com):**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Child Page</title>
</head>
<body>
<h1>This is Child Page.</h1>
<script type="text/javascript">
window.addEventListener('message', function(event) {
console.log(`Message Received From Parent:`, event.data);
// Ensure that this message comes only from trusted domains.
if (event.origin !== 'http://your-parent-domain.com') return;
// Responding back with some information.
let responseData = 'Hi there! I am your child.';
event.source.postMessage(responseData, event.origin);
});
</script>
</body>
</html>
```
上述示例展示了两个方向上的信息交换过程——从父级到子级以及反过来的情况。注意,在实际应用过程中应当验证接收到的数据及其源头以防止潜在的安全风险如 XSS 攻击等.
### 安全注意事项
当使用 `postMessage()` API 时需要注意安全性问题:
- 验证传入的信息是否合法并符合预期格式;
- 对事件中的 origin 属性做严格校验,确认它确实来自于可信网站;否则可能遭受恶意脚本攻击。
阅读全文
相关推荐



















