Сторонний скрипт. Как это делается?

Question

[prrrrrrr]

Пример: вставляем себе на сайт скрипт какого-нибудь чата (jivosite, chatra - неважно), и он работает вне зависимости от сайта, то есть у него свои стили, у него своя разметка, логика, и он не конфликтует с сайтом и т.п.

Еще один пример: вставляем себе на сайт виджет какого нибудь захватчика (сторонний поп-ап какого нибудь сервиса), где всё аналогично, помещаем скрипт, где своя разметка и стили и нет конфликта.

Понятное дело что это не HTML to JS конвертер. Так вот, как это организовано?

Comments

[VegasChickiChicki]

Подгружается файл стилей и файл скриптов. С помощью скриптов создается DOM структура и стили на нее подтягиваются и там же лежит логика работы этого всего дела.

[Пашенька]

Понятное дело что это не HTML to JS конвертер

Откуда вообще такие странные мысли?

Это реализовано либо с помощью нового документа - iframe, либо инжектится и становится частью текущего документа.

[zkrvndm]

VegasChickiChicki, это один вариант. Другой вариант, это когда весь контент стороннего скрипта выводится в iframe - в этом случае конфликт стилей или корявое отображение невозможно в принципе.

[Владимир Коротенко]

А почему не посмотрите код?
jivosite это ифрейм. Другие инжектят див с уже встроенными css

[prrrrrrr]

Владимир Коротенко,

А почему не посмотрите код?

смотрю пример, но это мало о чём мне говорит

[Владимир Коротенко]

prrrrrrr,
Немного украсьте его.
https://beautifier.io/

[prrrrrrr]

Владимир Коротенко,
всё-равно не совсем понял..

вот нашел другой пример, envybox, всплывающий поп-ап. они предлагают поставить себе на сайт вот это:

<link rel="stylesheet" href="https://cdn.envybox.io/widget/cbk.css">
<script type="text/javascript" src="https://cdn.envybox.io/widget/cbk.js?wcb_code=faedc8f601289ac9be9c3170418c8635" charset="UTF-8" async nomaps></script>

тут со стилями всё понятно. но где находится html-каркас?