js 简单使用postMessage iframe跨域通信

一、js 简单使用postMessage iframe跨域通信

1、 postMessage是html5引入的API,postMessage()方法允许来自不同源的脚本采用异步方式进行有效的通信,可以实现跨文本文档,多窗口,跨域消息传递.多用于窗口间数据通信,这也使它成为跨域通信的一种有效的解决方案.

2、要发送到其他窗口的数据,它将会被!结构化克隆算法序列化.这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化.

3、通过窗口的origin属性来指定哪些窗口能接收到消息事件,指定后只有对应origin下的窗口才可以接收到消息,设置为通配符"*"表示可以发送到任何窗口,但通常处于安全性考虑不建议这么做.如果想要发送到与当前窗口同源的窗口,可设置为"/"

4、是一串和message同时传递的 Transferable对象,这些对象的所有权将被转移给消息的接收方,而发送一方将不再保有所有权.

5、下面是打印出的结果 data属性为传输过来的数据

6、若用到的地方很多建议加上 targetOrigin属性并且给数据加好type确保数据正确的被接收

7、欢迎对这个有研究、有兴趣或者发现文章有错误的地方的伙伴们和我交流,共同进步~~~

二、02-你真的会用postMessage吗(下)

在现代的 Web应用中，跨窗口通信是一个常见需求。本文将介绍三种常用的跨窗口通信技术：postMessage、MessageChannel和 BroadcastChannel。我们将探讨它们的使用场景、方法和示例，以帮助开发人员理解如何在不同窗口之间实现实时通信。

随着 Web应用的复杂性和多样化，多窗口之间的通信变得越来越重要。无论是在同一域名下的多个浏览器窗口、标签页之间，还是在父级窗口与子级窗口（iframe）之间，或者在不同的 Web Worker之间，我们都需要一种可靠的通信机制来实现数据传递和实时消息广播。

在本文中，我们将重点介绍以下三种跨窗口通信技术：

让我们深入探讨每种通信技术的使用场景、方法和示例。

postMessage是一种在不同窗口之间进行通信的基本机制。它适用于以下场景：

通过在不同窗口之间使用 postMessage，在上篇中我们已经着重讲述了，这里我们主要讲在Web Worker中如何使用postMessage进行通信。

在主线程和 Web Worker之间进行通信：

MessageChannel：双向通信的高级机制

在一些场景中，简单的单向通信可能无法满足需求，这时可以使用 MessageChannel来建立一个双向通信通道。MessageChannel适用于以下场景：

使用 MessageChannel的步骤如下：

使用 MessageChannel在两个不同的 iframe之间进行通信：

在这个示例中，我们创建了一个 MessageChannel实例，并通过port1和 port2获取了两个端口对象。然后，我们在 iframe1中发送消息到 iframe2，并在 iframe2中接收来自 iframe1的消息。同时，我们在 iframe2中发送消息到 iframe1，并在 iframe1中接收来自 iframe2的消息。

使用 MessageChannel在两个 Web Workers之间通信：

在上面的示例中，我们有两个 Web Workers：worker1.js和 worker2.js。

通过以上的示例，worker1.js和 worker2.js之间通过消息传递机制实现了通信。它们可以相互发送和接收消息，实现了双向的通信。

MessageChannel除了用作通信还有一些hack的用法，比如用它来做deepClone

这个方法比较优秀的地方在于undefined的不会丢失，循环引用的对象也不会报错，循环点会被置为undefined，不过不能复制函数。

BroadcastChannel：实时消息广播

BroadcastChannel提供了一种实时消息广播机制，适用于以下场景：

使用 BroadcastChannel的步骤如下：

以下是一个示例，展示了如何使用 BroadcastChannel进行实时消息广播：

在这个示例中，我们创建了一个 BroadcastChannel实例，指定了广播通道的名称为'myChannel'。然后，我们使用 postMessage方法向广播通道发送消息，并在 onmessage事件处理程序中监听来自广播通道的消息。

所有订阅了同一广播通道的窗口（例如同一域名下的多个窗口、标签页或 iframe）都将实时接收到广播的消息。

BroadcastChannel提供了一种简单而强大的实时消息广播机制，适用于实现实时通信、状态共享和事件广播等场景。它可以在多个窗口之间共享信息，帮助我们构建实时性高、交互性强的 Web应用。

本文介绍了三种常用的跨窗口通信技术：postMessage、MessageChannel和 BroadcastChannel。它们分别适用于不同的通信场景，并提供了灵活的通信机制。

根据具体的需求和场景，开发人员可以选择适合的通信技术来实现窗口间的数据传递和实时通信。这些跨窗口通信技术为构建交互性强、实时性高的 Web应用提供了强大的工具。

希望本文能够帮助读者理解和应用这些通信技术，并在实际开发中发挥作用。通过合理运用这些技术，我们能够构建出更加灵活、响应快的跨窗口通信系统，为用户提供更好的交互体验。

MDN Web Docs: Window.postMessage()

MDN Web Docs: BroadcastChannel

掘金: MessageChannel和BroadcastChannel

三、js代码如何获取iframe中的元素

1、获取iframe元素，JavaScript提供了一种简便方法。利用`contentWindow`属性获取iframe中的window对象，`contentDocument`属性获取iframe中的document对象。以此为基础，执行常规的DOM操作以查找iframe中的元素。

2、不过，需注意安全限制。当iframe与主页面不在同一域名下时，出于安全考量，浏览器不允许直接通过JavaScript操作iframe内容。解决方法是采用`postMessage`进行跨域通信，从而实现对iframe元素的操作。

3、对于前端应届毕业生而言，项目指的是什么？在这里，项目不仅仅是编程任务，更是一种学习、实践和提升技能的机会。项目可以是个人的网站开发、参与开源项目、为公司构建网页应用等。它帮助应届毕业生将理论知识转化为实际应用，增强解决问题的能力，并积累宝贵的工作经验。