Исчерпывающий путеводитель по тегу iframe

[k12th]

В прошлом году тоже пришлось задействовать iframe. Делали систему управления документацией для норвежского строительного конгломерата, одним из требований было печать документов с оглавлением с номерами страниц. Из-за этого встроенная в браузер печать не подходила — в стандарте CSS такая возможность вроде бы есть, но ее никто не поддерживает, кроме софтины PrinceXML. Единственным вариантом было — выгонять в PDF с её помощью и отдавать пользователю этот файл.

Поскольку веб-приложение было построено в виде SPA + REST API, надо было уметь собрать HTML и отправить его на бэкенд, который отсылал его в DocRaptor. И вот чтобы собрать эту страничку, использовался как раз невидимый (left: -10000px) iframe, в который грузится специальный роут без лишних элементов оформления и со специфичными стилями, рендерится и во Vue.nextTick сообщает родительской странице о своей готовности.

Вот так устаревший тэг сохранил мне работу:)

[grimalschi]

Ещё особенность iframe, что его невозможно переместить в другое место в DOM без перезагрузки содержимого. Особенность иногда раздражающая)

[dmytrob]

Корректней всегда (в том числе, в заголовке) говорить «элемент», а не «тег».

[gleb_l]

О, помню ещё до Ajax/jquery/xmlhttp через iframe можно было без перезагрузки основной страницы обмениваться данными с сервером, получать сериализованный в JS-array объект (дяди Джейсона тогда ещё не было), и обновлять данные на основной странице через DOM. Было это в 1999 году :)

[Zoolander]

// Что такое iframe и зачем

1. реклама
2. аналитика
3. видео с ютуба
4. игры

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

Ну, похоже, авторы этих статей не работают ни в Яндексе, ни в Гугле )

[Iamkaant]

к середине статьи бюджет на корректора закончился, и из-за картонного фасада стал явно выглядывать гугл-переводчик…

[NikitchenkoSergey]

При использовании iframe важно помнить про политику работы с куками. Скоро куки вообще не будут сохраняться во фреймах со сторонних сайтов: habr.com/ru/news/t/484060
В Safari уже давно не работает.

[dyadyaSerezha]

Как-то продавали японцам софт, модуль которого делал on-the-fly анализ всех загружаемых страниц на компах всех сотрудников (несколько сот тысяч компов), и вот их фирменное, основное приложение стало загружаться с нашим софтом с 30-секундной задержкой. Все в шоке, контракт накрывается. Стали смотреть логи, а в их простеньком приложении 125 фреймов на первой же страничке типа "введите имя итпароль"! А на каждый фрейм у нас создавался свой сложный объект-анализатор. Потом выяснили, что их приложение автогенерилось японским же генератором приложений какой-то еще одной фирмы. Ну и 125 фреймов на login-страничке, а чо. В-)

[CodeHere]

Еще пару слов про безопасность. Стоит упомянуть HTTP заголовок X-Frame-Options, в котором можно перечислить адреса сайтов, которые могут загружать вашу страницу в iframe:
X-Frame-Options: deny, sameorigin, allow-from uri.

Либо его аналог в политике CSP:
Content-Security-Policy: frame-ancestors source;
Content-Security-Policy: frame-ancestors source source;

подробнее можно ознакомиться здесь: habr.com/ru/post/317720