两个跨域页面通信（iframe） (postMessage)

两个跨域页面通信（iframe） (postMessage)

在浏览器的安全模型中，JavaScript通常只能访问与当前网页具有相同源（协议、域名、端口）的 localStorage 数据，
这意味着，如果你的网页想要访问其他网站的localStorage数据，通常是不被允许的。

那么如何获取呢？？？

方法1：

有一种方法可以实现跨域获取其他网站的 localStorage 数据，那就是通过使用浏览器插件或扩展程序，
一些浏览器插件或扩展程序可以获取浏览器中的 localStorage 数据，并且可以跨域访问其他网站的 localStorage 数据，
但需要注意的是，这种方法需要用户安装相应的插件或扩展程序，并且需要用户授权才能进行操作。

方法2：

如果你是在与第三方网站合作的情况下，可以考虑使用跨文档消息（postMessage）来实现不同域名之间的通信，而不是直接访问 localStorage 数据，
通过在不同域名的网页之间发送消息，可以实现安全的跨域通信，而无需直接访问对方网页的 localStorage 数据。

总之，
由于浏览器的安全限制，直接在 JavaScript 中跨域获取其他网站的 localStorage 数据是不被允许的，
需要通过浏览器插件、扩展程序或者与第三方网站合作来实现这一功能。

---

postMessage

跨文档消息（postMessage）是一种在不同窗口或 iframe 之间安全地进行跨域通信的方法，
通过 postMessage，一个窗口可以向另一个窗口发送消息，并且可以在不同的域名、协议和端口之间进行通信。

postMessage方法接受两个参数：要发送的消息、目标窗口的源，
	目标窗口的源可以是一个 URL 字符串，表示消息接收方的源，或者是一个表示消息接收方的窗口对象（例如 iframe 的 contentWindow），
	接收消息的窗口可以通过监听 message 事件来接收消息。

举例：演示如何在父窗口和 iframe 之间使用 postMessage 进行通信：

在父窗口中：

// 监听来自 iframe 的消息
window.addEventListener('message', function(event) {
  // 确保消息来自预期的源
  if (event.origin !== 'http://example.com') {
    return
  }
  // 处理接收到的消息
  console.log('Received message from iframe:', event.data)
})

// 向 iframe 发送消息
var iframe = document.getElementById('myIframe')
iframe.contentWindow.postMessage('Hello from parent!', 'http://example.com')

在 iframe 中：

// 监听来自父窗口的消息
window.addEventListener('message', function(event) {
  // 确保消息来自预期的源
  if (event.origin !== 'http://parent.com') {
    return
  }
  // 处理接收到的消息
  console.log('Received message from parent:', event.data)
})

// 向父窗口发送消息
window.parent.postMessage('Hello from iframe!', 'http://parent.com')

---

可能会遇到这样的错误：

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://192.168.3.24:8080') does not match the recipient window's origin
无法在“DOMWindow”上执行“postMessage”：提供的目标源（“http://192.168.3.24:8080’）与收件人窗口的来源不匹配

这个问题的原因是：使用postMessage时候，iframe页面还未创建，你得在iframe创建之后在使用这些方法。

---