Атрибут srcdoc в HTML


В чем разница между srcdoc = «. » и src= «data: text/html. » в ?

Например, какая разница между ними:

И, если они точно такие же, почему HTML5 добавил атрибут srcdoc ?

Edit

Возможно, я был недостаточно ясен. Я не сравниваю src с srcdoc , но src с использованием URI текста /html данных с srcdoc .

Затем, если диаграмма функциональности похожа на это

зачем нужен srcdoc ?

(*) Примечание:

Кажется, что srcdoc можно использовать для загрузки страницы по URL-адресу (Demo), используя субкадр с атрибутом src :

В других ответах перечислены некоторые поверхностные различия, но на самом деле упускают из виду ключевое различие, объясняющее, почему авторы браузеров/спецификаторов по существу дублируют то, что уже существует:

1. Содержание страницы, которую должен содержать встроенный контекст. Эта ожидается, что атрибут будет использоваться вместе с песочницей и бесшовные атрибуты. Если браузер поддерживает атрибут srcdoc, он будет переопределять содержимое, указанное в атрибуте src (если присутствует). Если браузер НЕ поддерживает атрибут srcdoc, он покажет файл, указанный в атрибуте src вместо (если присутствует).

Итак, атрибут srcdoc переопределяет содержимое, внедренное с использованием атрибута src .

Кроме того, то, что вы говорите о следующем фрагменте data:text/html , называется URI данных и имеет ограничения.

2. URI данных не может быть больше 32 768 символов.

Атрибут srcdoc в HTML

Примечание: srcdoc свойство поддерживает только Chrome и Safari теги 6 .

Определение и использование

Для отображения атрибута указывает srcdoc включая содержимое HTML-страницы в встроенную рамку.

Совет: Это свойство следует использовать в сочетании с песочницей и бесшовных атрибутов.

Если браузер поддерживает свойство srcdoc и определяет свойство srcdoc, он будет перезаписать содержимое атрибута SRC указанного.

Если ваш браузер не поддерживает свойство srcdoc, и определяет свойство srcdoc, он отображает файл в атрибуте SRC указанного.

Различия между HTML 4.01 и HTML5

атрибут srcdoc является новым в HTML5 атрибутов.

Как установить HTML-код в & quot; srcdoc & quot; атрибут iframe?

Как показано на рисунке ниже, я использую iframe внутри div#email_content чтобы показать точный предварительный просмотр содержимого электронной почты. Я пытаюсь использовать srcdoc атрибут для загрузки содержимого электронной почты в iframe. Здесь содержимое электронной почты может быть простым текстом или содержимым HTML, разработанным с помощью CkEditor. Я пытался использовать escape, htmlentities и т. Д. Но атрибут srcdoc ломается, потому что значение атрибута содержит чистый HTML-код и кавычки.

Любой обходной путь будет принят.

Примечание: я не хочу использовать src атрибут здесь.

Решение

Вам нужно использовать htmlentities метод в php

А затем назначьте это srcdoc , Это работает, как показано ниже JSFiddle

Другие решения

Согласно Спецификация HTML5 для , нам нужно заменить цитаты а также амперсанды в srcdoc строка с HTML-сущностями:

В синтаксисе HTML авторам нужно только помнить, чтобы использовать символы «» «(U + 0022) для переноса содержимого атрибута, а затем экранировать все символы» «» (U + 0022) и U + 0026 AMPERSAND (&) и указать атрибут песочницы, чтобы обеспечить безопасное встраивание содержимого.

Обратите внимание на способ экранирования кавычек (в противном случае атрибут srcdoc закончился бы преждевременно) и способ, которым необработанные амперсанды (например, в URL или в прозе), упомянутые в изолированном контенте, должны быть вдвойне экранированный — один раз для сохранения амперсанда при первоначальном анализе атрибута srcdoc и еще раз для предотвращения неверного истолкования амперсанда при анализе изолированного содержимого.

Мы можем добиться этого в PHP, используя str_replace() :

Замена амперсанда, показанная выше не опечатка. Этот код производит:

Затем мы можем использовать экранированное значение для srcdoc значение атрибута:

Обратите внимание, что HTML5 srcdoc пока недоступно в Internet Explorer или Edge. Поддержка в почтовых клиентах будет еще ниже.

Как установить HTML-код в атрибуте «srcdoc» iframe?

как показано на рисунке ниже, я использую iframe внутри div#email_content чтобы показать точный предварительный просмотр содержимого электронной почты. Я пытаюсь использовать srcdoc атрибут для загрузки содержимого электронной почты в iframe. Здесь содержимое электронной почты может быть простым текстом или HTML-контентом, разработанным через CkEditor. Я попытался использовать escape, htmlentities и т. д. Но атрибут srcdoc прерывается, потому что значение атрибута содержит чистый HTML-код и кавычки.

Илон Маск рекомендует:  Функции filepro

любая работа-вокруг будет принято.

примечание: Я не хочу использовать

2 ответов

вам нужно использовать htmlentities метод в php

и назначить к srcdoc . Он работает, как показано ниже JSFiddle


по словам спецификация HTML5 для нужно заменить на кавычки и амперсанд на srcdoc строка с HTML-сущности:

в HTML синтаксис, авторов нужно только помнить, чтобы использовать «»» (с U+0022) символов для переноса атрибутов содержимое, а затем, чтобы избежать всех «»» (от U+0022) и U+0026 амперсанд ( & ), знаков, а также указать песочнице атрибут, для того чтобы обеспечить безопасное вложение содержание.

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

мы можем достичь этого в PHP, используя str_replace() :

замена амперсанда, показанная выше, —не опечатка. Этот код производит:

тогда мы можем использовать экранированное значение для srcdoc атрибут value:

обратите внимание, что HTML5 srcdoc является пока отсутствуют в Internet Explorer или Edge. Поддержка в почтовых клиентах будет еще ниже.

Как установить HTML-код в & quot; srcdoc & quot; атрибут iframe?

Как показано на рисунке ниже, я использую iframe внутри div#email_content чтобы показать точный предварительный просмотр содержимого электронной почты. Я пытаюсь использовать srcdoc атрибут для загрузки содержимого электронной почты в iframe. Здесь содержимое электронной почты может быть простым текстом или содержимым HTML, разработанным с помощью CkEditor. Я пытался использовать escape, htmlentities и т. Д. Но атрибут srcdoc ломается, потому что значение атрибута содержит чистый HTML-код и кавычки.

Любой обходной путь будет принят.

Примечание: я не хочу использовать src атрибут здесь.

Решение

Вам нужно использовать htmlentities метод в php

А затем назначьте это srcdoc , Это работает, как показано ниже JSFiddle

Другие решения

Согласно Спецификация HTML5 для , нам нужно заменить цитаты а также амперсанды в srcdoc строка с HTML-сущностями:

В синтаксисе HTML авторам нужно только помнить, чтобы использовать символы «» «(U + 0022) для переноса содержимого атрибута, а затем экранировать все символы» «» (U + 0022) и U + 0026 AMPERSAND (&) и указать атрибут песочницы, чтобы обеспечить безопасное встраивание содержимого.

Обратите внимание на способ экранирования кавычек (в противном случае атрибут srcdoc закончился бы преждевременно) и способ, которым необработанные амперсанды (например, в URL или в прозе), упомянутые в изолированном контенте, должны быть вдвойне экранированный — один раз для сохранения амперсанда при первоначальном анализе атрибута srcdoc и еще раз для предотвращения неверного истолкования амперсанда при анализе изолированного содержимого.

Мы можем добиться этого в PHP, используя str_replace() :

Замена амперсанда, показанная выше не опечатка. Этот код производит:

Затем мы можем использовать экранированное значение для srcdoc значение атрибута:

Обратите внимание, что HTML5 srcdoc пока недоступно в Internet Explorer или Edge. Поддержка в почтовых клиентах будет еще ниже.

Использование тега iframe

В HTML5 использование фреймов запрещено. Они считаются устаревшими элементами, и их использование на данный момент действительно не имеет смысла. Но при желании вы можете прочитать о них здесь. Из всего семейства фреймов сейчас используется тег

Еще один атрибут, пришедший из HTML4: scrolling = «auto | no | yes»— указывает способ отображения полосы прокрутки во фрейме. Его значения расшифровываются так:

  • auto — полосы прокрутки добавляются браузером только по необходимости, в том случае, когда содержимое фрейма превышает его видимую часть.
  • no — запрещает отображение полос прокрутки.
  • yes — всегда вызывает появление полос прокрутки, независимо от объёма информации.

HTML 5 предоставляет еще два новых атрибута для управления фреймами. Установленный булев атрибут seamless=»seamless» означает, что браузер должен обрабатывать содержимое вставленного документа так, как будто оно является частью основного документа. В частности, на него будут действовать инструкции CSS, подключенные к странице-родителю. Кроме того, ссылки дочерней страницы будут открываться в основном (родительском) окне браузера, а не в самом фрейме, как это происходит по умолчанию. Также ширина и высота будут автоматически установлены браузером так, как будто фрейм является обычным блочным элементом. Помните, что не все браузеры поддерживают HTML 5 и атрибут seamless в частности. Поэтому, когда все же нужно его применить, рекомендуется подключать к дочернему документу необходимые стили CSS и указывать в элементе атрибут target=»_parent» , чтобы обеспечить правильное функционирование ссылок.

Илон Маск рекомендует:  Что такое код hw_getrellink

Этот атрибут может быть использован в следующих вариантах

Вторым из упомянутых атрибутов является sandbox , позволяющий управлять функциональностью фрейма. Если он не указан, то в разрешены все возможности HTML 5. В противном случае в подключенном документе запрещается:

  • отправка данных из форм на сервер;
  • применение скриптов;
  • размещение ссылок, указывающих на другие окна и фреймы (нельзя использовать атрибут target );
  • применение плагинов с элементами и ;
  • использование атрибута seamless во вложенных фреймах;
  • доступ к содержимому родительского документа, включая cookie и localStorage, путем принудительной унификации источника страницы, даже если это фактически один и тот же документ (применяется при необходимости сохранить возможность скриптования в пределах дочернего документа, ограничив доступ к родительскому).

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

«» применяет все ограничения, снимаемые перечисленными ниже значениями. Таким образом ограничивая содержимое фрейма влиять на родительский элемент, изолируя страницу, отображаемую во фрейме, в виртуальной песочнице, поэтому любой вредоносный код не сможет нанести вред родительской странице, сайту или компьютеру пользователя.
allow-forms разрешает отправку данных с помощью форм.
allow-scripts разрешает выполнение сценариев (исключая всплывающие окна).
аllow-same-origin указывает, что информация представленная в iframe имеет тот же источник, что и информация представленная в содержащем его документе. Отключает принудительную блокировку доступа к родительскому документу.
аllow-top-navigation разрешает ссылаться на документ верхнего уровня. Т.е. разрешает использовать ссылки внутри содержимого iframe для перемещения по содержащему его документу. Остальные окна и фреймы остаются под защитой атрибута sandbox .

Пример использования сразу всех значений атрибута:

Как установить HTML-код в атрибуте srcdoc iframe?

Как показано ниже, я использую iframe внутри div # email_content , чтобы показать точный просмотр содержимого электронной почты. Я пытаюсь использовать атрибут srcdoc для загрузки содержимого электронной почты в iframe. Здесь содержимое электронной почты может быть простым текстом или HTML-контентом, разработанным через CkEditor. Я пытался использовать escape, htmlentities и т. Д. Но атрибут srcdoc ломается, потому что значение атрибута содержит чистый HTML-код и кавычки.

Будет принята всякая работа.

Примечание. Я не хочу использовать атрибут src .

Какая разница между srcdoc = «. » и SRC = «данные: текст / html, . » в элемент ?

November 2020


31.3k раз

Так, например, который представляет собой разницу между ними:

И, в случае , если они точно так же, почему HTML5 добавить srcdoc атрибут?

редактировать

Может быть , я не был достаточно ясен. Я не сравниваю src с srcdoc , но с src помощью текста / HTML URI данных с srcdoc .

Затем, если функциональные диаграммы, как это

почему это srcdoc необходимо?

(*) Примечание :

Кажется , srcdoc может быть использована для загрузки страницы по URL ( Demo ), используя subiframe с src атрибутом:

11 ответы

Другим заметным отличием является то , что src атрибуты с поддержкой данных URI правил процента-кодирования URI , а srcdoc не так как она поддерживает синтаксис регулярных HTML,

эти источники будут давать по-разному:

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

В вашем примере две формы функционально идентичны. Тем не менее, вы можете использовать как src и srcdoc атрибуты, позволяющие не-HTML5 браузеры использовать src версию, в то время как HTML5 браузеры могут использовать srcdoc версию вместе с sandbox и seamless атрибутами , которые предлагают большую гибкость в том , как лечила IFRAME.

В вашем примере две формы функционально идентичны. Тем не менее, вы можете использовать как src и srcdoc атрибуты, позволяющие не-HTML5 браузеры использовать src версию, в то время как HTML5 браузеры могут использовать srcdoc версию вместе с sandbox и seamless атрибутами , которые предлагают большую гибкость в том , как лечила IFRAME.

1. Содержание страницы, внедренный контекст должен содержать. Этот атрибут , как ожидается , будет использоваться вместе с песочницей и бесшовными атрибутами. Если браузер поддерживает атрибут srcdoc, она перекрывает содержимое , указанное в атрибуте SRC (если он присутствует). Если браузер не поддерживает атрибут srcdoc, он будет показывать файл , указанный в атрибуте SRC вместо (если таковой имеется).

Таким образом, srcdoc атрибут переопределяет содержимое внедренного с помощью src атрибута.

Илон Маск рекомендует:  Что такое код cdx

Кроме того , что вы говорите о следующем фрагменте кода data:text/html называется Data URI и имеет ограничения ..

2. URIs данных не может быть больше 32768 символов.

На момент написания — srcdoc в Chrome (V36) позволяет устанавливать и выборку печенья, в то время как использование СРКА с URL данных не позволяет:

Uncaught SecurityError: Не удалось прочитать свойство «куки» от «Документ»: Cookies отключены в «данных:» URL

Это может или не может быть важно для вас, но исключает использование URL-адреса данных в приложении я в здании, которое является позором, так как, конечно, IE не поддерживает srcdoc в настоящее время (v11).

Iframe с src атрибутом с HTML Content перекрестно домен,

Но IFrame с srcDoc атрибутом с HTML — контента не является кросс домен

В вашем примере две формы функционально идентичны. Тем не менее, вы можете использовать как src и srcdoc атрибуты, позволяющие не-HTML5 браузеры использовать src версию, в то время как HTML5 браузеры могут использовать srcdoc версию вместе с sandbox и seamless атрибутами , которые предлагают большую гибкость в том , как лечила IFRAME.

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

srcdoc: Содержание страницы, внедренный контекст должен содержать. Этот атрибут , как ожидается , будет использоваться вместе с песочницей и бесшовными атрибутами. Если браузер поддерживает атрибут srcdoc, она перекрывает содержимое , указанное в атрибуте SRC (если он присутствует). Если браузер не поддерживает атрибут srcdoc, он будет показывать файл , указанный в атрибуте SRC вместо (если таковой имеется).

ЦСИ: URL — адрес страницы , чтобы встроить.

Основное отличие заключается в том, что атрибут «» содержит НИЦ адрес документа, который вы собираетесь вставлять в теге.

С другой стороны, «srcdoc’attribute содержит содержимое HTML-страницы, чтобы показать в инлайн кадре.

основной недостаток srcdoc является то, что он не поддерживается во всех браузерах, в то время как ЦСИ совместит со всеми браузерами.

для детального объяснения , пожалуйста , перейдите по следующей ссылке: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

В вашем примере две формы функционально идентичны. Тем не менее, вы можете использовать как src и srcdoc атрибуты, позволяющие не-HTML5 браузеры использовать src версию, в то время как HTML5 браузеры могут использовать srcdoc версию вместе с sandbox и seamless атрибутами , которые предлагают большую гибкость в том , как лечила IFRAME.

Изображение внутри iframe | HTML

Растягивающийся iframe

Отзывчивый фрейм (изменяется и высота, и ширина) не делает отзывчивым изображение, находящееся в нём (см. в разных браузерах).

Резиновая картинка внутри растягивающегося iframe

Дополнительная страница

На дополнительной странице расположена картинка в теге img (можно применять стили CSS), в iframe — URL дополнительной страницы.

Атрибут srcdoc у iframe

Атрибут srcdoc поддерживается не всеми браузерами (нет IE). Он позволяет задавать содержимое фрейма в атрибуте. При его наличии, атрибут src игнорируется.

4 комментария:

Unknown скажите, а зачем картинку пихать в iframe? приведите пример такой ситуации NMitra Универсальная галерея для видео и картинок (это не моя идея, люди интересуются). Я подумала об iframe (меняешь URL и радуешься). Но с картинками вышла загвоздка. Дядя Женя Наталья, расскажите как встроить счётчик ливнет в код шаблона, в любое место, например в подвал, БЕЗ использования «Добавить гаджет» NMitra А в чём заключается трудность (не помню, есть ли там какие-то особенности)? У вас шаблон переработан и место для футера не определено. Можете добавить дополнительный div с кодом из http://www.liveinternet.ru/add после

Я на Метрику подсела, не мониторю произошли ли в Liveinternet какие-то изменения

Как установить HTML-код в атрибуте srcdoc iframe?

Как показано ниже, я использую iframe внутри div # email_content , чтобы показать точный просмотр содержимого электронной почты. Я пытаюсь использовать атрибут srcdoc для загрузки содержимого электронной почты в iframe. Здесь содержимое электронной почты может быть простым текстом или HTML-контентом, разработанным через CkEditor. Я пытался использовать escape, htmlentities и т. Д. Но атрибут srcdoc ломается, потому что значение атрибута содержит чистый HTML-код и кавычки.

Будет принята всякая работа.

Примечание. Я не хочу использовать атрибут src .

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL