Я пишу чат-виджет, который будет распространяться среди конечных пользователей с небольшим кодом для размещения на своем сайте. Обычная рутина.
Мой виджет будет написан в React. Я знаю несколько способов добиться этого. Позвольте мне перечислить способы, о которых я мог думать.
- Дайте фрагмент кода с прямым iframe и URL-адресом источника. Проблема с этим подходом заключается в том, что он может использоваться только в том случае, если виджет встроен. Если виджет должен быть всплывающим, гибкость будет потеряна.
- Дайте фрагмент кода с асинхронным загрузкой javascript. Javascript создаст iframe на родительской веб-странице и может быть установлен src. Этот виджет javascript может иметь небольшой интеллект. Это обычный подход, за которым следуют большинство разработчиков виджетов.
Конечно, URL-адрес источника будет отображать страницу React, которая в комплекте с webpack в любом случае.
Я хотел узнать лучшие практики разработки виджета. Поэтому я прошел через его популярные реализации. Мне понравился Intercom виджет. Это написано в Реакт. Я проанализировал, как это работает.
Минимальный javascript загружается async на веб-страницу. Он вводит iframe с идентификатором intercom-frame. Этот iframe имеет script в нем с исходным текстом URl. Очевидно, что это React bundle.
То, что я не понимаю, ниже этого iframe, a div создается с тремя iframes в нем. Один, чтобы показать чат-пузырь, другой, чтобы показать значок чата, последний, чтобы отобразить фактическое окно чата. Те iframe не имеют исходного URL-адреса, и я предполагаю, что пакет отправлен из первого iframe, созданного виджетами javascript.
Я наткнулся на этот вопрос SO, который частично отвечает на мой вопрос. Из ответа
выставлять некоторые API между вашей веб-страницей клиента и вашим iframe, используя обмен сообщениями через окна.
основной код (код iframe) затем загружается этим первым scriptасинхронно и не включается в него.
Я не понимаю,
1.) Как они достигли бы этого при обмене оконными сообщениями?
2.) Как им удалось создать div с iframe в нем, из другого iframe script?. Виджет javascript не создает эти элементы, основываясь на этом источнике. Это должно было быть сделано пакетом React в iframe, сгенерированном виджетами js.
3.) Как реагирующий пакет внутри iframe может создавать реагирующие элементы в родительском DOM?