Что не позволяет сделать iframe в браузере

Обновлено: 23.11.2024

Поскольку новый параметр политики по умолчанию внедряется, а клиенты обновляют браузер на своих компьютерах, планшетах и телефонах, некоторые разработчики DocuSign обнаруживают, что их приложения больше не работают должным образом, особенно с некоторыми моделями использования iframe. Это связано с тем, что DocuSign использует политику реферера браузера по умолчанию.

Новая политика реферера в первую очередь затрагивает разработчиков, которые проверяют заголовок реферера [sic] для проверки параметра запроса события, отправляемого DocuSign, когда подписывающая сторона завершает встроенную церемонию подписания. (Да, имя заголовка должно было быть написано правильно в первую очередь как заголовок реферера. Но в интересах обратной совместимости заголовок реферера с неправильным написанием остается.)

С новой настройкой заголовка Referrer-Policy заголовок Referrer больше не включает параметры запроса со ссылающегося веб-сайта.

Решение проблем

Существует несколько уровней решения проблем, с которыми сталкивается новая политика браузера:

Не используйте iframe

В наши дни, особенно для встроенной церемонии подписания, фреймы iframe нужны редко: они менее доверительны для пользователей, поскольку подписывающий не может видеть URL-адрес DocuSign; они позволяют использовать кликджекинг; и они не поддерживают некоторые важные функции DocuSign, такие как проверка личности. Подобно проблемам с использованием встроенной церемонии подписания DocuSign, стандарт безопасности OAuth запрещает iframe. См. RFC 6819 § 4.4.1.9.

Обычно лучшим решением является либо перенаправление браузера на URL-адрес церемонии подписания, либо открытие новой вкладки в браузере для церемонии подписания. Новый пример кода React демонстрирует оба метода обработки потока аутентификации OAuth.

Если вы все же решите использовать iframe, настройте iframe на использование 100 % ширины и высоты экрана, чтобы свести к минимуму проблемы с UX. Это особенно важно для приложений, которые можно использовать в браузерах мобильных устройств или планшетов.

Не используйте параметр запроса события для принятия бизнес-решений

Как указано в Центре разработчиков и в примерах кода, параметр запроса события не следует использовать для принятия бизнес-решений, поскольку он не имеет криптографической подписи и может быть подделан злоумышленником. Вместо этого, чтобы определить статус конверта или то, подписал его конкретный подписывающий или нет, либо найдите информацию из DocuSign с помощью API, либо используйте аутентифицированное сообщение веб-перехватчика Connect от DocuSign. Параметр запроса события следует интерпретировать только как подсказку о действии подписывающей стороны.

Обратите внимание, что уведомления о веб-перехватчиках не должны блокировать UX: не заставляйте пользователей ждать, пока не будет получено уведомление о веб-перехватчиках. Но если вам нужно немедленно узнать статус конверта, просто вызовите соответствующий API DocuSign: Envelopes: get, listStatus или listStatusChanges.

Перенаправить браузер

Позже, после того как подписывающая сторона завершит церемонию подписания, DocuSign перенаправит вас к вашему приложению и включит параметр запроса события. На этом этапе ваше приложение должно определить, вызывается ли оно впервые или вызывается после церемонии подписания. Ваше приложение должно найти свое состояние в хранилище сеансов, а затем продолжить работу после завершения церемонии подписания.

При необходимости церемония подписания DocuSign может проверить связь с вашим приложением (из браузера), чтобы поддерживать сеанс пользователя и состояние в вашем приложении, пока подписывающая сторона взаимодействует с церемонией подписания. См. pingUrl и связанные с ним атрибуты.

Использовать Window.postMessage

Еще один вариант: вместо заголовка реферера используйте Window.postMessage для связи между iframe или новой вкладкой браузера и родительской вкладкой браузера, которую использует ваше приложение. Этот процесс демонстрируется на примере нового кода React:

Когда ваше приложение запускается, оно использует window.addEventListener для прослушивания сообщений. Вот пример кода.
Позже ваше приложение создает новую вкладку браузера (рекомендуется) или iframe и сохраняет полученный объект окна в переменной. Начальный URL-адрес веб-страницы — это URL-адрес встроенной церемонии подписания DocuSign. returnUrl не является URL-адресом вашего приложения. Вместо этого это промежуточная простая веб-страница с программой JavaScript. Эта программа JavaScript вызывает Window.postMessage для отправки параметров запроса (из встроенной церемонии подписания) на родительскую страницу (ваше приложение). Вот пример кода промежуточной страницы. Чтобы отправить параметры запроса, используйте window.location.search вместо window.location.hash из примера.
Когда сообщение отправлено, метод прослушивания вашей веб-страницы получает и обрабатывает сообщение. В конце концов он закрывает вкладку, открытую на шаге 2, используя метод Window.close для объекта окна дочерней вкладки, сохраненного на шаге 2.

Обзор

Не используйте заголовок referer [sic]. Вместо этого существует несколько шаблонов программного обеспечения, которые позволят вашему приложению безопасно использовать встроенную церемонию подписания без iframe (рекомендуется) или с iframe, если это необходимо.

Я работаю с HTML для веб-сайта, который редактирую, и при попытке встроить видео получаю код "Ваш браузер не поддерживает iFrames".

Я поговорил с техническим специалистом на сайте, и они не столкнулись с той же проблемой, поэтому по какой-то причине она изолирована от меня. Я пробовал и Safari, и Chrome, и, согласно проведенному мной исследованию, оба должны поддерживать iframe. Я не видел много других проблем в Google, на форумах или где-либо еще, поэтому нигде не могу найти никакого подобия решения. Кажется, это не имеет смысла. У меня Macbook Pro retina, ему около года. Нет причин, по которым он не должен его поддерживать.

Буду рад любым советам. Спасибо.

MacBook Pro (Retina, 13 дюймов, конец 2013 г.), iOS 8.1

Опубликовано 14 ноября 2014 г., 21:48

Все ответы

Загрузка содержимого страницы

Содержимое страницы загружено

Я думаю, что вы можете делать поспешные выводы.

В вашем фрагменте кода текст "Ваш браузер не поддерживает iframe". НЕ означает, что ВАШ браузер не поддерживает IFRAMES. Это означает, что когда посетитель сайта с очень старой версией браузера посещает ваш сайт, ОНИ увидят это сообщение вместо содержимого iframe.

Я думаю, вы сбиваете с толку тот факт, что код, который вы копируете и вставляете в исходный код вашего веб-сайта, буквально не применяется к вам при редактировании вашего сайта.

Если вы просматриваете свой сайт как обычный посетитель, вы не увидите это сообщение, если только у вас не ОЧЕНЬ старый браузер. Каждый современный браузер поддерживает IFRAMES.

Единственное, что я вижу, что может привести к странному результату в современном браузере, это то, что атрибут "frameborder" не поддерживается в HTML5. Вот некоторые справочные материалы:

14 ноября 2014 г., 22:36

Спасибо за ответ, но я не думаю, что это так. Когда технические специалисты сайта зашли туда в качестве редактора, они не получили такой же ошибки. Они увидели превью видео и код таким, каким он должен был быть. И, спрашивая некоторых других авторов об этой проблеме ранее, они не видят ошибки iframe в коде, несмотря на то, что получили ее из того же источника видео.

И на самом деле, я решил просто кинуть пост с кодом, о котором идет речь, а потом пойти и посмотреть его на сайте, а он не показывался, значит ошибка осталась. По какой-то причине мой компьютер/браузер не работает с iframe.

14 ноября 2014 г., 22:42

Просмотрите следующую страницу и дайте мне знать, если увидите сообщение "Проверить страницу в iframe":

Если вы видите его, значит, ваши браузеры работают нормально, и нам нужно выяснить, что нарушает ваш опубликованный код, когда вы его сохраняете, но до того, как вы его просмотрите.

Если вы его не видите, нам нужно выяснить, почему ваши браузеры не работают с iframe (и Safari, и Chrome, безусловно, работают).

20 ноября 2014 г., 22:14

Я вижу это сообщение в обоих браузерах.

После публикации этого я обнаружил, что если я использую Chrome при вставке кода, он будет отображаться для меня, а Safari - нет. Я просто предположил (ошибочно), что появление сообщения «Ваш браузер не поддерживает фреймы» при получении кода для встраивания из видео означает, что оно не будет работать в Chrome, и только позже я действительно попытался опубликовать его в Chrome.

Но мне все равно странно, что Safari его не поддерживает. Я имею в виду, что тот факт, что я вижу сообщение iframe, на которое вы ссылаетесь, говорит мне, что так и должно быть, и в моем исследовании у меня был подобный опыт, но это не имеет смысла, поскольку я не могу создать их сам в Safari.

20 ноября 2014 г., 22:22

Отлично. По крайней мере, мы сузили это до одной проблемы. У вас просто возникла проблема с «публикацией HTML-кода, содержащего iFrame, на странице вашего веб-сайта при использовании Safari». Теперь мы можем сосредоточиться на этом.

Первое, на что следует обратить внимание, — есть ли различия между настройками, расширениями или плагинами Safari и Chrome? Кроме того, вы можете поискать любые известные несовместимости вашего инструмента веб-редактирования или CMS и Safari. Если ваш веб-сайт не основан на очень старой технологии, я сомневаюсь, что возникнут какие-либо проблемы с конкретным современным браузером, но проверить не помешает.

Милан с детства увлекался ПК, и это побудило его проявить интерес ко всем технологиям, связанным с ПК. До прихода в WindowsReport он работал веб-разработчиком. Подробнее

iFrame не работает в Chrome? Самым простым решением было бы попробовать совершенно другой браузер.
Но если вы хотите решить проблему с неработающим iFrame в Chrome, внимательно изучите свои расширения.
Когда iFrames блокируются браузером Chrome, проблема также может быть вызвана неожиданной стороной, например антивирусом.
Если вы по-прежнему видите сообщение об ошибке этот файл можно просмотреть только в iFrame, убедитесь, что этот параметр включен. Вот как включить iFrame в Chrome.

Проблемы с вашим текущим браузером? Обновите браузер до лучшего: Opera Вы заслуживаете лучшего браузера! 350 миллионов человек ежедневно используют Opera — полнофункциональную навигацию с различными встроенными пакетами, повышенным потреблением ресурсов и великолепным дизайном. Вот что умеет Opera:

Простая миграция: используйте ассистент Opera для переноса существующих данных, таких как закладки, пароли и т. д.
Оптимизируйте использование ресурсов: ваша оперативная память используется более эффективно, чем в других браузерах.
Повышенная конфиденциальность: бесплатный и безлимитный встроенный VPN
Без рекламы: встроенный блокировщик рекламы ускоряет загрузку страниц и защищает от интеллектуального анализа данных.
Удобство для игр: Opera GX — первый и лучший браузер для игр.
Скачать Opera

Большое количество пользователей сообщают о возникновении проблем при попытке использовать iFrames в своих HTML-документах. В сообщении говорится, что этот файл можно просматривать только в iFrame.

Кроме того, во многих браузерах появляется сообщение об ошибке Браузер не поддерживает iFrames.

Эта проблема в основном связана с Google Chrome, но также может затронуть пользователей Mozilla.

Функции безопасности этих браузеров были настроены на блокировку всего незашифрованного содержимого зашифрованных веб-сайтов.

Итак, в этой статье мы покажем вам, как именно включить iFrame в Chrome. Кроме того, мы рассмотрим некоторые из наиболее зарекомендовавших себя методов решения этой и подобных проблем, например:

Интерфейсы iFrames блокируются браузером Chrome. В большинстве случаев Google Chrome блокирует iFrames. Если это и ваша проблема, отключите, а затем снова включите iFrames в разделе «Свойства обозревателя».
iFrame не работает в Chrome. Скорее всего, вам знакома эта ошибка. Убедитесь, что вы избавились от него сразу же, остановив антивирусную службу или используя совершенно другой браузер.
Включить iFrame в Chrome. Chrome случайным образом отклоняет iFrame, поэтому обязательно включите его. В связи с этим загрузите надстройки, как описано выше.

Что делать, если iFrames блокируются браузером Chrome?

1. Попробуйте другой браузер

Если у вас возникли проблемы с iFrames, возможно, переключение на другой браузер может решить эту проблему.

Браузер Opera обеспечивает высокий уровень безопасности, но менее навязчив, чем его аналоги, и имеет более широкий диапазон совместимости. Поэтому он легко поддерживает iFrames.

Кроме того, программное обеспечение имеет защиту от отслеживания и встроенный VPN, так что вы можете быть уверены, что ваши действия в Интернете полностью конфиденциальны.

Лучше всего то, что браузер построен на движке Chromium и поддерживает все функции Chrome, поэтому обязательно попробуйте его.

Опера

Если ваш текущий браузер не поддерживает iFrames, Opera может вас удивить. Попробуйте!

2. Отключить/включить iFrames в настройках Интернета

3. Остановите антивирусную службу

4. Отключите все надстройки в вашем браузере

5. Загрузите надстройки, чтобы разрешить iFrames

В этой статье мы рассмотрели некоторые из наиболее зарекомендовавших себя способов решения проблемы, вызванной тем, что ваш браузер не позволяет вам использовать/показывать окна iFrames.

Неукоснительно следуйте этим шагам, чтобы решить проблему, из-за которой iFrame не работает в Chrome.

Не стесняйтесь поделиться с нами своим опытом, используя раздел комментариев ниже.

По-прежнему возникают проблемы? Исправьте их с помощью этого инструмента:

Элемент iframe (сокращение от встроенного фрейма), вероятно, является одним из старейших тегов HTML и был представлен в 1997 году в HTML 4.01 Microsoft Internet Explorer.

Несмотря на то, что все современные браузеры их поддерживают, многие разработчики пишут бесконечные статьи с советами против их использования.

Я считаю, что их плохая репутация не должна мешать вам полагаться на них. У них есть много законных вариантов использования.

Кроме того, защитить их не так сложно, так что вам не придется беспокоиться о заражении компьютера вашего пользователя.

Чтобы помочь вам сформировать собственное мнение и отточить свои навыки разработчика, мы расскажем обо всем, что вам следует знать об этом противоречивом теге.

Мы рассмотрим большинство функций, предоставляемых элементом iframe, и поговорим о том, как вы их используете, а также о том, как iframe может быть полезен для преодоления некоторых сложных ситуаций. Наконец, мы поговорим о том, как защитить iframe, чтобы избежать потенциальных уязвимостей.

Что такое iframe и когда вы его используете?

Разработчики в основном используют тег iframe для встраивания другого HTML-документа в текущий.

Возможно, вы столкнулись с ним, когда вам нужно было включить сторонний виджет (например, известную кнопку "Мне нравится" в Facebook), видео YouTube или рекламный раздел на вашем веб-сайте.

Например, приведенный ниже код будет отображать квадрат со стороной 500 пикселей, внутри которого находится главная страница Google:

Вот еще один пример, в котором мы показываем кнопку, позволяющую отправить твит вашей веб-страницы в Twitter:

Мы сделали специальное демо для .
Нет, правда. Нажмите здесь, чтобы проверить это .

Что вы должны иметь в виду, когда думаете о iframe, так это о том, что он позволяет вам встраивать независимый HTML-документ с его контекстом просмотра.

Таким образом, он будет изолирован от JavaScript и CSS родителя. Это одна из допустимых целей использования iframe: обеспечить меру разделения между вашим приложением и содержимым iframe.

Тем не менее, как вы увидите в этом руководстве, разделение не такое уж идеальное.

iframe по-прежнему может вести себя раздражающим или злонамеренным образом: например, вызывать всплывающее окно или автоматически воспроизводить видео.

Чтобы проиллюстрировать, насколько удобна эта изоляция от JavaScript и CSS, давайте рассмотрим следующие две ситуации:

В приложении пользователь может создавать электронные письма и сохранять их как шаблоны. На определенной странице мне нужно было перечислить их, чтобы он мог просмотреть и выбрать одну из них.

Но чтобы CSS текущего веб-сайта не влиял на стиль этих шаблонов, я понял, что использование iframe с атрибутом srcdoc было бы самым правильным решением.

Другая ситуация, когда фреймы спасли мне жизнь, была, когда мне нужно было создать WYSIWYG-редактор для клиента. Но проблема с этими редакторами в том, что вам нужно найти способ сохранить фокус и выделение, когда пользователь нажимает все кнопки в интерфейсе.

Поскольку iframe предлагает изолированную среду, это означает, что фокус или выделение никогда не теряются, когда вы щелкаете за его пределами.

Используя события связи между iframe и родительским элементом (подробнее о том, как это сделать далее в этой статье), мне удалось быстро разработать мощный редактор.

Атрибуты, которые вам нужно знать

На сегодняшний день существует восемь атрибутов, которые мы можем использовать для настройки поведения или стиля iframe.

Примечание. По умолчанию элемент iframe имеет рамку вокруг себя. Чтобы удалить его, вы можете использовать атрибут стиля, чтобы задать для свойства границы CSS значение none.

события iframe и общение

Загрузка и ошибки

Поскольку iframe — это документ, вы можете использовать большинство глобальных обработчиков событий.

Когда вы инициируете iframe, два из них пригодятся для улучшения работы, например отображение счетчика или специального сообщения для помощи пользователю:

Событие ошибки, которое запускается при сбое загрузки.

Вы можете прослушивать их с атрибутами onload и onerror соответственно:

Или если вы можете программно добавить слушателей в iframe.

Взаимодействие с iframe

Отправлять сообщения между родителем и iframe довольно просто. Вы должны использовать функцию postMessage, которая описана здесь.

От родителя к iframe

Отправить сообщение из родительского элемента:

И слушайте в iframe:

От iframe к родительскому

Отправить сообщение из iframe:

И слушайте его в родительском:

Примечание. Имейте в виду, что вы можете оказаться в некоторых сложных ситуациях, когда вам нужно что-то отладить, поскольку сообщения работают по принципу "отправил и забыл" (т. е. нет реальной обработки ошибок).

Безопасность

Когда вы используете iframe, вы в основном имеете дело с контентом, поступающим от третьих лиц, которые вы не можете контролировать.

Таким образом, вы увеличиваете риск наличия потенциальной уязвимости в вашем приложении или просто вынуждены иметь дело с неудобным взаимодействием с пользователем (например, с раздражающим автоматическим воспроизведением видео).

К счастью, вы можете внести определенные функции в черный или белый список.

Вы должны использовать песочницу и разрешить атрибуты, которые мы обсуждали ранее.

Имейте в виду, что хорошее эмпирическое правило заключается в том, чтобы всегда предоставлять минимальный уровень возможностей, необходимый ресурсу для выполнения его работы. Эксперты по безопасности называют эту концепцию «принципом наименьших привилегий».

Атрибут песочницы

Вот полный список флагов песочницы и их назначения:

< td>Разрешает отправку формы.< td>allow-presentation

Флаг	Подробности
разрешить-формы
allow-modals	Разрешает ресурсу открывать новые модальные окна.
allow-orientation-lock	Разрешает ресурсу блокировать ориентацию экрана.
allow-pointer-lock	Разрешает ресурсу использовать API блокировки указателя.
allow-popups	Разрешает ресурсу открывать новые всплывающие окна или вкладки.
allow-popups-to-escape-sandbox	Разрешает ресурсу открывать новые окна, которые не будут наследовать песочницу.
Разрешает ресурсу начать сеанс презентации.
allow-same-origin	Разрешает ресурсу чтобы сохранить его происхождение.
allow-scripts	Разрешает ресурсу запускать сценарии.
allow-top-navigation	Разрешает ресурсу перемещаться по контекст wsing.
разрешить навигацию на верхнем уровне по активации пользователя	Разрешает ресурсу перемещаться по контексту просмотра верхнего уровня, но только если инициируется жестом пользователя.

Вы сами определяете, какие привилегии вы можете предоставить каждому iframe.

Например, если вашему iframe нужно только отправлять формы и открывать новые модальные окна, вот как вы настроите атрибут песочницы:

В ситуации, когда атрибут песочницы настроен, а одна функция в ресурсе работает неправильно, это может быть связано с отсутствием определенного флага.

Убедитесь, что вы знаете о них больше, чтобы быстро устранять неполадки.

Кроме того, имейте в виду, что использование пустого атрибута песочницы приведет к полной песочнице iframe.

Это означает, что JavaScript внутри iframe не будет выполняться, а все перечисленные выше привилегии будут ограничены (например, создание новых окон или загрузка плагина).

Атрибут пустой песочницы в основном используется для статического контента, но значительно снижает возможности, необходимые для правильной работы других ресурсов.

Примечание. Атрибут песочницы не поддерживается в Internet Explorer 9 и более ранних версиях.

Атрибут разрешения

Этот разрешающий атрибут в настоящее время является экспериментальным и поддерживается только браузерами на основе Chromium. Он позволяет разрешить определенные функции из белого списка, например предоставить iframe доступ к акселерометру, информации об аккумуляторе или камере.

Существует более 25 доступных флагов, поэтому я не буду перечислять их все здесь. Вы можете просмотреть их в документации Mozilla Feature Policy. Я суммировал самые популярные в таблице ниже:

td> < td>Разрешает доступ к Vibration API

Флаг	Детали
акселерометр	Разрешает доступ к интерфейсу акселерометра
датчик внешней освещенности	Разрешает доступ к интерфейсу датчика внешней освещенности
autoplay	Позволяет автоматически воспроизводить видео- и аудиофайлы
battery	Позволяет получить доступ к API состояния батареи
камера	Разрешает доступ к камере
полноэкранный режим	Разрешает доступ к полноэкранному режиму
геолокация	Разрешает доступ к API геолокации
гироскоп	Разрешает доступ к интерфейсу Sensors API Gyroscope
magnetometer	Разрешает доступ к интерфейсу Sensors API Magnetometer
микрофон	Разрешает доступ к микрофону устройства
midi	Разрешает доступ к Web MIDI API
платеж	Разрешает доступ к Платежу Запрос API
usb	Разрешает доступ к WebUSB API
вибрация

Что нужно знать о фреймах

Что делать с браузерами, не поддерживающими iframe

Если браузер не поддерживает iframe, он отобразит содержимое, заключенное между открывающим и закрывающим тегами.

Таким образом, вы всегда должны думать о размещении предупреждающего сообщения в качестве запасного варианта для этих бедных пользователей.

Как можно отобразить iframe так, как будто он на самом деле является частью родительского документа (т. е. без границ и полос прокрутки)?

🤓 Именно для этой цели был введен бесшовный атрибут. Он все еще является экспериментальным и плохо поддерживается браузерами (понимают его только браузеры на основе Chromium).

На момент написания этой статьи он также не входил в спецификацию W3C HTML5.

Могут ли iframe влиять на SEO моего сайта?

Я мало что знал об этом, поэтому пришлось немного покопаться. На эту тему ходит много предположений.

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

Поскольку поисковые системы считают контент в iframe принадлежащим другому веб-сайту, лучшее, на что вы можете надеяться, это отсутствие эффекта. Кадры iframe, как правило, не помогают и не вредят вашему рейтингу в поисковых системах.

Таким образом, лучше всего предположить, что контент, отображаемый через iframe, может быть не проиндексирован или недоступен для отображения в результатах поиска Google. В качестве обходного пути можно предоставить дополнительные текстовые ссылки на отображаемый контент, чтобы робот Googlebot мог сканировать и индексировать этот контент.

Примечание. Вам также не следует беспокоиться о проблемах с дублированием контента, поскольку современные поисковые роботы обычно их распознают.

Могут ли фреймы iframe влиять на скорость загрузки моего сайта?

Каждый iframe на странице увеличивает объем используемой памяти, а также других вычислительных ресурсов, таких как пропускная способность.

Поэтому не следует чрезмерно использовать iframe, не отслеживая происходящее, иначе это может привести к снижению производительности страницы.

Чтобы избежать замедления работы страниц с помощью фреймов iframe, рекомендуется откладывать их загрузку (т. е. загружать их только тогда, когда они необходимы, например, когда пользователь прокручивает страницу рядом с ними).

Этого можно легко добиться, просто добавив в тег атрибут loading="lazy".

Имейте в виду, что все современные браузеры на основе Chromium поддерживают это на момент написания этой статьи. Вам будет интересна библиотека отложенной загрузки, которая работает везде.

Примечание. Атрибут loading="lazy" также работает с тегом img, если вы еще этого не знали. 😜

Как сделать iframe адаптивным?

Поскольку все больше людей просматривают веб-страницы со своих телефонов, важно убедиться, что каждый из ваших интерфейсов адаптивен.

Но как это сделать, если на вашей странице есть iframe?

Мы могли бы посвятить целое руководство множеству способов сделать ваш iframe адаптивным. Вместо этого я просто дам ссылку на две отличные статьи:

Эта вторая статья покажет вам, как сделать интерактивный фрейм адаптивным, используя соотношение сторон.

Существует также библиотека изменения размера Iframe, но имейте в виду, что она содержит множество дополнительных функций, которые могут вам не понадобиться.

Примечание. Если вы используете библиотеку начальной загрузки в своем проекте, существуют встроенные модули embed-responsive и embed-responsive-16by9, которые вы можете использовать прямо из коробки, чтобы сделать ваши iframe адаптивными.

Как предотвратить белую вспышку во время загрузки iframe

Да, друзья, для этого есть решение. В этой статье Крис Койер поделился небольшим фрагментом кода, который скрывает все окна iframe на странице с помощью CSS и удаляет их до тех пор, пока окно не загрузится, а затем делает их видимыми.

Как перезагрузить содержимое iframe

Легкий лимонный сок! Поскольку вы можете получить доступ к элементу окна iframe с помощью contentWindow , вы должны сделать следующее:

Дополнительно: о доступности iframe

В большинстве случаев средство чтения с экрана указывает, что на странице присутствует iframe.

Многие из них даже позволяют перемещаться внутри. Если ваш iframe не содержит другой веб-страницы, а вместо этого содержит внешний контент, например видеопроигрыватель или рекламу, необходимо добавить заголовок к тегу.

Добавление заголовка к тегу дает пользователям больше информации о том, о чем iframe.

Некоторые скажут, что этот атрибут не является обязательным, поскольку большинство средств чтения с экрана считывают только заголовок документа, когда он доступен, и пропускают атрибут title в теге iframe.

Однако для того, чтобы один и тот же заголовок правильно читался различными программами чтения с экрана, рекомендуется предоставить оба варианта и убедиться, что они совпадают друг с другом.

Еще одна вещь, о которой следует помнить, это то, что если ваш iframe содержит нечитаемый контент (например, видеоигру, созданную с помощью JavaScript), вам придется скрывать его содержимое от пользователей программ чтения с экрана с помощью атрибута aria-hidden. .

Мы говорили об этом в начале этого руководства, но не забудьте включить содержимое внутри iframe для всех старых браузеров, которые их не поддерживают.

Это даст всем больше информации о том, что должно отображаться в пространстве.

LogRocket: отслеживайте производительность iframe и то, как пользователи взаимодействуют с ними

LogRocket — это решение для мониторинга внешних приложений, позволяющее воспроизводить проблемы так, как если бы они возникли в вашем собственном браузере. При внедрении фреймов очень важно понимать, как они влияют на производительность всего приложения или страницы, а также на взаимодействие с пользователем. Вместо того, чтобы гадать, почему возникают ошибки, или запрашивать у пользователей скриншоты и дампы журналов, LogRocket позволяет вам воспроизвести сеанс, чтобы быстро понять, что пошло не так. Он отлично работает с любым приложением, независимо от платформы, и имеет плагины для регистрации дополнительного контекста из Redux, Vuex и @ngrx/store.

Помимо регистрации действий и состояния Redux, LogRocket записывает журналы консоли, ошибки JavaScript, трассировки стека, сетевые запросы/ответы с заголовками и телами, метаданные браузера и пользовательские журналы. Он также использует DOM для записи HTML и CSS на странице, воссоздавая идеальные до пикселя видео даже для самых сложных одностраничных приложений.

Заключение

Я надеюсь, что это руководство помогло вам улучшить свои знания о iframe.

Хотя они могут быть небезопасными, если вы загружаете ненадежный контент, они также имеют ряд существенных преимуществ. Таким образом, вы не должны полностью исключать их из своего арсенала разработки, а использовать их только в соответствующих ситуациях.

Если у вас есть что добавить к этой статье, вы можете связаться со мной в комментариях ниже или просто написать мне в Твиттере @RifkiNada

Читайте также: