使用react.js

Question

我正在编写一个聊天窗口小部件，它将分发给最终用户，只需要很少的代码放入他们的网站。通常的常规。

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

• 在其中提供包含直接iframe和源网址的代码段。这种方法的问题是，只有在嵌入小部件时才能使用它。如果需要弹出窗口小部件，灵活性将会丢失。
• 提供一个代码片段，其中包含异步加载的javascript。 Javascript将在父网页中创建一个iframe，并且可以设置src。这个小部件javascript几乎没有智能。这是大多数小部件开发人员遵循的常用方法。

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

我想了解开发小部件的最佳做法。所以我经历了它的流行实现。我非常喜欢Intercom的小部件。它是用React编写的。我分析了它是如何工作的。 最小javascript在网页上加载了异步。它正在注入标识为iframe的{​​{1}}。 intercom-frame其中包含一个脚本URl。显然它是React捆绑。

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

我偶然发现了SO question，这部分回答了我的问题。从答案来看，

  

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

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

我不明白的是，

1。）他们如何通过窗口消息实现它？

2.。）他们如何设法从另一个iframe脚本中创建一个div iframe的内容？小部件javascript不会根据它的来源创建这些元素。它应该由widget js生成的iframe中的React包完成。

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

Answer 1

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

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