В чем разница между srcdoc = "..." и src= "data: text/html,..." в <iframe>?

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

<iframe srcdoc="<p>Some HTML</p>"></iframe>
<iframe src="data:text/html,<p>Some HTML</p>"></iframe>

Демо

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

Edit

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

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

                   |  src attribute       |  srcdoc attribute
 --------------------------------------------------------------------
  URL              |  Yes                 |  No without using src (*)
  HTML content     |  Yes, using data URI |  Yes

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

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

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

<iframe srcdoc="<iframe src='http://microsoft.com'></iframe>"></iframe>

Ответ 1

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

<iframe src="data:...untrusted content" sandbox /> < - безопасно в современных браузерах, небезопасно в старых браузерах без поддержки песочницы

<iframe srcdoc="...untrusted content" sandbox /> < - безопасно в современных браузерах безопасно (хотя и не работает) в старых браузерах

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

Ответ 2

Из MDN:

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

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

Демо

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

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

^{1. MDN, 2. MSDN}

Ответ 3

В момент написания - srcdoc в Chrome (v36) разрешает установку и выборку файлов cookie, тогда как использование src с URL-адресом данных не выполняется:

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

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

Ответ 4

Iframe с атрибутом src с содержимым HTML - это кросс-домен,

Но iframe с атрибутом srcDoc с содержимым HTML не является перекрестным доменом

Ответ 5

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

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

<iframe srcdoc="<p>hello%20world</p><h1>give%0D%0Ame%0D%0Asome%24</h1>"></iframe>

<iframe src="data:text/html;charset=UTF-8,<p>hello%20datauri<p><h1>give%0D%0A me%0D%0Asome%24</h1>"></iframe>

Ответ 6

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

Ответ 7

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

src: URL-адрес страницы для вставки.

Ответ 8

Основное отличие состоит в том, что атрибут 'src' содержит адрес документа, который вы собираетесь внедрить в тег.

С другой стороны, атрибут srcdoc'а содержит содержимое HTML страницы, которое должно отображаться во встроенном кадре.

Основным недостатком srcdoc является то, что он не поддерживается во всех браузерах, тогда как src совместим со всеми браузерами.

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