Редактор Studio: добавление элемента HTML iFrame
3 мин.
Отображайте визуальный контент с внешних серверов и других источников в HTML iFrame. Создайте виджет погоды, виджет акций, календарь или любой другой пользовательский элемент. Вы можете встроить сниппет кода или внешний URL.
Вставка кода или сайта
Добавьте iFrame на сайт клиента прямо из панели «Добавить элементы». Выберите, что вы хотите встроить — код или сайт, а затем вставьте код или веб-адрес, чтобы он появился в iFrame.
Важно:
Обязательно ознакомьтесь с нашими рекомендациями и ограничениями перед встраиванием кода.
Чтобы добавить HTML iFrame:
- Нажмите Добавить элементы
слева в редакторе. - Нажмите Вставки и соцсети.
- Выберите элемент, чтобы добавить его на страницу, а затем выполните соответствующие шаги ниже:
Вставить код
Вставить сайт
Настройка размера отображаемого контента
Встроенные элементы часто имеют предустановленную ширину и высоту в пикселях, заданную сервисом, в котором они были созданы, как показано в примере ниже:
1<iframe width="560" height="315"
2 src="https://www.wix.com/studio/academy"
3 frameborder="0">
4</iframe>Эти настройки могут привести к обрезке контента, если контейнер iFrame (на холсте) меньше 560 пикс. * 315 пикс. Чтобы контент не обрезался, замените значения пикс. на проценты и установите их на 100%, как показано ниже:
1<iframe width="100%" height="100%"
2 src="https://www.wix.com/studio/academy"
3 frameborder="0">
4</iframe>
Рекомендации и ограничения
Ознакомьтесь со следующими рекомендациями и ограничениями, чтобы узнать, как правильно встроить код в HTML iFrame, будь то адрес сайта или пользовательский код.
Рекомендации
- Убедитесь, что ваш код содержит HTTPS, а не HTTP, иначе он не будет отображаться на опубликованном сайте.
- Всегда проверяйте, чтобы встраиваемый код был актуальным и совместимым с HTML5. Большинство браузеров некорректно отображают страницы и скрипты, написанные на старых версиях HTML.
- HTML-код содержит основные элементы страницы, но настройки дизайна и другие сложные функции обычно хранятся отдельно. Поэтому некоторые элементы могут не работать или выглядеть иначе, если соответствующие элементы (например, файлы CSS и JS) не включены в HTML-код в качестве ссылки.
- Если вы не уверены, как использовать атрибут target, прочтите об этом здесь или свяжитесь с экспертом, создавшим код.
Ограничения
Код внутри HTML-элемента отображается на сайте клиента в песочнице iFrame. Использование песочницы защищает посетителей от потенциальных побочных эффектов пользовательского кода.
Обычно iFrame в песочнице блокирует следующее:
- Использование API браузера
- Контент, использующий плагины (через
- Функции с автоматическим триггером (например, автоматическое воспроизведение видео или автоматическая фокусировка на элементе управления формой)
Тем не менее, мы включили следующие возможности для пользовательского кода в соответствии со спецификациями W3C:
Песочница | Описание |
|---|---|
разрешить тот же источник | Включает скрипты и контент сторонних сайтов |
разрешить формы | Включает отправку форм |
разрешить поп-апы | Включает поп-апы |
разрешить скрипты | Включает пользовательский код JavaScript |
разрешить блокировку указателя | Включает захват курсора |