Тест

<iframe src="https://company.name/my-widget" frameborder="0" scrolling="no" width="300" height="200"> Ваш браузер не поддерживает фреймы! </iframe>

namespace MyCompany { /** * Виджет кнопки */ class Button { /** * Внутренний id кнопки */ protected id: number; /** * DOM элемент контейнера */ protected containerElement: HTMLElement; /** * Инстанс api */ protected apiInstance: Api; /** * Constructor * @param {Api} instance * @param {string} containerId */ public constructor(instance: Api, containerId: string) { this.apiInstance = instance; this.containerElement = document.getElementById(containerId); } /** * Инициализация */ public init(): void { this.containerElement.innerHTML = 'Виджет кнопки'; } } /** * Основной класс Api */ export class Api { /** * Виджет кнопки * @param {string} containerId * @return {MyCompany.Button} */ public button(containerId: string): Button { const widget = new Button(this, containerId); widget.init(); return widget; } /** * Запуск колбеков инициализации */ public runInitCallbacks(): void { let myCompanyApiInitCallbacks = (window as any).myCompanyApiInitCallbacks; if (myCompanyApiInitCallbacks && myCompanyApiInitCallbacks.length) { setTimeout(function () { let callback; while (callback = myCompanyApiInitCallbacks.shift()) { try { callback(); } catch (e) { console.error(e); } } }, 0); } } } } /** * Инициализация Api */ if (typeof (window as any)['myCompanyApi'] === 'undefined') { (window as any).myCompanyApi = new MyCompany.Api(); (window as any).myCompanyApi.runInitCallbacks(); }

 <!-- в head один раз --> <script async type="text/javascript" src="https://mycompany.site/js/api/api.min.js"></script> <!-- в место вызова виджета --> <div id="button-container-5ef9b197c865f"></div> <script type="text/javascript"> (function() { var init = function() { myCompanyApi.button('button-container-5ef9b197c865f'); }; if (typeof myCompanyApi !== 'undefined') { init(); } else { (myCompanyApiInitCallbacks = window.myCompanyApiInitCallbacks || []).push(init); } })(); </script>