Вбудований контент

7.1 Елемент <iframe>

Елемент <iframe> в HTML використовується для вбудовування іншого HTML-документа в поточний документ. Це дозволяє відображати вміст інших веб-сторінок всередині основного документа, створюючи можливість інтеграції різних ресурсів, таких як відео, карти, документи та інші веб-сторінки.

Елемент <iframe> створює вбудовану рамку, яка може відображати інший HTML-документ. Цей документ може бути завантажений з будь-якої URL-адреси та функціонувати незалежно від основного документа.

Синтаксис:

    
      <iframe src="URL"></iframe>
    
  

Приклад використання:

    
      <iframe src="https://www.example.com" width="600" height="400" title="Приклад iframe"></iframe>
    
  

Атрибути

• src: URL адрес документа, який буде завантажений в <iframe>
• width: ширина фрейму (може бути вказана в пікселях або відсотках)
• height: висота фрейму (може бути вказана в пікселях або відсотках)
• title: короткий опис вмісту фрейму (важливо для доступності)
• name: ім'я фрейму, яке може використовуватись для таргетингу посилань і форм
• sandbox: встановлює обмеження для вмісту фрейму, підвищуючи безпеку
• allow: визначає, які функції можуть бути використані у <iframe> (наприклад, allowfullscreen для повноекранного режиму)

7.2 Атрибут allowfullscreen

Атрибут allowfullscreen дозволяє увімкнути повноекранний режим для вмісту, завантаженого в <iframe>. Без цього атрибуту вміст не зможе перейти в повноекранний режим.

Синтаксис:

    
      <iframe src="https://www.example.com" allowfullscreen></iframe>
    
  

Приклад використання:

    
      <iframe
        width="560"
        height="315"
        src="https://www.youtube.com/embed/dQw4w9WgXcQ"
        allowfullscreen>
      </iframe>
    
  

Повноекранний режим дозволяє користувачу переглядати відео або інші ресурси у повноекранному режимі, що покращує враження від перегляду.

7.3 Атрибут allow

Атрибут allow визначає, які функції можуть бути використані у <iframe>, такі як доступ до геолокації, камери, мікрофону та повноекранного режиму.

Синтаксис:

    
      allow="geolocation; microphone; camera; fullscreen"
    
  

Приклад використання:

    
      <iframe
        src="https://www.example.com"
        allow="geolocation; microphone; camera; fullscreen">
      </iframe>
    
  

Переваги:

• Контроль над функціональністю: дозволяє вказувати, які функції та API можуть бути використані вбудованим вмістом
• Управління дозволами: забезпечує гнучкість в управлінні доступом до різних функцій, таких як геолокація і камера

7.4 Атрибут sandbox

Атрибут sandbox використовується для застосування обмежень до вмісту, завантаженого в <iframe>. Він запобігає виконанню певних дій, таких як виконання скриптів або відкриття спливаючих вікон, тим самим підвищуючи безпеку.

Синтаксис:

    
      sandbox="allow-scripts allow-same-origin"
    
  

Значення атрибута sandbox:

• allow-forms: дозволяє відправку форм
• allow-modals: дозволяє використання модальних вікон
• allow-orientation-lock: дозволяє блокування орієнтації екрана
• allow-pointer-lock: дозволяє захоплення вказівника
• allow-popups: дозволяє відкриття спливаючих вікон
• allow-popups-to-escape-sandbox: дозволяє спливаючим вікнам виходити за межі пісочниці
• allow-presentation: дозволяє доступ до API презентацій
• allow-same-origin: дозволяє виконання сценаріїв з того ж джерела
• allow-scripts: дозволяє виконання сценаріїв
• allow-storage-access-by-user-activation: дозволяє доступ до сховища по активації користувача
• allow-top-navigation: дозволяє навігацію верхнього рівня
• allow-top-navigation-by-user-activation: дозволяє навігацію верхнього рівня по активації користувача

Приклад використання:

    
      <iframe
        src="https://www.example.com"
        sandbox="allow-scripts allow-same-origin">
      </iframe>
    
  

Переваги:

• Безпека: запобігає виконанню потенційно шкідливих скриптів і обмежує функціональність вбудованого вмісту
• Контроль доступу: дозволяє розробникам точно вказувати, які функції дозволені для вбудованого вмісту

7.5 Атрибут loading

Атрибут loading управляє тим, як <iframe> завантажується, дозволяючи відкласти завантаження до тих пір, поки елемент не стане видимим на екрані (ліньова завантаження).

Значення атрибута loading:

• lazy: відкладає завантаження <iframe> до тих пір, поки елемент не стане видимим
• eager: завантаження <iframe> відбувається негайно, незалежно від його видимості

Синтаксис:

    
      loading="статус"
    
  

Приклад використання:

    
      <iframe
        src="https://www.example.com"
        width="600"
        height="400"
        loading="lazy">
      </iframe>
    
  

Переваги:

• Оптимізація продуктивності: ліньова завантаження зменшує кількість завантажених даних і пришвидшує час завантаження сторінки
• Зменшення використання ресурсів: дозволяє завантажувати тільки ті елементи, які користувач дійсно бачить і використовує