与react.js聊天小部件

Question

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

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

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

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

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

我不明白的是,在这之下iframe,a div创建了三个iframes.一个显示聊天气泡,另一个显示聊天气泡图标,最后一个显示实际的聊天窗口.那些iframe没有源URL,我猜这个包是由widget javascript创建的第一个iframe提供的.

我遇到了这个问题,部分回答了我的问题.从答案来看,

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

然后,第一个脚本异步加载主代码(iframe代码),而不包含在其中.

我不明白的是,

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

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

3.)一个反应束如何iframe在父DOM中创建反应元素？

Answer 1

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

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