使用 react.js 聊天小部件

Question

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

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

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

当然，无论哪种情况，源 URL 都会呈现一个由 webpack 捆绑的 React 页面。

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

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

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

使用窗口消息在您的客户网页和 iframe 之间公开一些 API。

然后由第一个脚本加载主代码（iframe 代码） 异步的，不包含在其中。

我不明白的是，

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

2.) 他们如何从另一个 iframes 脚本创建一个带有 iframes 的 div？ Widget javascript 不会根据其来源创建这些元素。它应该由小部件js生成的iframe中的React bundle完成。

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

Answer 1

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

但是，我不明白他们为什么需要单独的iframe。以及为什么使用脚本来注入另一个注入主要 html 内容的脚本。第一个脚本没有足够的能力注入html内容吗？我很想对这些事情有所了解。