От к — другие технологии внедрения
К настоящему моменту вы уже должны уметь прикреплять вложения на свои веб-страницы, включая изображения, видео и аудио. На этом этапе мы хотели бы сделать шаг в сторону, рассматривая некоторые элементы, которые позволяют встраивать в ваши веб-страницы самые разнообразные типы контента: (en-US), и (en-US). предназначен для встраивания других веб-страниц, а два других позволяют встраивать PDF-файлы, SVG и даже Flash — устаревшую технологию, которую вы всё равно иногда увидите.
| Предпосылки: | Базовая компьютерная грамотность, установка базового программного обеспечения, базовые знания работы с файлами, знакомство с основами HTML (как описано в разделе Начало работы с HTML) и предыдущими статьями в этом модуле. |
|---|---|
| Задача: | Узнать, как встраивать элементы в веб-страницы, используя (en-US), и (en-US), например, флеш-ролики и другие веб-страницы |
Краткая история внедрения
Давным-давно в Интернете было популярно использовать фреймы для создания веб-сайтов — небольших частей веб-сайта, хранящихся на отдельных страницах HTML. Они были встроены в главный документ, называемый набором фреймов, который позволял вам указать область на экране, которую заполнял каждый фрейм, а не столбец и строку таблицы. Они были популярны в середине и конце 90-х годов и были доказательством того, что разделение веб-страницы на более мелкие куски лучше сказывается на скорости загрузки, особенно это заметно, когда сетевые соединения были медленными. Однако у них было много проблем, которые намного перевешивали любые положительные моменты, когда скорость сети становилась выше. Поэтому вы больше не увидите, чтобы их использовали.
Спустя некоторое время (конец 90-х, начало 2000-х годов) технологии плагинов, такие как Java-апплеты и Flash, стали очень популярными — это позволило веб-разработчикам встраивать богатый контент в веб-страницы, такие как видео и анимации, которые просто не были доступны только через HTML. Внедрение этих технологий осуществлялось посредством таких элементов, как (en-US) и менее используемого , и они были очень полезны в то время. С тех пор они вышли из моды из-за многих проблем, включая доступность, безопасность, размер файла и многое другое; в наши дни большинство мобильных устройств больше не поддерживают такие плагины, и поддержка на компьютерах также уменьшается.
Урок истории закончен, давайте двигаться дальше и посмотрим, как использовать некоторые из них.
Активное обучение: использование классического внедрения
В этой статье мы собираемся перейти прямо в раздел активного обучения, чтобы сразу дать вам реальное представление о том, для чего используются технологии внедрения. Нам очень хорошо знаком Youtube, но многие не знают о некоторых доступных для него средствах совместного доступа. Давайте посмотрим, как Youtube позволяет нам встраивать видео на любую страницу, которая нам нравится, используя (en-US).
- Сначала перейдите на Youtube и найдите понравившееся вам видео.
- Под видео вы найдёте кнопку «Поделиться» — нажмите, чтобы отобразить параметры совместного доступа.
- Выберите кнопку «Вставить», и вам будет предоставлен код — скопируйте его.
- Вставьте его в поле ввода ниже и посмотрите на результат в Output.
Дополнительно вы также можете попробовать внедрить карту Google следующим образом:
- Перейдите в Карты Google и найдите подходящую вам карту.
- Нажмите «Меню» (три горизонтальные линии) в верхнем левом углу пользовательского интерфейса.
- Выберите параметр Ссылка/код.
- Выберите параметр Встраивание карт, который даст вам код — скопируйте его.
- Вставьте его в поле ввода ниже и посмотрите на результат в Output.
Если вы допустили ошибку, вы всегда можете сбросить её с помощью кнопки «Сброс». Если вы действительно застряли, нажмите кнопку «Показать решение», чтобы увидеть ответ.
h2>Live outputh2> div class="output" style="min-height: 250px;">div> h2>Editable codeh2> p class="a11y-label"> Press Esc to move focus away from the code area (Tab inserts a tab character). p> textarea id="code" class="input" style="width: 95%;min-height: 100px;">textarea> div class="playable-buttons"> input id="reset" type="button" value="Reset" /> input id="solution" type="button" value="Show solution" /> div>
html font-family: sans-serif; > h2 font-size: 16px; > .a11y-label margin: 0; text-align: right; font-size: 0.7rem; width: 98%; > body margin: 10px; background: #f5f9fa; >
var textarea = document.getElementById("code"); var reset = document.getElementById("reset"); var solution = document.getElementById("solution"); var output = document.querySelector(".output"); var code = textarea.value; var userEntry = textarea.value; function updateCode() output.innerHTML = textarea.value; > reset.addEventListener("click", function () textarea.value = code; userEntry = textarea.value; solutionEntry = htmlSolution; solution.value = "Show solution"; updateCode(); >); solution.addEventListener("click", function () if (solution.value === "Show solution") textarea.value = solutionEntry; solution.value = "Hide solution"; > else textarea.value = userEntry; solution.value = "Show solution"; > updateCode(); >); var htmlSolution = '\n\n'; var solutionEntry = htmlSolution; textarea.addEventListener("input", updateCode); window.addEventListener("load", updateCode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function (e) if (e.keyCode === 9) e.preventDefault(); insertAtCaret("\t"); > if (e.keyCode === 27) textarea.blur(); > >; function insertAtCaret(text) var scrollPos = textarea.scrollTop; var caretPos = textarea.selectionStart; var front = textarea.value.substring(0, caretPos); var back = textarea.value.substring( textarea.selectionEnd, textarea.value.length, ); textarea.value = front + text + back; caretPos = caretPos + text.length; textarea.selectionStart = caretPos; textarea.selectionEnd = caretPos; textarea.focus(); textarea.scrollTop = scrollPos; > // Update the saved userCode every time the user updates the text area code textarea.onkeyup = function () // We only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if (solution.value === "Show solution") userEntry = textarea.value; > else solutionEntry = textarea.value; > updateCode(); >;
Подробно об Iframes
Итак, это было легко и весело, не так ли? Элементы (en-US) предназначены для размещения других веб-документов в текущем документе. Это отлично подходит для включения стороннего контента на ваш сайт, который, возможно, не имеет прямого контроля и не хочет реализовывать вашу собственную версию — например, видео от поставщиков онлайн-видео, системы комментариев, такие как Disqus, карты от поставщиков онлайн-карт, рекламных баннеров и т. д. Живые редактируемые примеры, которые вы использовали в этом курсе, реализованы с помощью .
Есть несколько серьёзных Проблем безопасности при использовании , которые мы обсудим ниже, но это не значит, что вы не должны использовать их на своих сайтах — они просто требуют некоторых знаний и тщательного обдумывания. Давайте рассмотрим код немного подробнее. Скажем, вы хотите добавить глоссарий MDN на одну из своих веб-страниц. Вы можете попробовать что-то вроде этого:
Этот пример включает основы, необходимые для использования :
Если установлено, может быть помещён в полноэкранный режим с использованием полноэкранного API (что несколько выходит за рамки этой статьи).
Если установлено значение 1, это указывает браузеру нарисовать границу между этим фреймом и другими фреймами, что является поведением по умолчанию. 0 удаляет границу. Использование этого на самом деле не рекомендуется, так как тот же эффект можно улучшить, используя border : none; в CSS.
Эти атрибуты определяют ширину и высоту, в которых вы хотите использовать iframe.
Этот атрибут, который работает в более современных браузерах, чем остальные функции (например, IE 10 и выше). Он запрашивает повышенные настройки безопасности. Об этом мы расскажем в следующем разделе.
Примечание: Чтобы повысить скорость загрузки, рекомендуется установить атрибут src в элементе iframe с помощью JavaScript после того, как основное содержимое будет загружено. Это ускорит вашу страницу и уменьшит время загрузки официальной страницы (важный показатель SEO.)
Проблемы безопасности
Выше мы упомянули о проблемах безопасности. Давайте рассмотрим это чуть подробнее. Мы не ожидаем, что вы всё поймёте с первого раза. Мы просто хотим сообщить вам о проблеме и предоставить ссылку, чтобы вы могли вернуться к ней, когда станете более опытными и начнёте рассматривать использование iframe в своих экспериментах и работе. Кроме того, нет необходимости бояться и не использовать — вам просто нужно быть осторожным. Продолжим.
Разработчики браузеров и веб-разработчики на горьком опыте усвоили, что iframe — частая цель (официальный термин: вектор атаки) плохих людей в Интернете (часто называемых хакерами, или, более точно, крекерами) для атаки при попытке злонамеренно изменить ваши веб-страницы или обманом заставить посетителей делать то, чего они не хотят, например, раскрыть конфиденциальную информацию вроде имени пользователя и пароли. Чтобы избежать этого, авторы спецификаций и разработчики браузеров разработали различные механизмы безопасности для обеспечения защиты , лучшие из которых мы рассмотрим ниже.
Примечание: Кликджекинг – это один из видов обычной атаки iframe, когда хакеры внедряют невидимый iframe в ваш документ (или внедряют ваш документ на свой собственный вредоносный веб-сайт) и используют его для захвата взаимодействия пользователей. Это обычный способ ввести пользователей в заблуждение или украсть конфиденциальные данные.
Быстрый пример — попробуйте загрузить предыдущий пример, который мы показали выше, в ваш браузер (вы можете найти его живой пример на Github (см. Также исходный код). На самом деле, вы ничего не увидите на странице, т.к. если вы посмотрите в консоль в инструментах разработчика браузера, вы увидите сообщение, объясняющее вам, почему. В Firefox вы получите сообщение «Отказано в доступе» в связи с X-Frame-Options: https://developer.mozilla.org/ru/docs/Glossary не разрешает кадрирование. Это связано с тем, что разработчики, которые построили MDN, включили параметр на сервере, который обслуживает страницы веб-сайта, запрещая им внедряться внутри (см. Настройка директивы CSP ниже). Суть здесь такова — целой странице MDN на самом деле нет смысла встраиваться в другие страницы — конечно, если вы не хотите сделать что-то вроде встраивания их на свой сайт и выставлять их как свои собственные; или пытаться украсть данные с помощью clickjacking, что очень плохо. Плюс, если все начнут это делать, вся дополнительная пропускная способность начнёт стоить Mozilla больших денег.
Используйте только при необходимости
Иногда имеет смысл вставлять сторонний контент — например, видео и карты, но вы избежите головной боли, если будете вставлять сторонний контент только тогда, когда это абсолютно необходимо. Хорошее эмпирическое правило для веб-безопасности: «Вы никогда не можете быть слишком осторожным. Если вы что-то сделали, дважды проверьте это. Если кто-то другой сделал это, считайте, что это опасно, пока не будет доказано обратное».
Помимо безопасности, вы также должны знать об интеллектуальной собственности. Большинство контента находится под защитой авторских прав, даже тот, от которого вы не могли ожидать (например, большинство картинок на Wikimedia Commons). Никогда не выводите контент на свою страницу, если он вам не принадлежит или если нет однозначного письменного разрешения от правообладателя. Наказания за нарушения авторских прав строги. И, повторимся, вы никогда не можете быть слишком осторожными.
Если контент лицензирован, вы должны соблюдать условия лицензии. Например, контент на MDN лицензирован на licensed under CC-BY-SA. Это означает, что вы должны относиться к нам с уважением, когда цитируете наш контент, даже если внесли в него существенные изменения.
Используйте HTTPS
HTTPS это зашифрованная версия HTTP. Вы должны обслуживать свои веб-сайты, используя HTTPS, всегда, когда это возможно :
- HTTPS уменьшает вероятность того, что контент был изменён по пути;
- HTTPS запрещает доступ внедрённого контента к контенту в вашем исходном документе и наоборот.
Использование HTTPS требует сертификат безопасности, что может обходиться в копеечку (хотя есть Let’s Encrypt, что облегчает задачу). Если вы не можете его получить, вы можете отдавать свой родительский документ с помощью HTTP. Однако, из-за второго преимущества HTTPS во что бы то ни стало вы не должны внедрять сторонний контент с HTTP. (В лучшем случае ваш браузер выдаст угрожающее предупреждение.) Все уважаемые компании, которые делают контент доступным для внедрения через , доступны через HTTPS — посмотрите URL-адреса внутри 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 (en-US) (метаданные, отправленные вместе с вашими веб-страницами, когда они обслуживаются с веб-сервера), предназначенных для улучшения безопасности вашего HTML-документа. Когда дело доходит до обеспечения безопасности , вы можете настроить сервер для отправки соответствующего X-Frame-Options заголовка. (en-US) Это может помешать другим веб-сайтам встраивать ваш контент на их веб-страницы (что позволило бы использовать кликджекинг и множество других атак), что и было сделано разработчиками MDN, как мы видели ранее.
Примечание: Вы можете прочитать пост Фредерика Брауна On the X-Frame-Options Security Header для более детальной информации по теме. Разумеется, объяснение в этой статье далеко не полное.
Элементы и
В отличие от (en-US), элементы и (en-US) выполняют другую функцию. Они являются инструментами общего назначения для встраивания нескольких типов внешнего контента, включая плагиновые технологии, такие как Java Applets и Flash, PDF (которые могут отображаться в браузере с плагином PDF) и даже такой контент, как видео, SVG и изображения!
Примечание: Плагин — это программное обеспечение, обеспечивающее доступ к контенту, который браузер не может читать изначально.
Тем не менее, вы вряд ли будете использовать эти элементы очень часто. Апплеты не использовались годами, Flash в настоящее время не очень популярен из-за ряда причин (см. Дело против плагинов, ниже), PDF-файлы, как правило, лучше открывать по ссылке, а другой контент — такой, как изображения и видео, могут обрабатываться намного проще. Плагины и эти методы внедрения действительно являются устаревшими технологиями, и мы упоминаем их здесь на случай, если вы столкнётесь с ними в определённых обстоятельствах, таких как интрасети или корпоративные проекты.
Если вам нужно внедрить контент плагина, ниже исчерпывающая информация, которая вам понадобится:
| (en-US) | ||
|---|---|---|
| URL встраиваемого контента | src | data (en-US) |
| точный media type встраиваемого контента | type | type (en-US) |
| высота и ширина (в пикселях) элемента, управляемого плагином | height width | height (en-US) width (en-US) |
| имена и значения, предоставляемые плагину в качестве параметров | Особые атрибуты,с их именами и значениями | одиночные элементы (en-US), находящиеся внутри |
| независимый HTML-контент в качестве резерва для отсутствующего ресурса | не поддерживается ( является устаревшим) | содержится внутри , после элементов |
Примечание: Элементу необходим атрибут data , атрибут type , или оба сразу. Если вы используете их вместе, вы также можете использовать атрибут typemustmatch (en-US) (имеющийся в наличии только в Firefox, на момент написания данной статьи). Атрибут typemustmatch предотвращает запуск файла, только если в в атрибут type не записан соответствующий медиа-тип. Следовательно, атрибут typemustmatch может предоставлять значительные преимущества в безопасности в случае встраивания контента из других источников origin (Таким образом, не давая возможности злоумышленникам запускать произвольные скрипты посредством плагинов).
embed src="whoosh.swf" quality="medium" bgcolor="#ffffff" width="550" height="400" name="whoosh" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
Достаточно ужасно, не так ли? Html-код, генерируемый Flash, имел склонность быть значительно хуже. Он использовал элемент вместе со встроенным элементом для скрытия всего фундамента (взгляните на пример). Flash ранее использовался в качестве резерва для HTML5-видео (в случае его отсутствия), но со временем необходимость в этом отпала.
Давайте взглянем на пример , встраивающего PDF в страницу (взгляните live example и source code):
object data="mypdf.pdf" type="application/pdf" width="800" height="1200" 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) больше не поддерживает его.
Заключение
Тема встраивания другого контента в веб-документы поначалу может показаться очень сложной для понимания, поэтому в этой статье мы попытались представить её простым, знакомым способом, который сразу же станет актуальным, но всё же намекает на некоторые из более сложных функций вовлечённых технологий. Начнём с того, что вы вряд ли будете использовать большое количество встраивании стороннего контента, помимо встроенных карт и видео на своих страницах.
Существует много других технологий, которые включают в себя внедрение внешнего контента, помимо тех, которые мы обсуждали здесь. Мы видели некоторые из них в предыдущих статьях, например , и , но есть и другие. Например, для 2D-и 3D-графики, сгенерированной JavaScript, и для встраивания векторной графики. Мы рассмотрим SVG в следующей статье модуля.
В этом модуле
- Images in HTML
- Video and audio content
- From to — other embedding technologies
- Adding vector graphics to the Web
- Responsive images
- Mozilla splash page
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Iframe что это в играх
iFrame или плавающий фрейм — отдельное окно, HTML-документ, который отображается вместе с другим содержимым страницы в окне браузера. Располагаться он может в любом месте, без привязки к тегу
Использование данного тега зачастую рискованно получением фильтра: сайт перестает полностью контролировать содержимое документа, так как его часть подгружается с другого сайта через iframe.
Поскольку мы перестаем контролировать содержимое, то через iframe возможна подгрузка нежелательного контента (18+, вирусы и прочее), что, в свою очередь, может привести к санкциям. А это отразится на продвижении в выдаче.
Зачем нужен iFrame
Чтобы ответить на этот вопрос, сначала нужно напомнить, что такое фрейм. Это отдельный, завершенный HTML-документ, который может отображаться в браузере вместе с другими HTML-документами.
iFrame нужен, чтобы встраивать традиционный фрейм, а также отдельные HTML-документы на разные страницы без применения тега . В результате получается, что на веб-странице появляется демонстрация контента другого URL-адреса с функцией прокрутки или без нее.
То есть со страницей фоново загружаются другие страницы. Пользователь увидит такие фреймы, только если задавать им определенные размеры, например, вид баннера.
Так выглядит простейший пример iframe: фрагмент кода с заданным размером фонового окна под баннер:
Данный тег поддерживается большинством браузеров, но некоторые параметры могут отличаться или вовсе не запускаться. Например, фреймы не запускаются в браузерах на основе аудио, используемых в автомобильном транспорте, или для людей со слабым зрением, а также на очень старых версиях браузеров.
Кроме того, фреймы используются не только на веб-ресурсах, но и в приложениях к программам. Зачастую они полезны для службы технической поддержки.
Например, вы вызываете кликом справку, в ответ появляется общее меню, рядом с которым в фоне открывается окошко, отвечающее за выбранный вами блок информации:
Элемент iframe
Элемент «IFrame» означает «встроенный кадр». Его можно использовать для включения другой страницы в вашу страницу. Нижеприведенный код подключает небольшой фрейм, который показывает точное содержимое base.html.
Песочница
Следующий код внедряет ненадежную веб-страницу с включенными ограничениями:
Чтобы разрешить встроенной странице запускать сценарии и отправлять формы, добавьте значение allow-scripts allow-forms к атрибуту sandbox.
Если есть ненадежный контент (например, комментарии пользователей) в том же домене, что и родительская веб-страница, iframe может использоваться для отключения сценариев, позволяя при этом родительскому документу взаимодействовать с его содержимым с помощью JavaScript.
Родительский документ может добавлять обработчики событий и изменять размер iframe в соответствии с его содержимым, что наряду с allow-top-navigation , позволяет создавать изолированный фрейм, который будет казаться частью родительского документа. Эта песочница не является заменой для полной защиты, но может использоваться как часть стратегии глубоко эшелонированной обороны.
Имейте в виду, что этот атрибут может быть уничтожен злоумышленником, разрешая пользователю напрямую посетить источник фрейма. Для уменьшения этой атаки можно использовать HTTP-заголовок Content-Security-Policy-Report-Only.
Размеры фрейма
Размер фрейма может быть изменен с использованием атрибутов width и height , значения в которых представлены в пикселях (HTML 4.01 разрешено процентное значение, но HTML 5 допускает только значения в пикселях CSS).
Использование атрибута srcdoc
Атрибут srcdoc может использоваться (вместо атрибута src ) для указания точного содержимого iframe как целого HTML-документа. Следующий код создаст фрейм с текстом «IFrames — это круто!».
Если атрибут srcdoc не поддерживается браузером, фрейм будет использовать атрибут src , однако если оба атрибута src и srcdoc присутствуют и поддерживаются браузером, srcdoc имеет приоритет.
В приведенном выше примере, если браузер не поддерживает атрибут srcdoc , он будет отображать содержимое страницы base.html.
Использование якорей во фреймах
Обычно изменение веб-страницы во фрейме инициируется с помощью самого Iframe , например, щелком на ссылке внутри Ifame . Тем не менее можно изменить содержимое фрейма из-за его пределов. Вы можете использовать в ссылке атрибут href , указывающий на желаемый URL-адрес, а в атрибуте target указать имя фрейма.
Могут ли элементы iframes повлиять на SEO сайта?
Тег (от англ. inline frame — встроенная рамка) — это отличный инструмент веб-дизайна, также известный как плавающий встроенный фрейм, которым пугают начинающих разработчиков. Он является одним из старейших тегов HTML и был представлен еще в 1997 году в HTML 4.01 Microsoft Internet Explorer. Видео с YouTube на других сайтах, кнопка «Нравится» известной социальной сети на любой странице, реклама казино? Все это .
Динамічний курс від skvot: Візуалізація екстер’єрів у 3DS MAX.
Мистецтво в 3DS MAX.
Данный тег позволяет добавлять на вашу страницу элементы мультимедиа и документы с других сайтов в контейнере заданного размера. Однако откуда взялись первые фреймы и почему вокруг столько негативных мифов?
История появления фреймов
В начале-середине 1990-х годов интернет выглядел совершенно по-другому. Скорость соединения тогда была в сотни раз ниже, чем сейчас, а потому сайты старались делать максимально минималистичными. Более того, считалось, что разделение одной страницы на несколько отдельных блоков помогает сайту в целом работать быстрее (то есть, когда у пользователя страница прогружается отдельными блоками, он может видеть какой-то контент до полной загрузки страницы). Поэтому для создания веб-сайтов стали использовать фреймы.
Это отдельные законченные HTML-документы, которые вместе с другими HTML-документами могут быть отображены в окне браузера. По сути, одна страничка разбивается на прямоугольные блоки, каждый из которых содержит в себе разные HTML-документы. Фактически разработчики, используя фреймы, создавали из веб-страниц подобие таблиц с некоторым количеством ячеек, каждая из которых являлась независимым элементом. Можно сказать, что пользователь видел на одном экране сразу несколько отдельных страниц сайта. При этом работа в одной ячейке не влияла на содержимое других.
Творчий курс від skvot: 3D-художник персонажів.
Створюйте світ персонажів.
Чтобы наглядно показать как это выглядело, рассмотрим следующий пример:
Вначале с помощью тега < frameset>создаются две строчки, которые разбивают страницу в соотношении 1:3. В верхней ячейке с помощью атрибута src= отображается документ top.html , который не прокручивается и размер которого не может быть изменен благодаря атрибутам scrolling=»no» и noresize . Нижняя же строка разбивается на два столбца. При этом левая колонка занимает 100 пикселей, а правая — оставшееся пространство, заданное символом звездочки. В левую ячейку загружается страница menu.html , в правый — content.html . Таким образом у пользователя на одном экране отображается сразу три страницы одного сайта.
Преимущества и недостатки такого подхода
Фреймы очень хорошо подходили для создания шапки сайта. Например, сверху создается горизонтальная ячейка со списком всех доступных страниц, а ниже — ячейка отображения. Когда пользователь нажимает, допустим, «Новости», на второй ячейке у него идет отображение списка новостей, при этом, верхняя ячейка продолжает показывать список доступных страниц для перехода. В целом это касается любых неподвижных элементов интерфейса. То есть, если разработчику нужно было, чтобы на его сайте всегда отображалось какое-либо изображение (логотип), он мог зафиксировать его в отдельном фрейме. Еще одним интересным применением можно считать обучающие сайты, где на одном фрейме располагалась информация о задании, на другом — форма для ввода данных учеником, а на третьем — результат его действий.
Однако использование фреймов также играло с разработчиками злую шутку. Например, пользователи абсолютно не имели понятия в каком разделе сайта они находятся, потому что в адресной строке всегда отображала одна и та же информация (http://mysite.com/index.html). Все фреймы встраивались на одну страничку — index.html — и не влияли на отображение. То же касалось и поисковиков, они просто не могли находить отдельные страницы сайтов, использующих фреймы. Если же пользователь каким-то образом узнавал адрес внутренней страницы и переходил на нее напрямую, то вся структура сайта для него ломалась.
Что такое iframe?
В конце 1990-х годов начали активно развиваться технологии Java и Flash, что позволило разработчикам не только встраивать на свои странички различные видео, анимации и приложения, но и решить некоторые проблемы с фреймами. Например, поломка структуры сайта при переходе на внутреннюю страницу легко устранялась средствами JavaScript. В начале кода прописывается скрипт, который будет создавать фреймовую структуру в том случае, когда пользователь попадает на «неверную» страницу. Кроме того, в мире начала расти средняя скорость интернет-соединения, доступная обывателям, а поэтому необходимость ячеистой структуры сайтов отпадала.
Поэтому постепенно фреймы канули в небытие и на данный момент уже считаются устаревшей технологией и не поддерживаются в HTML5 (таких тегов, как frame, frameset и noframes уже попросту не существует). А затем из-за проблем с безопасностью, скоростью работы и доступностью начали уходить и Flash-технологии (многие браузеры уже давно отказались от ее поддержки). А для встраивания мультимедийного контента на страницы появляется универсальный тег iframe.
Для чего нужен и где используется iframe?
Как уже упоминалось выше, тег используют для того, чтобы на своей странице отображать внешние документы, будь то другие страницы, сторонние видео (например, с YouTube), презентации и другой визуальные контент, различные апплеты (например, формы оплаты или карты Google Maps), для отображения рекламы других сайтов (или же создания фонового трафика через партнерские программы), а также для создания приложений (например, справочных документов). То есть разработчик может добавлять контент в любом месте на странице, без необходимости включать его в структуру веб-макета как традиционный элемент. Кроме того, встраиваемый элемент будет независимым HTML-документом, а значит, он будет изолирован от JavaScript и CSS основной страницы.
Знатоки не рекомендуют использовать фреймы для создания фотогалерей и чатов, а делать их самостоятельными невстроенными элементами. Также стоит забыть об «олдскульном» применении фреймов для создания навигационной панели. Некоторые современные браузеры могут не поддерживать отображение встраиваемых элементов, поэтому нужно позаботиться о защите от такого сценария (добавлением предупреждающего текста между тегами ).
Освітній курс від mate.academy: UI/UX Design.
Творчий розвиток навичок дизайну.
Примеры использования iframe
Одним из ярких примеров использования iframe , который каждый из читателей может проделать самостоятельно прямо сейчас, является добавление карт из Google Maps на любую страничку. Если взять приложение Google Maps и открыть «Меню», там можно найти строчку «Ссылка/код». Там есть два параметра: «Отправка ссылки», чтобы поделиться картой с другом через мессенджер или социальные сети, и «Встраивание карт». Последний выдает вам код с тегом для размещения на своем сайте:
Чтобы добавить на страничку видео с YouTube, достаточно найти нужный ролик, нажать на кнопку «Поделиться» и выбрать из списка доступных вариантов «Встроить». Затем ввести у себя полученный код:
Можно также использовать iframe , чтобы добавить кнопку для призыва пользователей делиться ссылкой на ваш сайт, например, в Twitter:
-
allow-forms — дает право элементу отправлять формы.allow-modals — открывать новые модальные окна (которые делаются с помощью функции alert в JavaScript).allow-orientation-lock — блокировать ориентацию экрана.allow-pointer-lock — использовать API блокировки указателя.allow-popups — создавать всплывающие окна и вкладки (такие как window.open, target=”_blank”, showModalDialog).allow-popups-to-escape-sandbox — открывать окна, к которым не применяются ограничения песочницы.allow-presentation — запускать презентации.allow-same-origin — загружать содержание, воспринимая его из того же источника, что и родительский документ.allow-scripts — запуск и выполнение скриптов.allow-top-navigation — получать доступ к элементам верхнего уровня.allow-top-navigation-by-user-activation — получать доступ к элементам верхнего уровня, только если действие инициировано пользователем.
-
accelerometer — дает элементу доступ к интерфейсу акселерометра.ambient-light-sensor — доступ к интерфейсу сенсора освещения.autoplay — дает возможность автоматического воспроизведения аудио и видео.battery— доступ к состоянию батареи.camera — доступ к камере.display-capture — возможность вести захват экрана.fullscreen — дает возможность запускать содержимое в полноэкранном режиме.gamepad — доступ к геймпаду.geolocation — доступ к интерфейсу геолокации.gyroscope — доступ к интерфейсу гироскопа.layout-animations — позволяет воспроизводить анимации разметки.microphone — доступ к микрофону.midi — доступ к WEB MIDI API.oversized-images — позволяет загружать и отображать большие изображения.payment — доступ к API запроса платежа.picture-in-picture — позволяет запускать медиа в режиме картинка-в-картинке.usb — доступ к WebUSB API.
speaker-selection — позволяет просматривать и выбирать средство воспроизведения аудио.screen-wake-lock — возможность блокировать выключение и затемнение экрана.
И его прием во встраиваемом элементе:
window.onmessage = function(event) < if (event.data == 'message') < console('Message received!'); >>;
Пример сообщения от iframe к основному документу:
window.top.postMessage('reply', '*');
window.onmessage = function(event) < if (event.data == 'reply') < console('Reply received!'); >>;
Могут ли элементы iframes повлиять на SEO сайта?
Вокруг данного вопроса также присутствует много спекуляций. Ранее роботы поисковых систем вообще не могли видеть содержимое iframe, а если и попадали каким-то образом в данный блок, то могли не выбраться и переставали индексировать остальное содержимое сайта. Однако данная проблема уже давно решена.
Поисковые системы легко понимают, что элементы iframe — это не дубликаты, не украденные материалы, а ссылки на другие сайты. Наличие встроенных элементов обычно никак не влияет на итоговый рейтинг сайта для поисковых выдач. Специалисты для уверенности советуют дополнительно индексировать содержимое iframe с помощью инструмента robots.txt , разрешая или запрещая поисковым системам доступ к содержанию страницы.
Заключение
Подводя итог всего вышесказанного, — это действительно мощный инструмент для наполнения вашего сайта различным медиаконтентом. В отличие от , и , данный элемент является универсальным и позволяет работать не только с видео, аудио, но и картами, баннерами, презентациями и так далее. При этом не вредит SEO, не влияет на скорость загрузки сайтов и сам по себе не является вредоносным элементом.
Просто всегда следует держать в голове тот факт, что встраиваемый контент является сторонним и вы должны доверять источнику прежде, чем делиться им с пользователями. А главное правило — предоставлять только необходимые для его работы разрешения.
Также о фреймах можно посмотреть это дополнительное обучающее видео: