Заработок в сети Интернет. Как заработать на дому в Интернете. Удаленная работа в сети.

Заработок на разработке сайтов, фриланс, своя страничка в интернете, заработать в Интернете на написании сайтов, веб мастер, вебмастер, веб программист, вебпрограммист.

Заработок в Интернет.
Удаленная работа на дому.
Все о надомной работе.

Html iframe: Атрибут scrolling | htmlbook.ru

Добавлено автор alexxlab

Содержание

От к — другие технологии внедрения — Изучение веб-разработки

К настоящему моменту вы уже должны уметь прикреплять вложения на свои веб-страницы, включая изображения, видео и аудио. На этом этапе мы хотели бы сделать шаг в сторону, рассматривая некоторые элементы, которые позволяют встраивать в ваши веб-страницы самые разнообразные типы контента: <iframe> (en-US), <embed> и <object> (en-US). <iframe> предназначен для встраивания других веб-страниц, а два других позволяют встраивать PDF-файлы, SVG и даже Flash — устаревшую технологию, которую вы всё равно иногда увидите.

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

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

Спустя некоторое время (конец 90-х, начало 2000-х годов) технологии плагинов, такие как Java-апплеты и Flash, стали очень популярными — это позволило веб-разработчикам встраивать богатый контент в веб-страницы, такие как видео и анимации, которые просто не были доступны только через HTML. Внедрение этих технологий осуществлялось посредством таких элементов, как <object> (en-US) и менее используемого

<embed>, и они были очень полезны в то время. С тех пор они вышли из моды из-за многих проблем, включая доступность, безопасность, размер файла и многое другое; в наши дни большинство мобильных устройств больше не поддерживают такие плагины, и поддержка на компьютерах также уменьшается.

Наконец, появился элемент <iframe> (en-US) (наряду с другими способами встраивания контента, например <canvas>, <video> и т. д. ) Он позволяет встраивать целый веб-документ внутри другого, как если бы это был

<img> или другой подобный элемент, и сегодня используется повсеместно.

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

В этой статье мы собираемся перейти прямо в раздел активного обучения, чтобы сразу дать вам реальное представление о том, для чего используются технологии внедрения. Нам очень хорошо знаком Youtube, но многие не знают о некоторых доступных для него средствах совместного доступа. Давайте посмотрим, как Youtube позволяет нам встраивать видео на любую страницу, которая нам нравится, используя <iframe> (en-US).

  1. Сначала перейдите на Youtube и найдите понравившееся вам видео.
  2. Под видео вы найдёте кнопку «Поделиться» — нажмите, чтобы отобразить параметры совместного доступа.
  3. Выберите кнопку «Вставить», и вам будет предоставлен код <iframe> — скопируйте его.
  4. Вставьте его в поле ввода ниже и посмотрите на результат в Output.

Дополнительно вы также можете попробовать внедрить карту Google следующим образом:

  1. Перейдите в Карты Google и найдите подходящую вам карту.
  2. Нажмите «Меню» (три горизонтальные линии) в верхнем левом углу пользовательского интерфейса.
  3. Выберите параметр Ссылка/код.
  4. Выберите параметр Встраивание карт, который даст вам код <iframe> — скопируйте его.
  5. Вставьте его в поле ввода ниже и посмотрите на результат в Output.

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

Итак, это было легко и весело, не так ли? Элементы <iframe> (en-US) предназначены для размещения других веб-документов в текущем документе. Это отлично подходит для включения стороннего контента на ваш сайт, который, возможно, не имеет прямого контроля и не хочет реализовывать вашу собственную версию — например, видео от поставщиков онлайн-видео, системы комментариев, такие как Disqus, карты от поставщиков онлайн-карт, рекламных баннеров и т. д. Живые редактируемые примеры, которые вы использовали в этом курсе, реализованы с помощью <iframe>.

Есть несколько серьёзных Проблем безопасности при использовании <iframe>, которые мы обсудим ниже, но это не значит, что вы не должны использовать их на своих сайтах — они просто требуют некоторых знаний и тщательного обдумывания. Давайте рассмотрим код немного подробнее. Скажем, вы хотите добавить глоссарий MDN на одну из своих веб-страниц. Вы можете попробовать что-то вроде этого:

<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
        frameborder="0"
        allowfullscreen sandbox>
  <p> <a href="https://developer.mozilla. org/en-US/docs/Glossary">
    Fallback link for browsers that don't support iframes
  </a> </p>
</iframe>

Этот пример включает основы, необходимые для использования <iframe>:

allowfullscreen (en-US)
Если установлено, <iframe> может быть помещён в полноэкранный режим с использованием полноэкранного API (что несколько выходит за рамки этой статьи).
frameborder (en-US)
Если установлено значение 1, это указывает браузеру нарисовать границу между этим фреймом и другими фреймами, что является поведением по умолчанию. 0 удаляет границу. Использование этого на самом деле не рекомендуется, так как тот же эффект можно улучшить, используя border: none; в CSS.
src (en-US)
Этот атрибут, как и <video> / <img>, содержит путь, указывающий на URL-адрес внедряемого документа.
width (en-US) and height (en-US)
Эти атрибуты определяют ширину и высоту, в которых вы хотите использовать iframe.
Резервный контент
Точно так же, как и другие подобные элементы, такие как <video>, вы можете включить резервный контент между тегами открытия и закрытия <iframe> </ iframe>, которые появятся, если браузер не поддерживает < IFRAME>. В этом случае мы включили ссылку на страницу. Вряд ли вы столкнётесь с таким браузером, который не поддерживает <iframe> в наше время.
sandbox (en-US)
Этот атрибут, который работает в более современных браузерах, чем остальные функции <iframe> (например, IE 10 и выше). Он запрашивает повышенные настройки безопасности. Об этом мы расскажем в следующем разделе.

Примечание: Чтобы повысить скорость загрузки, рекомендуется установить атрибут src в элементе iframe с помощью JavaScript после того, как основное содержимое будет загружено. Это ускорит вашу страницу и уменьшит время загрузки официальной страницы (важный показатель SEO.)

Проблемы безопасности

Выше мы упомянули о проблемах безопасности. Давайте рассмотрим это чуть подробнее. Мы не ожидаем, что вы всё поймёте с первого раза. Мы просто хотим сообщить вам о проблеме и предоставить ссылку, чтобы вы могли вернуться к ней, когда станете более опытными и начнёте рассматривать использование iframe в своих экспериментах и работе. Кроме того, нет необходимости бояться и не использовать <iframe> — вам просто нужно быть осторожным. Продолжим…

Разработчики браузеров и веб-разработчики на горьком опыте усвоили, что iframe — частая цель (официальный термин: вектор атаки) плохих людей в Интернете (часто называемых хакерами, или, более точно, крекерами) для атаки при попытке злонамеренно изменить ваши веб-страницы или обманом заставить посетителей делать то, чего они не хотят, например, раскрыть конфиденциальную информацию вроде имени пользователя и пароли. Чтобы избежать этого, авторы спецификаций и разработчики браузеров разработали различные механизмы безопасности для обеспечения защиты <iframe>, лучшие из которых мы рассмотрим ниже.

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

Быстрый пример — попробуйте загрузить предыдущий пример, который мы показали выше, в ваш браузер (вы можете найти его живой пример на Github (см. Также исходный код). На самом деле, вы ничего не увидите на странице, т.к. если вы посмотрите в консоль в инструментах разработчика браузера, вы увидите сообщение, объясняющее вам, почему. В Firefox вы получите сообщение

«Отказано в доступе» в связи с X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary не разрешает кадрирование. Это связано с тем, что разработчики, которые построили MDN, включили параметр на сервере, который обслуживает страницы веб-сайта, запрещая им внедряться внутри <iframe> (см. Настройка директивы CSP ниже). Суть здесь такова — целой странице MDN на самом деле нет смысла встраиваться в другие страницы — конечно, если вы не хотите сделать что-то вроде встраивания их на свой сайт и выставлять их как свои собственные; или пытаться украсть данные с помощью clickjacking, что очень плохо. Плюс, если все начнут это делать, вся дополнительная пропускная способность начнёт стоить Mozilla больших денег.

Используйте только при необходимости

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

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

Если контент лицензирован, вы должны соблюдать условия лицензии. Например, контент на MDN лицензирован на licensed under CC-BY-SA. Это означает, что вы должны относиться к нам с уважением, когда цитируете наш контент, даже если внесли в него существенные изменения.

Используйте HTTPS

HTTPS это зашифрованная версия HTTP. Вы должны обслуживать свои веб-сайты, используя HTTPS, всегда, когда это возможно :

  1. HTTPS уменьшает вероятность того, что контент был изменён по пути;
  2. HTTPS запрещает доступ внедрённого контента к контенту в вашем исходном документе и наоборот.

Использование HTTPS требует сертификат безопасности, что может обходиться в копеечку (хотя есть Let’s Encrypt, что облегчает задачу). Если вы не можете его получить, вы можете отдавать свой родительский документ с помощью HTTP. Однако, из-за второго преимущества HTTPS во что бы то ни стало вы не должны внедрять сторонний контент с HTTP. (В лучшем случае ваш браузер выдаст угрожающее предупреждение.) Все уважаемые компании, которые делают контент доступным для внедрения через <iframe>, доступны через HTTPS — посмотрите URL-адреса внутри <iframe> src при встраивании, например, содержимого из Карт Google или Youtube.

Примечание: Github pages позволяют предоставлять контент через HTTPS по умолчанию, поэтому это полезно для размещения контента. Если вы используете другой хостинг и не уверены, спросите хостинг-провайдера об этом.

Всегда используйте атрибут
sandbox

Вы хотите дать хакерам как можно меньше возможностей, чтобы делать плохие вещи на вашем веб-сайте, поэтому вы должны позволять копипастить встроенный контент только с разрешений, необходимых для выполнения этого действия. Конечно, это относится и к вашему собственному контенту. Контейнер для кода, в котором он может использоваться надлежащим образом или для тестирования, но не может нанести вред остальной части кодовой базы (случайной или злонамеренной), называется sandbox.

Контент, не ограниченный sandbox, может сделать слишком многое (выполнение JavaScript, отправка форм, всплывающие окна и т. д.). По умолчанию включайте все возможные ограничения, используя атрибут sandbox без параметров, как показано в предыдущем примере.

Если это необходимо, вы можете добавлять разрешения один за другим (внутри значения атрибута sandbox="") — смотри sandbox (en-US) ссылка для всех доступных опций. Важно отметить, что вы никогда не должны добавлять атрибуты allow-scripts и allow-same-origin в свой sandbox атрибут одновременно — в таком случае, встроенный контент может обходить политику безопасности, которая запрещает сайтам выполнять скрипты и использовать JavaScript для отключения «песочницы» sandbox .

Примечание. «Песочница» не обеспечивает защиту, если злоумышленники могут обманывать людей через прямое посещение вредоносного контента (вне iframe). Если есть вероятность, что определённый контент может быть вредоносным (например, созданный пользователями контент), пожалуйста, используйте его из другого domain на ваш основной сайт.

Настройка директив CSP

CSP означает политику безопасности контента и обеспечивает набор заголовков HTTP (метаданные, отправленные вместе с вашими веб-страницами, когда они обслуживаются с веб-сервера), предназначенных для улучшения безопасности вашего HTML-документа. Когда дело доходит до обеспечения безопасности <iframe>, вы можете настроить сервер для отправки соответствующего X-Frame-Options  заголовка. Это может помешать другим веб-сайтам встраивать ваш контент на их веб-страницы (что позволило бы использовать clickjacking и множество других атак), что и было сделано разработчиками MDN, как мы видели ранее. .

Примечание: вы можете прочитать пост Фредерика Брауна On the X-Frame-Options Security Header для более детальной информации по теме. Разумеется, объяснение в этой статье далеко не полное.

Элементы <embed> и <object> (en-US)  служат другой функции, в отличие от iframe — эти элементы являются инструментами общего назначения для встраивания нескольких типов внешнего контента, включая плагиновые технологии, такие как Java Applets и Flash, PDF (которые могут отображаться в браузере с плагином PDF) и даже такой контент, как видео, SVG и изображения!

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

Тем не менее, вы вряд ли будете использовать эти элементы очень часто. Апплеты не использовались годами, Flash в настоящее время не очень популярен из-за ряда причин (см. Случай с плагинами, ниже), PDF-файлы, как правило, лучше открывать по ссылке, а другой контент — такой, как изображения и видео, могут обрабатываться намного проще. Плагины и эти методы внедрения действительно являются устаревшими технологиями, и мы упоминаем их здесь на случай, если вы столкнётесь с ними в определённых обстоятельствах, таких как интрасети или корпоративные проекты.

Если вам нужно внедрить контент плагина, ниже исчерпывающая информация, которая вам понадобится:

<embed><object> (en-US)
URL встраиваемого контентаsrcdata (en-US)
точный media type встраиваемого контентаtypetype (en-US)
высота и ширина (в пикселях) элемента, управляемого плагиномheight
width		height (en-US)
width (en-US)
имена и значения, предоставляемые плагину в качестве параметровОсобые атрибуты,с их именами и значениямиодиночные элементы <param> (en-US), находящиеся внутри <object>
независимый HTML-контент в качестве резерва для отсутствующего ресурсане поддерживается (<noembed> является устаревшим)содержится внутри <object>, после элементов <param> 

Замечание: <object> -у необходим атрибут data , атрибут type , или оба сразу. Если вы используете их вместе, вы также можете использовать атрибут typemustmatch (en-US) (имеющийся в наличии только в Firefox, на момент написания данной статьи). Атрибут typemustmatch предотвращает запуск файла, только если в в атрибут type не записан соответствующий медиа-тип. Следовательно, атрибут typemustmatch может предоставлять значительные преимущества в безопасности в случае встраивания контента из других источников origin (Таким образом, не давая возможности злоумышленникам запускать произвольные скрипты посредством плагинов).

Ниже представлен пример использования элемента <embed> для вставки Flash-фильма (загляните на live on Github, а также на check the source code):

<embed src="whoosh.swf" quality="medium"
       bgcolor="#ffffff"
       name="whoosh" align="middle" allowScriptAccess="sameDomain"
       allowFullScreen="false" type="application/x-shockwave-flash"
       pluginspage="http://www. macromedia.com/go/getflashplayer">

Достаточно ужасно, не так ли? Html-код, генерируемый Flash, имел склонность быть значительно хуже. Он использовал элемент <object> вместе со встроенным элементом <embed> для скрытия всего фундамента (взгляните на пример). Flash ранее использовался в качестве резерва для HTML5-видео (в случае его отсутствия), но со временем необходимость в этом отпала.

Давайте взглянем на пример <object> , встраивающего PDF в страницу (взгляните live example и source code):

<object data="mypdf.pdf" type="application/pdf"
        typemustmatch>
  <p>You don't have a PDF plugin, but you can <a href="mypdf.pdf">download the PDF file.</a></p>
</object>

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

Дело против плагинов

Когда-то плагины были незаменимы в Интернете. Помните дни, когда вам приходилось устанавливать Adobe Flash Player для просмотра онлайн-фильма? И потом постоянно возникали раздражающие предупреждения об обновлении Flash Player и Java Runtime Environment. С тех пор веб-технологии стали намного надёжнее. Почти всем сервисам пришло время прекратить доставлять контент с помощью плагинов и вместо этого использовать веб-технологии.

  • Расширьте свою досягаемость для всех. У каждого есть браузер, но плагины используются все реже, особенно среди мобильных пользователей. Поскольку Web в значительной степени можно использовать без плагинов, люди предпочли бы просто перейти на сайты ваших конкурентов, чем установить плагин.
  • Немного передохните от лишних головных болей, связанных с общедоступностью Flash-плагинов и др. ( extra accessibility headaches ).
  • Избегайте лишних проблем безопасности. Ни для кого не секрет,что Adobe Flash является небезопасным, даже после многочисленных патчей. В 2015, Алекс Стэймос (бывший главный сотрудник по вопросам информационной безопасности компании Facebook) даже делал запрос, чтобы Adobe прекратил поддержку Flash.

Итак, что нужно делать? Если вам нужна интерактивность, HTML и JavaScript могут легко выполнить задание для вас без необходимости использования апплетов Java или устаревшей технологии ActiveX / BHO. Вместо того, чтобы полагаться на Adobe Flash, вы можете использовать видео HTML5 для своих медиа-потребностей, SVG для векторной графики и Canvas для сложных изображений и анимаций. Питер Элст уже писал несколько лет назад, что Adobe Flash редко является подходящим инструментом для работы, за исключением специализированных игр и бизнес-приложений. Что касается ActiveX, браузер Microsoft Edge (en-US) больше не поддерживает его.

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

Существует много других технологий, которые включают в себя внедрение внешнего контента, помимо тех, которые мы обсуждали здесь. Мы видели некоторые из ранних статей, например <video>, <audio> и <img>, но есть и другие. Например, <canvas> для 2D-и 3D-графики, сгенерированной JavaScript, и <svg> для встраивания векторной графики. Мы рассмотрим SVG в следующей статье модуля.

HTML тег

Тег <iframe> создает на веб-странице встроенную область (фрейм), в которой можно отображать содержимое другого документа или веб-страницы. Содержимое фрейма и веб-страницы, на которой он находится, независимы друг от друга, но они могут взаимодействовать через JavaScript.

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

Браузеры по умолчанию визуально отображают содержимое элемента <iframe> с узкой рамкой, которую можно изменить или удалить с помощью CSS свойства border.

Синтаксис ¶

Содержимое элемента располагается между открывающим (<iframe>) и закрывающим (</iframe>) тегами.

Атрибут src является обязательным для тега <iframe>. Он указывает адрес документа, который должен отображаться в фрейме.

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <iframe src="https://ru. w3docs.com"></iframe>
  </body>
</html>
Попробуйте сами!

Чтобы установить размер iframe, вы можете использовать атрибуты height и width или использовать CSS. Значения атрибута устанавливаются в пикселях по умолчанию, но они также могут быть в процентах.

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <iframe src="https://ru.w3docs.com"></iframe>
  </body>
</html>
Попробуйте сами!

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

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <iframe src="https://ru. w3docs.com"></iframe>
  </body>
</html>
Попробуйте сами!

Атрибуты¶

Тег <iframe> поддерживает глобальные атрибуты и атрибуты событий.

HTML-тег iframe

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

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

Многие сайты используют фреймы для различных задач. Возможно, вы знакомы с Codepen, Glitch или другими сайтами, которые позволяют писать код в одной части страницы, и вы видите результат в поле. Это iframe.

Вы создаете его таким образом:

<iframe src="page.html"></iframe>

Вы также можете загрузить абсолютный URL:

<iframe src="https://site. com/page.html"></iframe>

Вы можете установить набор параметров ширины и высоты (или установить их с помощью CSS), иначе iframe будет использовать значения по умолчанию, поле 300×150 пикселей:

<iframe src="page.html"></iframe>

Srcdoc

ВsrcdocАтрибут позволяет указать некоторый встроенный HTML-код для отображения. Это альтернативаsrc, но последние и не поддерживаются в Edge 18 и ниже, а также в IE:

<iframe srcdoc="<p>My dog is a good dog</p>"></iframe>

Песочница

ВsandboxАтрибут позволяет нам ограничивать операции, разрешенные в окнах iframe.

Если его опустить, все разрешено:

<iframe src="page.html"></iframe>

Если мы установим его в «», ничего не разрешено:

<iframe src="page.html" sandbox=""></iframe>

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

  • allow-forms: разрешить отправку форм
  • allow-modalsпозволять открывать модальные окна, включая вызовalert()в JavaScript
  • allow-orientation-lockразрешить заблокировать ориентацию экрана
  • allow-popupsразрешить всплывающие окна, используяwindow.open()иtarget="_blank"ссылки
  • allow-same-originотноситься к загружаемому ресурсу как к одному источнику
  • allow-scriptsпозволяет загруженному iframe запускать скрипты (но не создавать всплывающие окна).
  • allow-top-navigationпредоставляет доступ к iframe контексту просмотра верхнего уровня

Позволять

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

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

  • accelerometerдает доступ к интерфейсу акселерометра Sensors API
  • ambient-light-sensorдает доступ к интерфейсу API датчиков AmbientLightSensor
  • autoplayпозволяет автоматически воспроизводить видео и аудио файлы
  • cameraпозволяет получить доступ к камере изgetUserMedia API
  • display-captureпозволяет получить доступ к содержимому экрана с помощью API getDisplayMedia
  • fullscreenпозволяет получить доступ к полноэкранному режиму
  • geolocationпозволяет получить доступ кAPI геолокации
  • gyroscopeдает доступ к интерфейсу гироскопа Sensors API
  • magnetometerдает доступ к интерфейсу магнитометра Sensors API
  • microphoneпредоставляет доступ к микрофону устройства с помощью API getUserMedia
  • midiпозволяет получить доступ к веб-MIDI API
  • paymentпредоставляет доступ к API запроса платежа
  • speakerобеспечивает доступ к воспроизведению звука через динамики устройства
  • usbдает доступ к API WebUSB.
  • vibrateдает доступ к API вибрации
  • vrдает доступ к API WebVR

Реферер

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

The misspelling of referrer originated in the original proposal by computer scientist Phillip Hallam-Baker to incorporate the field into the HTTP specification. The misspelling was set in stone by the time of its incorporation into the Request for Comments standards document RFC 1945

ВreferrerpolicyАтрибут позволяет настроить реферер для отправки в iframe при его загрузке. Реферер — это HTTP-заголовок, который позволяет странице узнать, кто его загружает. Это допустимые значения:

  • no-referrer-when-downgradeэто значение по умолчанию, и отправляет реферер, когда текущая страница загружается по HTTPS, а iframe загружается по протоколу HTTP.
  • no-referrerне отправляет заголовок реферера
  • originреферер отправляется и содержит только источник (порт, протокол, домен), а не источник + путь, который является по умолчанию
  • origin-when-cross-originпри загрузке из того же источника (порт, протокол, домен) в iframe, реферер отправляется в его полной форме (источник + путь). В противном случае отправляется только источник
  • same-originреферер отправляется только при загрузке из того же источника (порт, протокол, домен) в iframe
  • strict-originотправляет источник в качестве источника перехода, если текущая страница загружается по HTTPS, а iframe также загружается по протоколу HTTPS. Ничего не отправляет, если iframe загружается через HTTP
  • strict-origin-when-cross-originотправляет origin + path в качестве реферера при работе с тем же источником. Отправляет источник в качестве источника перехода, если текущая страница загружается по HTTPS, а iframe также загружается по протоколу HTTPS. Ничего не отправляет, если iframe загружается через HTTP
  • unsafe-url: отправляет путь origin + в качестве реферера даже при загрузке ресурсов из HTTP, а текущая страница загружается через HTTPS

Дополнительные руководства по HTML:


HTML — : элемент Inline Frame — представляет собой вложенный контекст просмотра , вложение другой HTML

<iframe> представляет собой вложенный контекст просмотра , вложение другой HTML — страницу в текущем.

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

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

Категории содержания Контент потока , фразовый контент , встроенный контент, интерактивный контент, осязаемый контент.
Разрешенное содержаниеNone.
Опущение меткиНет,и начальная и конечная метки обязательны.
Разрешенные родителиЛюбой элемент,принимающий встроенный контент.
Неявная роль ARIAНет соответствующей роли
Разрешенные роли АРИА application, document, img, none, presentation
интерфейс DOMHTMLIFrameElement

Attributes

Этот элемент включает глобальные атрибуты .

allow
Задает политику функции для <iframe> . Политика определяет, какие функции доступны для <iframe> в зависимости от источника запроса (например, доступ к микрофону, камере, батарее, API общего доступа к сети и т. Д.).

Дополнительные сведения и примеры см. В разделе Использование политики функций > Атрибут разрешения iframe .

allowfullscreen
Установите значение true , если <iframe> может активировать полноэкранный режим, вызвав метод requestFullscreen() .

Этот атрибут считается устаревшим и переопределяется как allow="fullscreen" .

allowpaymentrequest
Установите значение true , если <iframe> из разных источников должен быть разрешен для вызова API запроса оплаты .

Этот атрибут считается устаревшим и переопределяется как allow="payment" .

csp Это экспериментальный API, который не следует использовать в производственном коде.
Содержание политики безопасности применяются для внедренного ресурса. Подробности см. В HTMLIFrameElement.csp .
height
Высота фрейма в пикселях CSS. По умолчанию 150 .
loading Это экспериментальный API, который не следует использовать в производственном коде.
Указывает,как браузер должен загружать iframe:
  • eager : немедленно загрузить iframe, независимо от того, находится ли он за пределами видимого окна просмотра (это значение по умолчанию).
  • lazy : откладывать загрузку iframe до тех пор, пока он не достигнет расчетного расстояния от области просмотра, как определено браузером.
name
Целевое имя для встроенного контекста просмотра. Это можно использовать в атрибуте target элементов <a> , <form> или <base> ; formtarget атрибут <input> или <button> элементов; или параметр windowName в методе window. open() .
referrerpolicy
Указывает, какой реферер отправлять при выборке ресурса кадра:
  • no-referrer : заголовок Referer не будет отправлен.
  • no-referrer-when-downgrade (по умолчанию): заголовок Referer не будет отправлен в origin без TLS ( HTTPS ).
  • origin : отправленный реферер будет ограничен источником ссылающейся страницы: ее схемой , хостом и портом .
  • origin-when-cross-origin : реферер, отправленный в другие источники, будет ограничен схемой, хостом и портом. Навигация по тому же источнику по-прежнему будет включать путь.
  • same-origin : реферер будет отправлен для того же источника , но запросы на другой источник не будут содержать никакой информации о реферере.
  • strict-origin : отправляйте источник документа в качестве реферера только при неизменном уровне безопасности протокола (HTTPS → HTTPS), но не отправляйте его в менее безопасное место назначения (HTTPS → HTTP).
  • strict-origin-when-cross-origin : отправляйте полный URL-адрес при выполнении запроса с одинаковым происхождением, отправляйте источник только при неизменном уровне безопасности протокола (HTTPS → HTTPS) и не отправляйте заголовок в менее безопасное место назначения ( HTTPS → HTTP).
  • unsafe-url : реферер будет включать источник и путь (но не фрагмент , пароль или имя пользователя ). Это значение небезопасно , поскольку оно приводит к утечке источников и путей от ресурсов, защищенных TLS, к небезопасным источникам.
sandbox
Применяет дополнительные ограничения к содержимому фрейма.Значение атрибута может быть либо пустым для применения всех ограничений,либо разделенными пробелами лексемами для снятия определенных ограничений:
  • allow-downloads-without-user-activation Это экспериментальный API, который не следует использовать в производственном коде. : Позволяет загружать файлы без жестов пользователя.
  • allow-downloads : разрешает загрузку выполнять жестом пользователя.
  • allow-forms : позволяет ресурсу отправлять формы. Если это ключевое слово не используется, отправка формы блокируется.
  • allow-modals : позволяет ресурсу открывать модальные окна .
  • allow-orientation-lock : позволяет ресурсу блокировать ориентацию экрана .
  • allow-pointer-lock : позволяет ресурсу использовать API блокировки указателя .
  • allow-popups : разрешает всплывающие окна (например, window.open() , target="_blank" или showModalDialog() ). Если это ключевое слово не используется, всплывающее окно не откроется.
  • allow-popups-to-escape-sandbox : позволяет изолированному документу открывать новые окна без наследования этих окон изолированной программной среды. Например, это может безопасно изолировать рекламу, не накладывая тех же ограничений на страницу, на которую ссылается объявление.
  • allow-presentation : позволяет ресурсу начать сеанс презентации .
  • allow-same-origin : если этот токен не используется, ресурс считается происходящим из особого источника, который всегда не соответствует политике одного и того же происхождения (потенциально предотвращая доступ к хранилищу данных / файлам cookie и некоторым API JavaScript).
  • allow-scripts : разрешает запускать сценарии ресурса (но не создавать всплывающие окна).
  • allow-storage-access-by-user-activation Это экспериментальный API, который не следует использовать в производственном коде. : Разрешает запросу ресурса доступ к родительскому хранилищу с помощью Storage Access API .
  • allow-top-navigation : позволяет ресурсу перемещаться по контексту просмотра верхнего уровня (тот, который называется _top ).
  • allow-top-navigation-by-user-activation : позволяет ресурсу перемещаться по контексту просмотра верхнего уровня, но только если это инициируется жестом пользователя.
Примечания о песочнице:
  • Когда встроенный документ имеет то же происхождение, что и страница внедрения, настоятельно не рекомендуется использовать как allow-scripts ,так и allow-same-origin , так как это позволяет встроенному документу удалить атрибут sandbox что делает его не более безопасным, чем отсутствие использования Атрибут sandbox вообще.
  • Песочница бесполезна, если злоумышленник может отображать контент за пределами изолированного iframe — например, если средство просмотра открывает фрейм в новой вкладке. Такой контент также должен подаваться из отдельного источника, чтобы ограничить потенциальный ущерб.
  • sandbox атрибут не поддерживается в Internet Explorer 9 и более ранних версий.
src
URL-адрес страницы для встраивания. Используйте значение about:blank , чтобы вставить пустую страницу, соответствующую политике одного и того же происхождения . Также обратите внимание, что программное удаление атрибута src <iframe> (например, через Element.removeAttribute() ) вызывает загрузку about:blank во фрейме в Firefox (начиная с версии 65), браузерах на основе Chromium и Safari / iOS.
srcdoc
Встроенный HTML-код для встраивания, переопределив атрибут src . Если браузер не поддерживает атрибут srcdoc , он вернется к URL-адресу в атрибуте src .
width
Ширина рамки в пикселях CSS. По умолчанию 300 .

Утраченные атрибуты

Эти атрибуты устарели и могут больше не поддерживаться всеми агентами пользователя.Вы не должны использовать их в новом содержимом и постарайтесь удалить их из существующего содержимого.

align Этот устаревший API больше не следует использовать, но он, вероятно, по-прежнему будет работать.
Выравнивание этого элемента с учетом окружающего контекста.
frameborder Этот устаревший API больше не следует использовать, но он, вероятно, по-прежнему будет работать.
Значение 1 (по умолчанию) рисует границу вокруг этого кадра. Значение 0 удаляет границу вокруг этого кадра, но вместо этого вы должны использовать border свойства CSS для управления границами <iframe> .
longdesc Этот устаревший API больше не следует использовать, но он, вероятно, по-прежнему будет работать.
URL-адрес длинного описания содержимого фрейма.Из-за широко распространенного неправильного использования,это не полезно для невизуальных браузеров.
marginheight Этот устаревший API больше не следует использовать, но он, вероятно, по-прежнему будет работать.
Количество пространства в пикселях между содержимым рамки и ее верхней и нижней границами.
marginwidth Этот устаревший API больше не следует использовать, но он, вероятно, по-прежнему будет работать.
Количество пространства в пикселях между содержимым рамки и ее левой и правой границами.
scrolling Этот устаревший API больше не следует использовать, но он, вероятно, по-прежнему будет работать.
Указывает,когда браузер должен предоставить полосу прокрутки для фрейма:
  • auto : только если содержимое фрейма больше его размеров.
  • yes : всегда показывать полосу прокрутки.
  • no : никогда не показывать полосу прокрутки.

Нестандартные атрибуты

mozbrowser Этот API не стандартизирован.
Заставляет <iframe> действовать как окно браузера верхнего уровня. См. Подробности в API браузера .
Доступно только для WebExtensions .

Scripting

Встроенные фреймы, как и элементы <frame> , включаются в псевдо-массив window.frames .

С HTMLIFrameElement объекта DOM HTMLIFrameElement сценарии могут получить доступ к объекту window кадрированного ресурса через свойство contentWindow . Свойство contentDocument относится к document внутри <iframe> , так же, как contentWindow.document .

Изнутри фрейма скрипт может получить ссылку на свое родительское окно с помощью window.parent .

Доступ сценария к содержимому фрейма регулируется политикой одинакового происхождения . Сценарии не могут получить доступ к большинству свойств в других объектах window если сценарий был загружен из другого источника, включая сценарии внутри фрейма, обращающиеся к родительскому элементу фрейма. Связь между источниками может быть достигнута с помощью Window.postMessage() .

Позиционирование и масштабирование

В качестве заменяемого элемента положение, выравнивание и масштабирование встроенного документа в блоке элемента <iframe> можно настроить с помощью свойств object-position и object-fit .

Examples

Простой <iframe>

<iframe> в действии. После создания фрейма, когда пользователь нажимает кнопку, его заголовок отображается в предупреждении.

HTML
<iframe src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html"
            title="iframe Example 1">
</iframe>
Result

Проблема доступности

Люди, использующие вспомогательные технологии, такие как программы чтения с экрана, могут использовать атрибут title в <iframe> , чтобы пометить его содержимое. Значение заголовка должно кратко описывать встроенный контент:

<iframe title="Wikipedia page for Avocados" src="https://en.wikipedia.org/wiki/Avocado"></iframe>

Без этого заголовка они должны перейти в <iframe> , чтобы определить, что это за встроенное содержимое. Этот сдвиг контекста может сбивать с толку и отнимать много времени, особенно для страниц с несколькими <iframe> и / или если встраиваемые файлы содержат интерактивный контент, такой как видео или аудио.

Specifications

Совместимость с браузерами

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidХромовый AndroidFirefox для AndroidОпера АндроидSafari на IOSSamsung Интернет
iframe

1

12

Yes

resize свойство CSS не оказывает никакого влияния на этот элемент из — за ошибки 680823 .

Yes

Yes

Yes

В Safari есть ошибка, которая предотвращает загрузку iframe , если элемент iframe был скрыт при добавлении на страницу. iframeElement.src = iframeElement.src должен вызвать загрузку iframe.

Yes

Yes

Yes

resize свойство CSS не оказывает никакого влияния на этот элемент из — за ошибки 680823 .

Yes

Yes

В Safari есть ошибка, которая предотвращает загрузку iframe , если элемент iframe был скрыт при добавлении на страницу. iframeElement.src = iframeElement.src должен вызвать загрузку iframe.

Yes

align

1

12

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

allow

60

79

74

No

47

11.1

60

60

No

44

11.3

8.0

allowfullscreen

27

17-38

≤79

12-79

18

9

11

≤15

15-25

7

Yes

37

37-38

27

18-38

18

9

≤14

14-25

7

Yes

1. 5

1.0-3.0

allowpaymentrequest

No

No

56-83

No

No

No

No

No

56-83

No

No

No

aspect_ratio_computed_from_attributes

79

79

71

69-71

No

66

14

79

79

79

57

14

12.0

external_protocol_urls_blocked

?

?

67

?

?

?

?

?

67

?

?

?

frameborder

1

12

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

height

1

12

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

loading

77

79

No

No

64

No

77

77

No

55

No

12. 0

longdesc

1

12

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

marginheight

1

12

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

marginwidth

1

12

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

name

1

12

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

referrerpolicy

51

79

50

No

38

11. 1

51

51

50

41

No

7.2

sandbox

4

12

17

10

15

5

Yes

Yes

17

?

4.2

Yes

sandbox-allow-downloads

83

83

82

No

?

No

83

83

82

?

No

?

sandbox-allow-modals

?

?

49

No

?

?

?

?

49

?

?

?

sandbox-allow-popups

Yes

≤18

28

?

Yes

?

Yes

Yes

27

?

?

Yes

sandbox-allow-popups-to-escape-sandbox

46

79

49

No

32

?

46

46

49

32

?

5. 0

sandbox-allow-presentation

53

79

50

No

40

?

No

53

50

41

?

6.0

sandbox-allow-same-origin

Yes

Chrome 70 и более ранние версии блокируют выполнение скриптов без allow-scripts , даже если установлен параметр allow-same-origin . Например, любые связанные обработчики для событий щелчка узлов внутри iframe выдают ошибку при заблокированном выполнении скрипта.

Yes

Yes

Yes

Yes

Yes

Safari блокирует выполнение скриптов без allow-scripts даже если установлен параметр allow-same-origin . Например, любые связанные обработчики для событий щелчка узлов внутри iframe выдают ошибку при заблокированном выполнении скрипта.

Yes

Yes

Yes

Yes

Yes

Yes

sandbox-allow-storage-access-by-user-activation

No

No

65

No

No

11.1

No

No

65

No

11.3

No

sandbox-allow-top-navigation-by-user-activation

58

79

79

No

45

11.1

Изначально отсутствовал в версии 11.1,но был добавлен в подверсии 13605.1.33.1.2.

58

58

79

43

?

7.0

scrolling

1

12

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

src

1

12

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

srcdoc

20

79

25

No

15

6

37

25

25

?

?

1. 5

width

1

12

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

Yes

См.также

Настройка iframe для встраивания опубликованных страниц—ArcGIS Insights

В этом разделе

Опубликованные страницы Insights можно встраивать в код HTML, используя тег <iframe>. Встроенный фрейм (iframe) позволяет встроить документ HTML в другой документ (страницу). Настроить iframe можно двумЯ способами: оптимизировать iframe для встраивания в ArcGIS StoryMaps или настроить iframe, который может быть встроен в веб-сайты или другие приложения ArcGIS.

Настройка iframe

iframe генерируется при публикации страницы.

Выполните следующие шаги для настройки iframe:

  1. Выполните шаги для публикации страницы.
  2. В окне Страница успешно опубликована, в разделе Встраивание щелкните кнопку Опции, чтобы отобразить опции iframe. Выберите ArcGIS StoryMaps или Пользовательский iFrame.
  3. В разделе Размер откройте меню и выберите размер.

    В ArcGIS StoryMaps возможны опции По умолчанию и Пользовательский. Для Пользовательский iFrame возможны опции размеров Маленький, Средний, Большой и Пользовательский.

  4. Щелкните кнопку Копировать, чтобы скопировать iframe.

Можно скопировать iframe в код HTML или в приложение, которое поддерживает встраивание iframe.

iframe ArcGIS StoryMaps

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

Блок Встраивание в конструкторе историй имеет три варианта размеров: маленький, средний и большой. Iframe, которые оптимизированы для StoryMaps, заполняют всю ширину блока. Для наилучшего результата, настройте размер блока Встраивание и ширину страницы Insights так:

Размер встраиваемого блокаМаксимальная ширина страницы Insights

Маленький

Две карточки с размером по умолчанию

Средняя

Три карточки с размером по умолчанию

Большой

Четыре карточки с размером по умолчанию

Если ширина страницы Insights больше блока Встраивание, появится полоса прокрутки.

Для iframe в ArcGIS StoryMaps доступны следующие размеры:

РазмерОбъекты-размерыОписание

По умолчанию

Ширина = 100 процентов

Высота = 100 процентов

Размер iframe в конструкторе историй подгоняется в размерам блока Встраивание по умолчанию (маленький, средний или большой).

Пользовательский

Ширина = 100 процентов

Высота = высота карточек на странице

Размер iframe подгоняется к ширине блока Встраивание (маленький, средний или большой) и высоте уврточек на странице Insights.

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

Пользовательские iframe

Пользовательские iframe могут встраиваться в большинство кодов HTML, включая веб-сайты и продукты ArcGIS, такие как ArcGIS Experience Builder, ArcGIS Dashboards и ArcGIS Hub.

Рекомендуется использовать одну карточку в маленьком iframe при встраивании ресурсов Insights в Experience Builder для оптимизации просмотра на устройствах небольшого и среднего размера.

Для пользовательских iframe в доступны следующие размеры:

РазмерОбъекты-размерыОписание

Маленький

Ширина = 420 пикселов

Высота = 420 пикселов

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

Средняя

Ширина = 830 пикселов

Высота = 830 пикселов

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

Большой (по умолчанию)

Ширина = 100 процентов

Высота = 100 процентов

Полный размер элемента iframe в коде HTML.

Пользовательский

Ширина = ширина карточек на странице

Высота = высота карточек на странице

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

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

Ресурсы

Используйте следующие ресурсы, чтобы больше узнать о встраивании iframes в приложения ArcGIS:

Отзыв по этому разделу?

HTML Iframes

IFrame используется для отображения веб-страницы в веб-страницы.

Рамка Описание

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

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

Из-за этой стоимости, кадры (за исключением элемента IFrame) допускается только в HTML 4.01 Frame-набор.

Iframes также может содержать документы на разных серверах. В этом случае взаимодействие между окнами блокируется браузером.

Iframe Синтаксис

Синтаксис для добавления IFRAME является:

<iframe src=» URL «></iframe>

src атрибут указывает URL — адрес (web address) — (web address) страницы IFrame.

Iframe — Набор высота и ширина

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

Значения атрибутов указываются в пикселях по умолчанию, но они могут также быть в процентах (like «80%») , (like «80%») .

Iframe — Удалите Border

По умолчанию, IFrame имеет черную рамку вокруг него.

Чтобы удалить границу, добавьте style атрибута и использовать свойство CSS границы:

С помощью CSS, вы можете также изменить размер, стиль и цвет границы Iframe в:

Используйте IFRAME в качестве мишени для Link

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

target атрибут ссылки должен ссылаться на name атрибута фрейма:

пример

<iframe src=»demo_iframe.htm» name=»iframe_a»></iframe>
<p><a href=»http://www.w3ii.com» target=»iframe_a»>w3ii.com</a></p>

Попробуй сам »

HTML IFrame тегов

Тег Описание
<iframe> Определяет встроенный фрейм

Проверьте себя с упражнениями!

Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4»

Фреймы в HTML | Синтаксис и тег-атрибут Iframe с разными примерами

Введение в iframes в HTML

Iframes в HTML — это не что иное, как встроенные фреймы, которые используются в качестве HTML-документа для добавления в него другого HTML-документа. Он в основном используется на веб-страницах или в процессах веб-разработки для включения некоторого другого контента через другой источник, например рекламу на этой веб-странице.

Большинство веб-дизайнеров используют Iframe для представления интерактивных приложений на веб-сайте или на веб-страницах. Это стало возможным благодаря использованию javaScript или атрибута target в HTML.

Основной целью Iframe является отображение веб-страницы на другой веб-странице. Встроенная рамка должна отображаться с помощью тега

Синтаксис

  • Теперь посмотрим, как именно будет использовать Iframe:
  • Здесь < iframe > — тег, в котором будут определены HTML-фреймы. Атрибуты src, используемые для определения URL-адреса страницы встроенного фрейма, которая будет включена.

Пример:

  • Также возможно задать некоторую конкретную высоту и ширину для нашего Iframe в формате пикселей следующим образом:
  • В приведенном выше синтаксисе все будет происходить одинаково, кроме того, мы можем указать высоту и ширину в формате пикселей, определяя как

Пример:

  • Еще один метод определения высоты и ширины для iframe с использованием значений через CSS показан в синтаксисе ниже:
  • Все то же самое, что и выше, только внесение изменений в указание значений.

Пример:

  • В iframe добавлена ​​еще одна особенность: мы можем удалить уже определенные границы фрейма, используя свойство border none. Синтаксис для этого следующий:
  • С помощью CSS можно также сделать много вещей с рамкой, например, изменить размер рамки, применить некоторый цвет к границе и т. Д.

Iframe может использоваться как Target для ссылки, используя синтаксис:

  • В приведенном выше синтаксисе src — это наш обычный URL, здесь целевой атрибут ссылки будет ссылаться на атрибут name в нашем теге iframe.

Пример:

Атрибут тега iframes

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

  • Src: Этот атрибут используется для вставки файла, который необходимо включить во фрейм. URL указывает целевую веб-страницу, которая будет загружена в iframe.
  • Имя: Имя — это атрибут, который используется для присвоения некоторого идентификационного имени фрейму. Это наиболее полезно, когда вы создаете одну ссылку, чтобы открыть другую веб-страницу.
  • allowfullscreen: этот атрибут позволяет отображать ваш кадр в формате полной ширины. поэтому мы должны установить значение true, чтобы это произошло
  • Frameborder: это полезный атрибут, который позволяет показывать рамку или не показывать рамку рамке. Значение 1 показывает границу & 0, чтобы не показывать границу фрейма.
  • Пропускная способность: позволяет определить пространство между левой и правой сторонами кадра
  • Marginheight: позволяет определить пространство между верхом и низом рамки.
  • Прокрутка: Эти атрибуты используются для управления показом полосы прокрутки или нет. включены значения «да» или «нет» или «авто».
  • Высота: используется для определения высоты рамки. Погода в% или в пикселях
  • Ширина: используется для определения ширины рамки. Погода в% или в пикселях
  • Longdesc: с помощью этого атрибута вы можете связать другую страницу с длинным описанием содержимого вашего фрейма.

Примеры фреймов в HTML

Вот несколько примеров iframes в HTML, которые описаны ниже:

Пример № 1

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

Код:

HTML Iframes Demo

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

Выход:

Пример № 2

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

Код:

HTML Iframes Demo

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

Выход:

Пример № 3

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

Код:

HTML Iframes Demo

Здесь мы показываем пример Iframe, который содержит рамку с некоторыми дополнительными CSS-свойствами

Выход:

Пример № 4

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

Код:

Iframe Demo — цель для ссылки

EDUCBA

Когда цель ссылки совпадает с именем iframe, ссылка открывается в iframe.

Выход:

Целевой выход:

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

Вывод

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

Рекомендуемые статьи

Это руководство по Iframes в HTML. Здесь мы обсудим синтаксис, атрибут тега iframes в HTML, а также различные примеры и реализацию кода. Вы также можете посмотреть следующие статьи, чтобы узнать больше —

  1. Команды Selenium
  2. HTML-фреймы
  3. HTML текстовая ссылка
  4. Создать таблицы в HTML

HTML JavaScript

JavaScript делает HTML-страницы более динамичными и интерактивными.

Тег HTML

Попробуй сам "

Вкус JavaScript

Вот несколько примеров того, что умеет JavaScript:

Пример

JavaScript может изменять содержимое:

документ.getElementById ("демонстрация"). innerHTML = "Привет, JavaScript!";

Попробуй сам "

Пример

JavaScript может изменять стили:

document.getElementById ("демонстрация"). style.fontSize = "25px";
document.getElementById («демонстрация»). Style.color = «красный»;
document.getElementById («демонстрация»). Style.backgroundColor = «желтый»;

Попробуй сам "

Пример

JavaScript может изменять атрибуты:

document. getElementById ("изображение"). src = "picture.gif";

Попробуй сам "

Тег HTML

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *