iframe和父页面使用message通信，支持跨域
假设在一个主页面中有一个iframe，iframe内部的页面通过postMessage发送了一个包含自身高度信息的消息
<!DOCTYPE html>
<html><head><meta charset="UTF - 8"><title>Main Page</title>
</head><body><iframe src="https://example - iframe - domain.com" id="myIframe"></iframe><script>window.addEventListener("message", async (event) => {// 处理接收到的消息let { Height } = event.data;if (Height) {console.log('Height:', Height);// 假设这里根据Height调整iframe的高度document.getElementById('myIframe').style.height = Height + 'px';}});console.log("iframe end");</script>
</body></html>
在iframe内部的页面中：
<!DOCTYPE html>
<html><head><meta charset="UTF - 8"><title>Iframe Page</title>
</head><body><script>// 假设这里获取到自身的高度并发送给主页面const iframeHeight = document.body.scrollHeight;window.parent.postMessage({ Height: iframeHeight }, '*');</script>
</body></html>
-
postMessage方法整体功能window.parent.postMessage是一种用于跨域通信的方法，通常用于在iframe（子窗口）与包含它的父窗口之间，或者不同源的窗口之间进行安全的消息传递。
-
参数含义
- 第一个参数：
{ Height: iframeHeight }是要发送的数据对象。在这个例子中，创建了一个包含Height属性的对象，其值为iframeHeight（这个变量应该是在前面代码中定义的，表示iframe的高度相关的值）。这个对象可以包含任意复杂的数据结构，如嵌套对象、数组等，根据实际的通信需求而定。
- 第二个参数：
'*'是目标源（target origin）。目标源用于指定消息可以被发送到哪些源（通常是指URL的协议、主机和端口部分）。- 如果指定为
'*'，表示可以将消息发送到任何源，这是一种比较宽松的设置，但在实际的安全敏感场景下可能不建议使用，因为它可能会导致安全风险（例如，恶意网站可能会利用这种宽松的设置来接收消息并进行恶意操作）。 - 在更安全的场景下，应该指定具体的源，例如，如果父窗口的URL是https://example.com，那么应该将目标源指定为
https://example.com，像这样：window.parent.postMessage({ Height: iframeHeight }, 'https://example.com');。这样可以确保消息只被发送到预期的目标源，提高安全性。
- 第一个参数：