Страница внутри страницы html frame
Мы встроили одну страницу в другую страницу, чтобы ты смотрел страницу пока смотришь страницу.
Время чтения: меньше 5 мин
Обновлено 8 сентября 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
— это контейнер, который позволяет вставить любой HTML-документ из другого источника. Часто этот документ интерактивный — например, карта, видео или пост из соцсети.
Этот контейнер обычно называют фреймом. Внешний вид фрейма и его положение на странице можно задать через CSS.
Пример
Скопировать ссылку «Пример» Скопировано
С помощью такого нехитрого кода мы можем встроить карту размером 560 на 400 пикселей на любую страницу:
title="Inline Frame Map" width="560" height="400" frameborder="1" allowfullscreen="true" src="https://yandex.ru/map-widget/v1/-/CBFkaYSE0A">iframe id="inlineFrameExample" title="Inline Frame Map" width="560" height="400" frameborder="1" allowfullscreen="true" src="https://yandex.ru/map-widget/v1/-/CBFkaYSE0A" > iframe>
Как понять
Скопировать ссылку «Как понять» Скопировано
можно представить как «окно» или фрейм, через которое на вашей странице можно увидеть любое содержимое с других сайтов. Это значит, что если карту, видео, пост или другой элемент удалят с оригинального сайта, он пропадёт и с вашей страницы. Останется только пустое место или надпись вроде «Контент недоступен».
Встраивать файлы можно либо по ссылке с помощью атрибута src , либо целиком HTML-код файла с помощью srcdoc .
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Часто сервисы, из которых мы хотим что-то встроить (карты, посты и тому подобное), сами могут сгенерировать вам . Его останется только добавить в свой код.
Контейнер . . . < / iframe>нужно всегда закрывать.
Атрибуты
Скопировать ссылку «Атрибуты» Скопировано
src — URL-адрес файла, который вы встраиваете.
srcdoc — позволяет встроить HTML-код целиком, так что браузеру не придётся подгружать что-то по внешней ссылке. Если используется этот атрибут, то ссылка src игнорируется.
sandbox — ограничивает определённые действия и функции встраиваемого документа. Если просто указать атрибут sandbox , то он применит сразу все возможные ограничения. Либо можно указать нужные ограничения в любом порядке через пробел:
Возможные значения атрибута sandbox
- allow — forms — позволяет отправлять формы внутри .
- allow — modals — позволяет открывать модальные окна, которые мы все так не любим: вроде «Оставьте свой имейл» или «Не уходите так быстро! У вас товар в корзине». Обычно эти окна не дают пользоваться сайтом, пока их не закроешь.
- allow — orientation — lock — позволяет фиксировать горизонтальное или вертикальное положение экрана.
- allow — pointer — lock — позволяет пользователю управлять содержимым с помощью курсора через Pointer Lock API.
- allow — popups — разрешает показ всплывающих окон, вызванных с помощью window . open ( ) , target = » _ blank» или show Modal Dialog ( ) .
- allow — popups — to — escape — sandbox — позволяет содержимому фрейма открывать новые окна. С этим параметром у таких окон не будет тех ограничений, которые есть у с атрибутом sandbox .
- allow — presentation — разрешает использовать Presentation API.
- allow — same — origin — контент из загружается по тем же правилам и с теми же ограничениями, что и страница, на которой он находится.
- allow — scripts — позволяет загружать скрипты. При этом всплывающие окна будут запрещены.
- allow — top — navigation — позволяет открывать ссылки, которые есть в , в том же окне, в которое встроен фрейм.
- allow — top — navigation — by — user — activation — позволяет контенту из фрейма управлять страницей, на которой он находится. Но только по инициативе пользователя.
name — имя фрейма. Пригодится, чтобы создать ссылку, по которой новая страница будет открываться в нужном фрейме.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
💡 Атрибут sandbox будет игнорироваться, если использовать одновременно значения allow — scripts и allow — same — origin и если исходная страница и на ней загружаются из одного и того же источника.
💡 Помните, что — этот как будто ещё одна страница, которая загружается внутри вашей страницы. Содержимое фрейма может загружаться дольше, чем ваш сайт.
💡 В стоит добавить атрибут title на случай, если пользователь не может увидеть страницу и использует инструмент чтения с экрана. Например, так:
iframe title="Страница в Википедии о лемурах" src="https://ru.wikipedia.org/wiki/Обыкновенные_лемуры">iframe>
На практике
Скопировать ссылку «На практике» Скопировано
Дока Дог советует
Скопировать ссылку «Дока Дог советует» Скопировано
🛠 Я редко использую . Только когда надо, например, встроить видео с YouTube.
Почти всегда лучше настроить заголовок cross — origin (это делается на уровне сервера) так, чтобы сторонние сайты не могли встраивать к себе ваш сайт как фрейм — это часто используется для всяких махинаций.
HTML iframe или страница внутри страницы
Этот элемент в отличае от тега остался в новой спецификации.
- HTML iframe – это отдельная интернет-страница, которая включается посредством тегов в другую HTML интернет-страницу.
- HTML iframe может быть внедрен в любое место страницы. Его местоположение более точно регулируется с помощью Каскадных таблиц стилей.
- HTML iframe может внедряться без полос прокрутки и не иметь рамки.
Пример HTML iframe‘а:
- src=»» – указывает url документа.
- frameborder=»» – граница вложенного документа. Возможны значения: 1 – по умолчанию и 0 – граница HTML iframe‘а отсутствует.
- scrolling=»» – определяет наличие полосы прокрутки. Возможны значения: yes – по умолчанию и no – полосы прокрутки отсутствуют.
- width=»» – определяет ширину HTML iframe‘а в пикселях или в процентах.
- height=»» – определяет высоту HTML iframe‘а в пикселях или в процентах.
- align=»» – определяет выравнивание. Возможны значения: top, right, bottom, left, middle .
Автор проекта — Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018
HTML списки 
HTML iframe и страницы 
HTML и бегущая строка
© 2009 — 2023 | При использовании материала, ссылайтесь на мой сайт!
По всем вопросам обращайтесь: go@ab-w.net | HTML код iframe? – Не вопрос!
Фреймы
Фреймы — это HTML-элементы, позволяющие разделить окно веб-браузера на несколько независимых окон, в каждое из которых можно загрузить отдельный HTML-документ. Каждое такое окно (фрейм) может иметь собственные полосы прокрутки и функционировать независимо от других независимых окон либо наоборот управлять их содержанием. Они могут применяться для организации постоянно находящегося в одном окне меню, в то время как в другом окне располагается непосредственно сама информация. Пользователи могут обращаться к меню в любой момент, и им не нужно возвращаться к предыдущей странице, чтобы выбрать другой пункт меню. Применение фреймов позволит вам «закрепить» в окне браузера изображения или другие неподвижные по замыслу элементы интерфейса, в то время как остальная часть страницы будет прокручиваться во фрейме.
Однако, стоит отметить, что в наши дни фреймы считаются устаревшим средством, а сайты с фреймами теперь считаются несолидными, так как профессиональные веб-мастера никогда не используют фреймы в своих проектах. С фреймами связан целый ряд печально известных проблем. Они, например, сбивают с толку поисковые машины, поскольку на страницах, которые содержат контент, нет ссылок на другие документы. Если вы хотите получать посетителей с поисковых систем, забудьте о фреймах. Понравившуюся страницу пользователю невозможно поместить в раздел закладки браузера, так как фреймы скрывают адрес страницы, на которой он находится, и всегда показывают только адрес веб-сайта. По этой причине они создают проблемы для браузеров при отслеживании хронологии и еще они не слишком приспособлены для разных размеров экранов и мобильных устройств.
Несмотря на то, что проекты с фреймами встречаются во всемирной паутине все реже, изучение HTML было бы неполным без рассмотрения темы о фреймах. У фреймов наряду с недостатками есть и некоторые достоинства, которые не позволяют отбросить эту технологию как бесперспективную.
Создание фреймов
Структура HTML-документа с фреймами внешне очень напоминает формат обычного HTML-документа. Как и в обычном HTML-документе, весь код помещен между парными тегами и , а в контейнере располагаются заголовки. Основное отличие документа с фреймами от обычного HTML-документа — у документа с фреймами вместо тега применяется парный тег (от англ. frame set – набор фреймов).
В следующем примере приведена структура HTML-документа с фреймами:
Пример: Структура HTML-документа с фреймами
- rows — описывает разбиение страницы на строки:
- cols — описывает разбиение страницы на столбцы:
В значении атрибутов rows и cols необходимо указывать не количество строк или столбцов, а значение ширины и высоты фреймов. Все значения в списке разделяются запятыми. Размеры могут быть указаны в абсолютных единицах (в пикселах) или в процентах:
- cols=»20%, 80%» — окно браузера разбивается на две колонки с помощью атрибута cols, левая колонка занимает 20%, а правая 80% окна браузера.
- rows=»100, *» окно браузера разбивается на два горизонтальных окна с помощью атрибута rows, верхнее окно занимает 100 пикселов, а нижнее — оставшееся пространство, заданное символом звездочки.
Как видно из данного примера, контейнер с атрибутом rows вначале создает два горизонтальных фрейма, а вместо второго фрейма подставляется еще один , который разбивает нижний горизонтальный фрейм на две колонки с помощью атрибута cols, левая колонка занимает занимает 20%, а правая 80% окна браузера.
Если браузер не поддерживает фреймы, то в окне будет отображен текст, расположенный между тегами и . Все, что находится между тегами и , игнорируется браузерами, поддерживающими фреймы. Таким образом разработчику нужно написать код, дублирующий содержимое фреймов другими средствами, и поместить этот код в контейнер , тогда все пользователи смогут увидеть его веб-страницу.
Как уже отмечалось, для вставки в документ отдельного фрейма служит непарный тег . Атрибут src задает документ, который должен отображаться внутри данного фрейма, например: . Если атрибут src отсутствует, отображается пустой фрейм.
Границы или пространство между фреймами
По умолчанию, браузер отображает серую и, как правило, в виде трехмерной линии границу между фреймами, с помощью которой посетители могут регулировать размер фрейма.
Границей фрейма можно управлять, как и любыми другими элементами фрейма. Для этого существует несколько атрибутов элемента , позволяющих настраивать границы фреймов. Толщина линии границы определяется атрибутом border. По умолчанию значение толщины границы равно пяти.
Чтобы скрыть границу фрейма, необходимо либо указать значение ширины границы равным нулю, либо присвоить значение «no» или «0» атрибуту frameborder. Атрибут frameborder может принимать только два противоположных значения. Если значение атрибута frameborder равно «yes» или «1», то граница фреймов будет отображаться, а если «0» или «no», то нет. Учтите, что значения атрибута frameborder различаются для разных браузеров. Чтобы решить эту проблему используйте дважды атрибут frameborder, а для некоторых браузеров требуется еще добавить атрибут framespacing со значением «0»:
В следующем примере убираем границу между фреймами: