window.addEventListener('message', receiveMessage, false)
时间: 2023-02-26 22:53:19 浏览: 104
这是一段 JavaScript 代码,用来为窗口元素添加一个名为 "message" 的事件监听器。当这个事件被触发时,就会执行名为 "receiveMessage" 的函数。第三个参数 "false" 表示事件的冒泡阶段触发该事件。
相关问题
window.addEventListener('message')怎么只接受一次信息
`window.addEventListener('message')`并没有提供直接只接收一次信息的方法,它只是用来接收其他窗口或iframe发送过来的PostMessage消息的方法,并且每次收到消息都会触发回调函数。
如果您只想接收一次消息,可以在回调函数中将事件监听器remove掉,这样它就不会再接收到后续的消息了。以下是一个示例:
```
function receiveMessage(event) {
console.log('收到消息:', event.data);
// 只接收一次消息,移除事件监听器
window.removeEventListener('message', receiveMessage);
}
window.addEventListener('message', receiveMessage);
```
在上面的示例中,当`window.addEventListener('message', receiveMessage)`方法添加事件监听器时,它会调用`receiveMessage`函数来接收消息。在`receiveMessage`函数中,我们添加了一行代码来移除事件监听器,这样它就不会再接收到任何后续的消息了。
注意,这种方法只适用于只需要接收一次消息的情况,如果您需要接收多次消息,还需要再次添加事件监听器。
window.parent.postMessage 详细案例
`window.parent.postMessage` 是用于在嵌套的 iframe 中向父级窗口发送消息的方法。下面是一个详细的案例,演示了如何使用 `window.parent.postMessage` 进行跨域通信。
假设我们有一个父级页面(`parent.html`)和一个嵌套的 iframe(`child.html`),它们分别位于不同的域名下。
在 `parent.html` 中:
```html
<!DOCTYPE html>
<html>
<head>
<title>Parent Page</title>
</head>
<body>
<h1>Parent Page</h1>
<iframe src="http://child-domain.com/child.html" id="childFrame"></iframe>
<script>
// 监听来自 iframe 的消息
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
// 确保消息来自特定域名
if (event.origin !== "http://child-domain.com") {
return;
}
console.log("Received message from child iframe: " + event.data);
// 在这里可以进行相应的处理逻辑
}
</script>
</body>
</html>
```
在 `child.html` 中:
```html
<!DOCTYPE html>
<html>
<head>
<title>Child Page</title>
</head>
<body>
<h1>Child Page</h1>
<script>
// 发送消息给父级页面
window.parent.postMessage("Hello from child iframe", "http://parent-domain.com");
</script>
</body>
</html>
```
在这个例子中,父级页面 `parent.html` 包含一个嵌套的 iframe,其中的 `src` 属性指向 `child.html`,并且指定了 `id` 为 `childFrame`。在父级页面的 JavaScript 中,我们使用 `window.addEventListener` 来监听来自 iframe 的消息。当收到消息时,我们检查消息的来源域名,确保它来自特定的域名(在这个例子中是 `http://child-domain.com`),然后进行相应的处理逻辑。
在子级页面 `child.html` 的 JavaScript 中,我们使用 `window.parent.postMessage` 发送消息给父级页面。第一个参数是要发送的消息内容,第二个参数是接收消息的页面的域名(在这个例子中是 `http://parent-domain.com`)。
通过这种方式,我们实现了从嵌套的 iframe 页面向父级页面发送跨域消息,并在父级页面中接收和处理这些消息。
请注意,为了安全考虑,需要在接收消息的页面中检查消息的来源域名,并且只接受来自特定域名的消息。这可以防止恶意代码发送虚假消息。
阅读全文