Интеграция представлений с помощью JavaScript

Расширенные примеры встраивания через JavaScript

1. Асинхронная загрузка виджета с динамическим стилем

Пример загрузки контента и CSS через Fetch API с последующей вставкой в shadow DOM.

class AsyncWidget {
  constructor(containerId, widgetUrl) {
    this.host = document.getElementById(containerId);
    this.shadow = this.host.attachShadow({ mode: 'closed' });
    this.widgetUrl = widgetUrl;
    this.load();
  }

  async load() {
    try {
      const [htmlRes, cssRes] = await Promise.all([
        fetch(this.widgetUrl + '/index.html'),
        fetch(this.widgetUrl + '/styles.css')
      ]);
      const html = await htmlRes.text();
      const css = await cssRes.text();

      const style = document.createElement('style');
      style.textContent = css;
      this.shadow.appendChild(style);

      const wrapper = document.createElement('div');
      wrapper.innerHTML = html;
      this.shadow.appendChild(wrapper);

      // Инициализация внутренних скриптов (если есть)
      this.initScripts();
    } catch (err) {
      console.error('Ошибка загрузки виджета:', err);
    }
  }

  initScripts() {
    // Загрузка внешнего JS
    const script = document.createElement('script');
    script.src = this.widgetUrl + '/widget.js';
    script.onload = () => console.log('Скрипт виджета загружен');
    this.shadow.appendChild(script);
  }
}

// Использование
new AsyncWidget('embed', 'https://example.com/widget');

// Результат: В контейнере #embed появляется shadow DOM с изолированным содержимым.

2. Iframe с динамической адаптацией высоты через postMessage

Сторонний iframe обычно имеет фиксированную высоту. Этот пример демонстрирует, как получать размер контента и подстраивать контейнер.

// Основная страница
const iframe = document.createElement('iframe');
iframe.src = 'https://example.com/responsive-widget';
iframe.style.width = '100%';
iframe.style.height = '0'; // временно
iframe.style.border = 'none';
document.body.appendChild(iframe);

window.addEventListener('message', (event) => {
  if (event.origin !== 'https://example.com') return;
  if (event.data.type === 'resize') {
    iframe.style.height = event.data.height + 'px';
  }
});

// Код внутри iframe (widget.html)
function reportSize() {
  const height = document.documentElement.scrollHeight;
  window.parent.postMessage({ type: 'resize', height: height }, '*');
}
window.addEventListener('load', reportSize);
window.addEventListener('resize', reportSize);

// Результат: Высота iframe автоматически соответствует содержимому, без прокрутки.

3. Инкапсуляция стилей с помощью CSS @import внутри shadow DOM

Можно подключать внешние таблицы стилей через @import внутри тега <style>, оставаясь в изоляции.

const host = document.getElementById('widget');
const shadow = host.attachShadow({ mode: 'open' });

const style = document.createElement('style');
style.textContent = `
  @import url('https://fonts.googleapis.com/css2?family=Roboto');
  @import url('/widget-base.css');
  .container { font-family: 'Roboto', sans-serif; }
`;
shadow.appendChild(style);

const div = document.createElement('div');
div.className = 'container';
div.textContent = 'Текст со шрифтом Roboto';
shadow.appendChild(div);

// Результат: Шрифт Roboto применяется только внутри shadow DOM, не затрагивая основную страницу.

4. Встраивание с помощью DocumentFragment для массовой вставки

Когда нужно вставить много элементов без перерисовки, используется DocumentFragment, который затем добавляется в DOM за один раз.

const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const item = document.createElement('div');
  item.textContent = `Элемент ${i}`;
  item.className = 'widget-item';
  fragment.appendChild(item);
}
// Вставка в контейнер
document.getElementById('list').appendChild(fragment);

// Результат: 1000 элементов добавляются мгновенно, без промежуточных перекомпоновок.

5. Встраивание через Service Worker для офлайн-доступа к виджету

Если виджет должен быть доступен без сети, его можно кешировать через Service Worker.

// В основном скрипте регистрируем SW
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js').then(reg => {
    console.log('SW зарегистрирован', reg);
  });
}

// sw.js
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('widget-cache').then(cache => {
      return cache.addAll([
        '/widget.html',
        '/widget.css',
        '/widget.js'
      ]);
    })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(cached => cached || fetch(event.request))
  );
});

// Результат: При повторном посещении виджет загружается из кеша, даже без интернета.