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

  • 1
    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
  • 3
    Is that data URI limit real? HTMLCanvasElement.toDataURL regularly returns dataURLs larger than 32k – gman Jul 09 '19 at 17:31
    • 15

    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,651
    • 1
    • 18
    • 17
    • 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
    9

    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
    • 18,154
    • 4
    • 36
    • 42
    • 1
      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
    1

    Another difference is how links to fragments inside the iframe HTML work. Let's say your HTML content has a link/<a> pointing to a document fragment/hash/id somewhere in the same page, like this:

    <a href="#in_src"></a>

<!-- lots of other content, requiring scrolling -->

<p id="in_src"></p>

    • If you use the src attribute, (example on jsfiddle, or jsbin) the same link will scroll/jump you to the relevant fragment (as I expected).

    • If you use the srcdoc attribute, (example on jsfiddle, or jsbin) a fragment link like the above will try to re-navigate the entire iframe to a whole new page, (based on the parent page's context? I'm not sure, but it's not what I expected)

    Maybe this is because of the difference in domains in srcdoc vs src? Maybe the difference in their baseURI values (see more below?). I'm not sure

    I tested this on Chrome Version 111.0.5563.149 (Official Build) (64-bit)

    EDIT

    I wanted to the link to scroll/jump to the document fragment, even with a srcdoc attribute. So in this example I used Javascript to...

    • addEventListener() for the click event
    • event.preventDefault() (to prevent the anchor's iframe-resetting behavior)
    • and use location.hash= '#in_src'; to manually jump to the doc fragment.

    Note that the values of e.target.attributes.href.value and e.target.href do not necessarily have the same value (i.e. the value of the fragment ''#in_src'`)

    • The attributes.href.value is the literal string value of the href attribute, like '#in_src'
    • But the href property of the HTMLAnchorElement API has a "a string [value] containing the whole URL"
      • in the case of srcdoc, the href value is something like 'https://...#i01' (the baseURI value is the parent's URL (iframeWindow.parent.document.baseURI), and maybe that's why clicking the link will navigate the whole iframe)
      • in the case of src using a data URI, the href value is something like 'data:text/html,...#i01, (the baseURI value is the data URI, and will jump to the fragment instead of navigating the hwole page)
    Nate Anderson
    • 18,334
    • 18
    • 100
    • 135
    -1

    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
    -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
    • 46,771
    • 90
    • 257
    • 373
    R R
    • 2,999
    • 2
    • 24
    • 42
    -4

    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