與react.js聊天小部件

Question

我正在編寫一個聊天小部件，它將分發給最終用戶，只需要很少的代碼放入他們的網站。 通常的常規。

我的小部件將用React編寫。 我知道實現這一目標的幾種方法。 讓我列出我能想到的方式。

• 提供直接使用iframe和源網址的代碼段。 這種方法的問題是，只有在嵌入小部件時才能使用它。 如果需要彈出窗口小部件，則會失去靈活性。
• 提供一個代碼片段，其中包含異步加載的javascript。 Javascript將在父網頁中創建一個iframe，並且可以設置src。 這個小部件javascript幾乎沒有智能。 這是大多數小部件開發人員遵循的常用方法。

當然，在任何一種情況下，源URL都將呈現一個由webpack捆綁的React頁面。

我想知道開發小部件的最佳實踐。 所以我經歷了它的流行實現。 我非常喜歡Intercom的小部件。 它是用React編寫的。 我分析了它是如何工作的。 最小的javascript在網頁上加載異步。 它是用id intercom-frame注入一個iframe 。 iframe的頭部有一個帶有源URl的腳本 。 顯然它是React捆綁。

我不明白的是，在這個iframe下面，一個div創建了三個iframes 。 一個顯示聊天氣泡，另一個顯示聊天氣泡圖標，最后一個顯示實際的聊天窗口。 那些iframe沒有源url，我猜這個bundle是由widget javascript創建的第一個iframe提供的。

我遇到了這個問題 ，部分回答了我的問題。 從答案來看，

使用窗口消息在您的客戶網頁和您的iframe之間公開一些API。

然后，第一個腳本異步加載主代碼（iframe代碼），而不包含在其中。

我不明白的是，

1.）他們如何通過窗口消息實現它？

2.）他們如何設法用iframe的另一個iframe來創建一個包含iframe的div ？ 小部件javascript不會根據它的來源創建這些元素。 它應該由widget js生成的iframe中的React包完成。

3.） iframe的react bundle如何在父DOM中創建react元素？

Answer 1

Intercom的腳本創建的iframe都沒有src屬性，這意味着它們不受同一原始策略的約束。 因此，他們可以修改父頁面html，反之亦然。

但是，我不明白他們為什么需要單獨的iframe 。 為什么使用腳本注入另一個注入主要html內容的腳本。 第一個腳本是否有足夠的能力注入html內容？ 我很想對這些事情感到輕松。