srcdoc =“…”와 src =“data : text / html,…”의 차이점은
For example, which is the difference between these:
<iframe srcdoc="<p>Some HTML</p>"></iframe>
<iframe src="data:text/html,<p>Some HTML</p>"></iframe>
And, in case they are exactly the same, why did HTML5 add srcdoc
attribute?
Edit
Maybe I wasn't clear enough. I am not comparing src
with srcdoc
, but src
using text/html data URI with srcdoc
.
Then, if the functionality chart is like this
| src attribute | srcdoc attribute -------------------------------------------------------------------- URL | Yes | No without using src (*) HTML content | Yes, using data URI | Yes
why is srcdoc
needed?
(*) Note:
It seems srcdoc
can be used to load a page by URL (Demo), using a subiframe with src
attribute:
<iframe srcdoc="<iframe src='http://microsoft.com'></iframe>"></iframe>
The other answers list some superficial differences, but really miss the mark of the key difference that explains why browsers/spec writers would essentially duplicate something that already exists:
<iframe src="data:...untrusted content" sandbox />
<- Secure in modern browsers, insecure in legacy browsers with no sandbox support
<iframe srcdoc="...untrusted content" sandbox />
<- Secure in modern browsers, secure (though non-functional) in legacy browsers
This new syntax provides content authors a way to protect their users, even when they may be using legacy browsers. Without it, content authors would be reluctant to use the sandbox feature at all, and it would not see use.
From MDN :
1. The content of the page that the embedded context is to contain. This attribute is expected to be used together with the sandbox and seamless attributes. If a browser supports the srcdoc attribute, it will override the content specified in the src attribute (if present). If a browser does NOT support the srcdoc attribute, it will show the file specified in the src attribute instead (if present).
So, the srcdoc
attribute overrides the content embedded using src
attribute.
Also, what you are saying about the following snippet data:text/html
is called Data URI and it has limitations..
2. Data URIs cannot be larger than 32,768 characters.
Iframe with src
attribute with HTML Content is cross domain,
But iframe with srcDoc
attribute with HTML Content is not cross domain
As of writing - srcdoc in Chrome (v36) allows the setting and fetching of cookies, whereas the use of src with data URL does not:
Uncaught SecurityError: Failed to read the 'cookie' property from 'Document': Cookies are disabled inside 'data:' URLs
This may or may not be important to you, but rules out the use of data URLs in the application I am building, which is a shame, as of course IE doesn't support srcdoc currently (v11).
Another noticeable difference is that src
attributes with data-uri support URI percent-encoding rules while srcdoc
doesn't as it supports regular html syntax,
these sources will yield differently:
<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>
I also noticed a difference in the parsing of js scripts inside the attributes value( it's probably more than just percentage-encoding ) but didn't figure the rule yet...
In your example the two forms are functionally identical. However, you can use both src
and srcdoc
attributes, allowing non-HTML5 browsers to use the src
version, while HTML5 browsers can use the srcdoc
version along with the sandbox
and seamless
attributes which offer more flexibility in how an iFrame is treated.
srcdoc: The content of the page that the embedded context is to contain. This attribute is expected to be used together with the sandbox and seamless attributes. If a browser supports the srcdoc attribute, it will override the content specified in the src attribute (if present). If a browser does NOT support the srcdoc attribute, it will show the file specified in the src attribute instead (if present).
src: The URL of the page to embed.
The main difference is that the 'src' attribute contains the address of the document you are going to embed in the tag.
On the other hand 'srcdoc'attribute contains the HTML content of the page to show in the inline frame.
the main disadvantage of srcdoc is that it is not supported in all browsers whereas src is compatible with all the browsers.
for detailed explanation please go through the following link: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
'program tip' 카테고리의 다른 글
Java는 다중 코어를 어떻게 사용합니까? (0) | 2020.11.25 |
---|---|
파생 클래스가이 코드에서 보호 된 멤버 함수를 호출 할 수없는 이유는 무엇입니까? (0) | 2020.11.25 |
모든 공백을 무시하도록 vimdiff를 구성하는 방법이 있습니까? (0) | 2020.11.25 |
std :: pow (double, int)가 C ++ 11에서 제거 된 이유는 무엇입니까? (0) | 2020.11.25 |
Android ListView 어댑터 notifyDataSetInvalidated () 대 notifyDataSetChanged () (0) | 2020.11.25 |