Не секрет, что статическая веб-страница с меньшим количеством контента загружается намного быстрее, чем динамическая страница с изображениями и видео. Но эту проблему можно решить с помощью iFrame.
Что такое iFrame?
iFrame – элемент HTML для отображения контента с другого сайта на своем собственном. Он выглядит как дополнительное окно, через которое пользователь может взаимодействовать с контентом, размещенном на другом сайте.
Получается, что можно создать динамическую страницу, не размещая контент на своем сервере. Таким образом, можно сэкономить место на сервере и повысить скорость загрузки сайта.
Например, если транслировать видео с YouTube на своем сайте, то пользователи смогут просматривать его без дополнительной нагрузки на сервер.
Примеры использования iFrame
Рассмотрим несколько примеров iFrame, которые используются для отображения информации.
Преимущества и недостатки iFrame
В использовании iFrame на WordPress-сайте есть и преимущества, и недостатки.
Преимущества
Позволяет вставлять визуальный контент.
Может отображать несколько рекламных объявлений.
Удобный способ отображения контента из внешнего источника в любом месте сайта.
Безопасно, поскольку у пользователей нет доступа к исходному коду контента.
Недостатки
iFrame могут замедлять веб-страницу.
Могут быть источником опасности, если ведут на вредоносные сайты.
Не все типы устройств поддерживают iFrame.
Ухудшают показатели SEO сайта.
Как вставить iFrame на WordPress-сайт, используя плагин
Существует довольно много подобных плагинов. Мы рассмотрим один из них –Advanced iFrame.
Чтобы установить плагин, просто войдите в панель администрирования WordPress и перейдите в раздел «Плагины» → «Добавить новый» и найдите плагин Advanced iFrame.
После установки и активации плагина перейдите в раздел меню «Advanced iFrame», вкладка «Basic Settings» .
Здесь можно установить ширину, высоту, границы и вид прокрутки iFrame.
Чтобы сохранить необходимые настройки и создать шорткод, нажмите кнопку «Generate a shortcode for the current settings» .
Скопируйте код и вставьте его на страницу сайта, на которой необходимо разместить iFrame.
Ширина и высота iFrame определены внутри шорткода. При необходимости их можно менять вручную.
Вот пример размещения фрейма с помощью шорткода на одной из страниц сайта.
Чтобы изменить ширину или высоту фрейма, поменяйте значения размеров в шорткоде.
Проведем быстрый тест скорости работы WordPress-сайта до и после использования плагина для встраивания iFrame.
Разница в производительности огромна. После использования плагина количество запросов увеличилось с 8 до 98, а показатели производительности снизились с 96 до 86.
Как вручную вставить iFrame на WordPress-сайт
Синтаксис тега iFrame:
Чтобы установить необходимую ширину и высоту фрейма, добавьте в HTML-код соответствующие атрибуты и значения:
Проведем еще один тест скорости работы сайта, чтобы проанализировать производительность сайта до и после встраивания iFrame без помощи плагина.
Встраивание iFrame без помощи плагина демонстрирует практически аналогичные показатели скорости.
Оба метода дают полное представление о том, насколько iFrame могут снизить скорость работы веб-страницы. Но при этом фреймы помогают сэкономить ресурсы сервера и не влияют на производительность сайта в целом
Заключение
В этой статье я рассказал, зачем использовать фреймы на WordPress-сайте, и объяснил их преимущества и недостатки. Также мы рассмотрели два способа добавления iFrame и его влияние на скорость работы сайта.
Как установить frame, iframe на сайт
Фрэймы позволяют легко отображать на вашем сайте информацию с других веб ресурсов, например, погоду, курс валюты или весь сайт. Это бывает незаменимо для организации сложных сайтов или веб программ.
iframe
В современной верстке на html5 используется тег iframe. Сегодня он поддерживается практически всеми браузерами. Частым примером его использования является YouTube, где чтобы поделиться видеороликом используется iframe код.
Задать его на сайте очень просто:
Как видите, достаточно указать лишь ссылку на источник, с которого будет браться информация. За счет атрибутов width и height мы задаем область фрэйма, а frameborder отключает рамку вокруг него. Если высота фрэйма недостаточна для отображения всего содержимого, то появится полоса прокрутки.
На одной странице можно указывать множество таких фрэймов. Однако, с точки зрения поисковой оптимизации фрэймами лучше не увлекаться.
frame
Второй тип фрэймов является предшественником iframe и работает на тегах frameset (это уже устаревающий вариант). Для организации таких фрэймов создайте отдельную страницу и пропишите следующий код:
Важной особенностью работы таких фрэймах является отсутствие тегов и на странице. Здесь мы видим, что подключаются сразу два сайта внутри frameset. В нем rows означает, что фрэймы будут распологаться друг за другом в строковом виде (если поставить cols — то стобиками). 20%,80% — первый фрэйм займет 20% всего пространства, а второй 80%. Если поставить *,* — то пространство поделится поровну.
Как встроить iFrame на WordPres-сайт вручную и с помощью плагинов
В этом руководстве мы объясним, что такое iFrames и как использовать его на сайте WordPress.
Что такое iFrames?
IFrame позволяет отображать содержимое одной веб-страницы на другой веб-странице. Для этого потребуется специальный HTML-тег, URL-адрес источника и параметры отображения контента.
Чаще всего iFrames используется для вывода чужого контента на сайте. Встраивание контента с помощью iFrame не считается нарушением авторских прав.
Кроме этого iFrames позволяет реализовать массовый открытый доступ к содержимому больших файлов видео, аудио или изображения. YouTube является ярким примером применения данной технологии.
Также iFrame позволяет отображать содержимое файла на сайте, не размещая его на собственном сервере. Это значительно экономит дисковое пространство и не снижает скорость работы сайта.
Как использовать iFrames в WordPress
Рассмотрим три наиболее распространенных способа добавления iFrames на WordPress- сайт.
1. Вручную
Чтобы самостоятельно добавить iFrame на страницу сайта, используется следующий HTML-тег. Например:
Но следует учитывать, что с помощью iFrames может отображать контент только с сайтов, использующих ту же версию протокола HTTP. Например, если сайт использует протокол HTTPS, то получится встраивать контент только с площадок на HTTPS.
Кроме этого некоторые сайты (в том числе Facebook и YouTube) отключают возможность ручного встраивания iFrame. Попытка отобразить на своем сайте страницу с такого ресурса приведет к выводу сообщения об ошибке.
Поддержка iFrame отключена.
Вы также можете настроить параметры отображения iFrame:
Width — устанавливает ширину области iFrame (в пикселях).
Height — определяет размер окна iFrame на веб-странице (в пикселях).
Allow – устанавливает определенное поведение или функции по умолчанию для iFrame, такие как полноэкранный просмотр или обработка платежей.
Importance – установка приоритета загрузки iFrame браузером.
Например, вот как будет выглядеть исходный код iFrame с размером окна 900 на 700 пикселей с включенным полноэкранным просмотром, который загружается после остальной части веб-страницы.
Как выглядит iFrame на веб-странице.
Есть и другие параметры, которые также можно использовать. Но перечисленные выше параметры позволяют создавать базовые iFrame для размещения YouTube- видео или другого контента.
2. Использование специализированного кода для встраивания iFrames
Некоторые сайты устанавливают запрет на отображение их содержимого с помощью iFrame. Но это ограничение можно обойти, если использовать специализированный код для встраивания, предоставляемый этими площадками.
В качестве примера рассмотрим, как это работает в YouTube. Перейдите к видео, которое вы хотите отобразить. Под окном видеоплеера найдите кнопку « Поделиться» и нажмите на нее .
После этого YouTube отобразит HTML-код для добавления видео в iFrame с заданными параметрами. Также можно использовать только исходный URL-адрес.
Код для встраивания YouTube
Чтобы добавить ролик в WordPress-сайта, вставьте скопированный код iFrame c с помощью блока пользовательского HTML :
Встраивание iframe в качестве блока пользовательского HTML
В классическом редакторе WordPress необходимо переключиться в текстовый режим и добавить код в нужное место.
Встраивание iframe в классическом редакторе.
В результате вы должны получить работающий iFrame.
iFrame правильно добавлен в WordPress
Таким же образом можно встроить на свой сайт пост из Facebook. Для этого перейдите к посту, которым вы хотите поделиться, и нажмите на три точки в верхнем правом углу.
Функция встраивания в Facebook
Затем выберите вариант « Вставить на сайт» .
Выберите функцию встраивания Facebook
После этого будет отображен фрагмент HTML. Исходный URL-адрес является наиболее важной частью кода. Хотя можно использовать дополнительные параметры.
Код iframe Facebook
Добавьте этот код на страницу сайта.
Iframe Facebook встроен в WordPress
3. Добавление iFrame в WordPress с помощью плагина
Наиболее популярным решением является плагин iFrame:
Плагин iframe для WordPress
Этот плагин позволяет добавлять iFrame на WordPress- сайт с помощью шорткодов. Вы можете указать те же параметры, что и при добавлении iFrame вручную. При этом не нужно работать с кодом напрямую.
Также можно попробовать плагин Advanced iFrame:
Плагин WordPress Advanced iFrame
Он позволяет добавлять iFrame на сайт, используя шорткоды. Плагин также включает в себя несколько дополнительных функций: коды безопасности для предотвращения встраивания iFrame другими пользователями, а также параметры пользовательского стиля и многое другое.
Заключение
В этой статье мы рассмотрели три метода встраивания iFrame в WordPress:
Вручную.
С помощью специального кода для встраивания.
С помощью плагинов WordPress.
Как встроить страницу через
Тег позволяет встраивать контент (например, веб-страницы, видео) прямо в ваш документ HTML.
Простейший пример использования :
Атрибут src задаёт URL-адрес страницы, которую вы хотите встроить.
Атрибуты width и height — ширина и высота фрейма (можно задавать как в пикселях, так и в процентах).
Другие атрибуты
sandbox
Это важный атрибут с точки зрения безопасности. Он позволяет контролировать, какие активности разрешены внутри .
Значение allow-scripts разрешает выполнение скриптов внутри фрейма, а allow-same-origin позволяет фрейму обращаться к ресурсам его исходной страницы.
loading
Атрибут loading может помочь с оптимизацией производительности и отложить загрузку iframe до тех пор, пока это не будет необходимо.
allowfullscreen , allowpaymentrequest
Здесь всё просто и следует из названия:
allowfullscreen : позволяет встроенному контенту открываться в полноэкранном режиме.
allowpaymentrequest : позволяет встроенному контенту делать запросы на оплату.
title
Не забывайте об универсальных атрибутах, таких как title , которые способствуют улучшению доступности.
Стилизация
можно стилизовать, как и любой другой элемент. Но помните, что стили вашей родительской страницы не применяются к содержимому , и вы не сможете его стилизовать через CSS в родительском документе.
iframe
Отслеживание событий загрузки
Вы можете отслеживать событие load для , чтобы знать, когда встроенный контент загружен.
document.querySelector('iframe').addEventListener('load', function() < console.log('Iframe is loaded!'); >);
Полезные ссылки
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Контейнер для чего угодно. Тег
Тег определяет раздел или секцию в HTML-документе. Это контейнер, который используется для группировки других элементов, таких как текст, изображения или другие теги, в разделы или блоки.
Заголовок секции
Какое-нибудь содержимое секции
6 октября 2023
Как добавить подпись в HTML. Тег
Описание изображения
Устаревший атрибут align — выравнивание подписи относительно элемента .
Тег может использоваться только внутри элемента .
Валидный HTML требует, чтобы тег находился после элемента или других медиа-элементов внутри . Однако это необязательное правило, и подпись может располагаться перед медиа-элементом или даже внутри него.
6 октября 2023
Метаданные HTML-страницы. Тег
Тег содержит метаданные о документе HTML. Он может включать такую информацию, как имя автора, название документа, ключевые слова и набор символов.
Атрибуты тега :
charset — кодировка символов в документе.
name — имя метаданных.
content — значение метаданных.
http-equiv — HTTP-заголовок для значения атрибута content .
Атрибут charset должен быть первым атрибутом в теге , а name и http-equiv нельзя использовать вместе.
4 октября 2023
Просто кнопка. Тег
Тег создаёт кликабельную кнопку, которая может запускать действия или события на веб-странице. Например, отправку или перезагрузку формы, запуск функции, открытие нового окна или добавление товара в корзину.
Атрибуты тега :
name — имя кнопки.
type — тип кнопки, по умолчанию — submit . Атрибут type необходим, если указан атрибут value .
value — значение, которое будет отправлено на сервер при нажатии на кнопку.
disabled — указывает, что кнопка должна быть отключена.
form — одна или несколько форм, к которым принадлежит кнопка.
formaction — URL-адрес файла, который будет обрабатывать ввод при нажатии кнопки.
formenctype — указывает, как данные формы должны быть закодированы при отправке на сервер.
formmethod — метод HTTP, используемый при отправке данных формы.
formnovalidate — устанавливает, что данные формы не должны проверяться при отправке на сервер.
formtarget — указывает, где отображать ответ после отправки формы.
4 октября 2023
Независимый контент. Тег
Тег в HTML используется для выделения содержимого, которое является независимым и самодостаточным. Это означает, что такой контент может быть переиспользоваться в разных местах без потери смысла.
Заголовок статьи
Текст статьи.
Тегом размечают статьи в блогах, сообщения на форумах и другие материалы, которые имеют смысл и ценность, даже если они прочитаны вне контекста, в котором были созданы.
Не используйте для группировки элементов, которые не являются самостоятельными материалами, например, для списка продуктов или новостей.
3 октября 2023
Выпадающий список. Тег
Тег используется для создания выпадающего списка. Этот тег содержит список опций, которые пользователь может выбрать. Когда пользователь выбирает опцию, выбранное значение отправляется на сервер или обрабатывается на клиентской стороне.
Все опции списка должны быть обёрнуты в тег .
Атрибуты тега :
autocomplete — подсказка для функции автозаполнения формы;
disabled — делает элемент неактивным;
form — связывает список с формой;
multiple — позволяет выбрать несколько опций;
name — задает имя элемента, которое будет отправляться на сервер;
required — делает элемент обязательным для заполнения;
size — задает количество строк в списке.
1 октября 2023
Встроенные CSS-стили для страницы с тегом
Тег используется для определения стилей для HTML-документов. Он является важным компонентом CSS, которые позволяют разработчикам создавать визуально привлекательные веб-страницы, определяя различные стили, такие как цвета, шрифты и макеты.
body
Добро пожаловать на мой сайт!
Атрибуты тега :
type — MIME-тип таблицы стилей.
media — типы носителей, для которы будет использоваться стиль.
29 сентября 2023
Изображение в HTML. Тег
Элемент используется для вставки изображений на веб-страницы.
У нет закрывающего тега. Он поддерживает изображения в различных форматах — например, JPEG, PNG, WebP, GIF, SVG.
Существуют определенные правила или стандарты использования тега , которые рекомендуются для большинства случаев в веб-разработке. Несмотря на то что конкретные требования могут варьироваться в зависимости от проекта, ниже приведены атрибуты и практики, которые часто рекомендуются к использованию.
