Stack Overflow
Stack Overflow

What is the difference between srcdoc="..." and src="data:text/html,..." in an – dot slash hack Aug 19 '14 at 16:32

  • The reason why `srcdoc` is necessary (as implied, but not explicitly stated, in this answer) is that [data URIs are not universally supported for HTML content](http://caniuse.com/#feat=datauri). This means that a browser which does not support a data URI in `src` has no graceful fallback method to display the content. However, using `srcdoc` with an http URI in `src` which resolves to the same embedded content _does_ provide browsers with a graceful degradation option. – daiscog Sep 10 '14 at 09:52
  • Is that data URI limit real? HTMLCanvasElement.toDataURL regularly returns dataURLs larger than 32k – gman Jul 09 '19 at 17:31
    • 14

    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).

    wombling - Chris Paine
    • 1,541
    • 17
    • 16
    • 1
      Good point. Data URIs have limitations on some browsers, so `srcdoc` works better in those cases. – Oriol Aug 02 '14 at 22:04
    • In Chromium 81 parent frame background and font styles also cascade into the iframe, adding even more utility. – vhs May 06 '20 at 15:32
    8

    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...

    maioman
    • 16,621
    • 4
    • 34
    • 42
    • The content of `src` has to be URL-encoded to be treated correctly. See [this question](https://stackoverflow.com/questions/9238890/convert-html-to-datatext-html-link-using-javascript) for details on how to do that. – user Jul 09 '17 at 19:15
    • I didn't have much luck URI encoding attribute values on larger textfiles. What worked for me was to sanitize input using recode(1) in bash beforehand. – vhs May 06 '20 at 15:36
    0

    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.

    • But `sandbox` and `seamless` attributes can be used too with `src` attribute, can't they? It seems to me that it's `src` which is more flexible than `srcdoc` – Oriol Nov 02 '13 at 16:00
    • @Oriol, I think my answer goes directly to why this is important, not as a flaw, but as a feature – Fabio Beltramini Jul 07 '15 at 19:19
    -3

    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.

    saransh sharma
    • 1
    -4

    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

    Phillip Senn
    • 44,943
    • 87
    • 252
    • 365
    R R
    • 3,025
    • 2
    • 22
    • 42