Центр поддержки Wix
    Главная
  1. Создание сайта
  2. Editor X
  3. Добавление элементов в Editor X
    4. Editor X: Как добавить элемент HTML iFrame?

Editor X: Как добавить элемент HTML iFrame?

4 мин. чтения
Editor X переходит на Wix Studio, нашу новую платформу для агентств и фрилансеров.Подробнее о Wix Studio
Вы можете отображать визуальный контент с внешних серверов и других источников на вашем сайте в элементе HTML iFrame. Создайте виджет погоды, виджет биржевых котировок, календарь или любой другой настраиваемый элемент. Вы можете встроить фрагмент кола или URL в HTML-элемент.  
В этой статье мы рассмотрим, что необходимо сделать, чтобы добавить iFrame HTML на сайт:

Добавление HTML iFrame

Добавьте iFrame на сайт прямо из панели Добавить. Вы можете выбрать Встроенный виджет, если вы хотите добавить фрагмент кода, или Встроенный сайт, если вы хотите вставить в iFrame адрес веб-сайта.
Важно:
Обязательно ознакомьтесь с нашими рекомендациями и ограничениями перед встраиванием кода на сайт.

Чтобы добавить iFrame HTML:

  1. Нажмите Добавить  в верхнем левом углу редактора.
  2. Нажмите Код и соцсети.
  3. Выберите элемент, который вы хотите добавить на страницу, а затем выполните следующее:

Настройка размера и положения iFrame

С помощью панели Инспектора в правом верхнем углу вы можете управлять размером iFrame и положением элемента на странице. Например, вы можете установить гибкие варианты размеров для iFrame и он будет автоматически адаптироваться к размерам разных экранов.
Вы можете настроить соответствующие параметры по отдельности для каждой платформы (на англ. языке), если поведение HTML-элементов на разных устройствах должно отличаться.
Примечание:
Панель «Инспектор» контролирует размер контейнера iFrame, а не содержимое, которое он демонстрирует.

Настройка размера отображаемого контента

Встроенные элементы часто содержат заранее заданные значения ширины и высоты в пикселях, установленные сервисом, от которого эти значения были получены, как в примере ниже:
1
2
Эти настройки могут потенциально обрезать контент, если размер контейнера iFrame меньше, чем 560 * 315 пикселей. Чтобы этого не произошло, замените значения в пикселях на процентные единицы и установите их на 100%, как показано ниже:
1
2

Рекомендации и ограничения

Ознакомьтесь со следующими рекомендациями и ограничениями, чтобы узнать, как правильно встраивать код в HTML iFrame, будь то адрес веб-сайта или пользовательский код.

Будем рады помочь

  • Убедитесь, что ваш код содержит HTTPS, а не HTTP, иначе он не будет отображаться на сайте.
  • HTML-документы описываются HTML-тегами. Теги HTML чаще всего парные, например Первый тег в паре — это открывающий, а второй — закрывающий. Такой формат тегов важен для сохранения структуры страницы, которую вы хотите вставить.
  • HTML-код содержит основные элементы страницы, но параметры дизайна и другие сложные функции могут храниться отдельно. Следовательно, некоторые элементы могут не функционировать или выглядеть иначе, если соответствующие элементы не включены в основной код HTML, например, CSS и JS-файлы.
  • Код должен быть совместим с HTML5. Большинство браузеров не отображают страницы и скрипты должным образом, если они были написаны с использованием более старых версий HTML.
  • Некоторые сайты имеют настройки безопасности, которые запрещают встраивание на внешних платформах. Эти сайты могут не отображаться в редакторе или на опубликованном сайте после вставки ссылки или кода в HTML-элемент.
  • Если вы не знаете, как использовать атрибут target, вы можете прочитать об этом здесь (на англ. языке) или связаться с авторами кода.
  • Для элементов HTML и встраиваемых элементов нет ограничений по количеству символов.
  • Вы не можете редактировать код внутри элемента HTML в мобильном редакторе.

Ограничения

Код в HTML-элементе отображается на вашем действующем сайте в изолированном iFrame. Использование изолированного элемента защищает посетителей ваших сайтов, созданных с помощью Editor X, от потенциальных побочных эффектов, которые могут быть вызваны пользовательским кодом HTML/JS/CSS.
Как правило, изолированный iFrame блокирует следующее:
  • Использование API браузера
  • Контент с использованием плагинов (через , , , or other)
  • Автоматически запускаемые функции (такие как автоматическое воспроизведение видео или автоматическая фокусировка элемента формы)
Однако мы включили определенные возможности для пользовательского кода в соответствии со спецификациями W3C (на англ. языке):
Песочница
Описание
allow-same-origin
Включает сторонние скрипты/контент сайта
allow-forms
Включает отправку формы
allow-popups
Включает всплывающие окна
allow-scripts
Включает пользовательский код JavaScript
allow-pointer-lock
Включает захват курсора

Была ли статья полезна?

|
В этой статье
  • Добавление HTML iFrame
  • Настройка размера и положения iFrame
  • Настройка размера отображаемого контента
  • Рекомендации и ограничения
  • Будем рады помочь
  • Ограничения