javascript - 使用 react.js 聊天小部件

Question

我正在编写一个聊天小部件，只需将很少的代码放入他们的网站即可分发给最终用户。例行公事。

我的小部件将用 React 编写。我知道实现这一目标的几种方法。让我列出我能想到的方法。

• 给出一个直接包含 iframe 和源 url 的代码片段。这种方法的问题是，它只能在嵌入小部件时使用。如果小部件需要弹出，将失去灵 active 。
• 给出一个异步加载 javascript 的代码片段。 Javascript 将在父网页中创建一个 iframe，并且可以设置 src。这个小部件 javascript 可能没有什么智能。这是大多数小部件开发人员通常采用的方法。

当然，在任何一种情况下，源 URL 都会呈现一个由 webpack 捆绑的 React 页面。

我想了解开发小部件的最佳实践。所以我浏览了它的流行实现。我喜欢 Intercom的小部件非常多。它是用 React 编写的。我分析了它是如何工作的。最小的javascript在网页上异步加载。它正在注入(inject)一个 ID 为 intercom-frame 的 iframe。 iframe 的头部有一个脚本，源代码为 URl .显然它是 React 包。

我不明白的是，在这个iframe下面，创建了一个div，其中包含三个iframe。一个显示聊天气泡，另一个显示聊天气泡图标，最后一个显示实际的聊天窗口。那些 iframe 没有源 url，我猜这个包是从小部件 javascript 创建的第一个 iframe 提供的。

我遇到了这个SO question ，这部分回答了我的问题。从答案来看，

expose some API between your customer webpage and your iframe, using window messaging.

the main code (the iframe code) is then loaded by this first script asynchronously, and not included in it.

我不明白的是，

1.) 他们如何通过窗口消息传递实现它？

2.) 他们如何从另一个 iframe 的脚本创建一个包含 iframe 的 div？ Widget javascript 不会根据它的来源创建这些元素。它应该是由 widget js 生成的 iframe 中的 React bundle 完成的。

3.) iframe 中的 react 包如何在父 DOM 中创建 react 元素？

Answer 1

由 Intercom 脚本创建的 iframe 都没有 src 属性，这意味着它们不受同源策略的约束。因此，他们可以修改父页面 html，反之亦然。

但是，我不明白为什么他们需要有单独的iframe。以及为什么使用一个脚本来注入(inject)另一个注入(inject)主要 html 内容的脚本。第一个脚本没有足够的能力注入(inject) html 内容吗？我很乐意对这些事情感到轻松。