Встраиваемый контент

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>
    
  

Преимущества:

• Оптимизация производительности: ленивая загрузка уменьшает количество загружаемых данных и ускоряет время загрузки страницы
• Сокращение использования ресурсов: позволяет загружать только те элементы, которые пользователь действительно видит и использует

1

Задача

Модуль 1: Web Core, 6 уровень, 6 лекция

Недоступна

Встраивание страницы

Встраивание страницы

Открыть

1

Задача

Модуль 1: Web Core, 6 уровень, 6 лекция

Недоступна

Встраивание видео

Встраивание видео

Открыть