Alternatives to Iframe Srcdoc

Alternatives to iframe srcdoc?

As suggested by eicto by comment, jquery could be used to fill an iframe at the ready-event. In order to adjust the height of the iframe to the height of the content some dirty hacks had to be applied, but the code I ended up using is more or less:

HTML

<!-- IMPORTANT! Do not add src or srcdoc -->
<!-- NOTICE!    Add border:none to get a more "seamless" integration -->
<iframe style="border:none" scrolling="no" id="myIframe">
    Iframes not supported on your device
</iframe>

// Wait until iFrame is ready (body is then available)
$('#myIframe').ready(function() {

    var externalHtml = '<p>Hello World!</p>';

    // Find the body of the iframe and set its HTML
    // Add a wrapping div for height hack
    // Set min-width on wrapping div in order to get real height afterwords
    $('#myIframe').contents().find('body')
        .html('<div id="iframeContent" style="min-width:'+$('body').width()+'px">'
            +externalHtml
            +'</div>'
    );

    // Let the CSS load before getting height 
    setTimeout(function() {
        // Set the height of the iframe to the height of the content
         $('#myIframe').css('height', 
             $('#myIframe').contents()
             .find('#iframeContent').height() + 'px' 
         );
    },50);
});

iframe alternative to HTML5 for pdf view

The <iframe> is not deprecated at all. At least, the current HTML5 spec draft on <iframe> doesn't say anything about deprecation. In the future please read the specification itself before making ungrounded assumptions.

There's however an alternative to the <iframe> which allows graceful degradation: the <object> tag which in the below example gracefully degrades to a link when the specified content type is not supported by the browser nor any of its plugins (you know, displaying a PDF file inline requires the Acrobat Reader plugin).

<object data="/url/to/file.pdf" type="application/pdf" width="500" height="300">
    <a href="/url/to/file.pdf">Download file.pdf</a>
</object>

How to set HTML code in srcdoc attribute of iframe?

You need to use htmlentities method in php

<?php
$str = '<a href="https://www.tarunlalwani.com">Go to tarunlalwani.com</a>';
echo htmlentities($str);
?>

And then assign that to srcdoc. It works as shown in below JSFiddle

https://jsfiddle.net/zpx8qw1b/1/

Html code as IFRAME source rather than a URL

You can do this with a data URL. This includes the entire document in a single string of HTML. For example, the following HTML:

<html><body>foo</body></html>

can be encoded as this:

data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3Efoo%3C/body%3E%3C/html%3E

and then set as the src attribute of the iframe. Example.

Edit: The other alternative is to do this with Javascript. This is almost certainly the technique I'd choose. You can't guarantee how long a data URL the browser will accept. The Javascript technique would look something like this:

var iframe = document.getElementById('foo'),
    iframedoc = iframe.contentDocument || iframe.contentWindow.document;

iframedoc.body.innerHTML = 'Hello world';

Example

Edit 2 (December 2017): use the Html5's srcdoc attribute, just like in Saurabh Chandra Patel's answer, who now should be the accepted answer! If you can detect IE/Edge efficiently, a tip is to use srcdoc-polyfill library only for them and the "pure" srcdoc attribute in all non-IE/Edge browsers (check caniuse.com to be sure).

<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>

HTML as sandboxed iframe's `src` (IE11/Edge)

Assuming usage of <iframe sandbox="allow-scripts"> is desired or acceptable, a possible workaround would be using window.postMessage() with the following setup:

index.html:

<!doctype html>
<html>
<body>
  <iframe onload="connectIframe()" sandbox="allow-scripts" src="iframeConnect.html" name="srcdocloader"></iframe>
  <script>

var SRCDOC_HTML = '<html><body><script src="https://code.jquery.com/jquery-3.2.1.js"><\/script><script>console.log("loaded srcdoc and dependencies", jQuery);<\/script><h1>done!</h1></body></html>';
var loaded;

function connectIframe (event) {
  if (!loaded) {
    loaded = true;
    window.frames.srcdocloader.postMessage(SRCDOC_HTML, '*');
  } else {
    onloadSrcdoc();
  }
}

function onloadSrcdoc () {
  // ...
}

  </script>
</body>
</html>

iframeConnect.html:

<!doctype html>
<script>
window.addEventListener("message", handler);
function handler(event) {
  if (event.source === window.parent) {
    window.removeEventListener("message", handler);
    document.write(event.data);
    document.close();
  }
}
</script>

Note that the iframe's onload event will be triggered two times. The second time will be after the srcdoc html and all its dependencies got loaded.

Can I put an entire HTML document in a template?

Unfortunately, the template tag is not allowed to contain <html> tags. per 4.1.1 of the HTML specification:

Contexts in which [the <html>] element can be used:
As document's document element.
Wherever a subdocument fragment is allowed in a compound document.

and from 4.12.3, the <template> tag does not provide either of these contexts. For the same reason, you can't use <head>, <body> or <title> tags either. Chrome and Firefox both actively strip out the invalid tags from the <template>, preventing you from using it.

The best way of storing HTML for use in iframes is to put the HTML code in a different file in your web server.

However, an acceptable alternative is to store the HTML inside your <iframe>, then populating the srcdoc attribute with the content.

<iframe id="yourIframe">
  <!-- Everything inside here is interpreted as text, meaning you can even put doctypes  here. This is legal, per 12.2.6.4.7 and 4.8.5 of the HTML specification. -->
  <!doctype html>
  <html>
    <head>
      <title>Document</title>
    </head>
    <body>
      <main>Content</main>
    </body>
  </html>
</iframe>

...

<script>
...
        const iframe = document.getElementById("yourIframe");
        iframe.srcdoc = iframe.innerHTML;
</script>

Is an iframe's srcdoc always an HTML document?

Yes, the default content type is in fact text/html. According to the HTML5 specification,

If the srcdoc attribute is specified:

Navigate the element's browsing context to a resource whose Content-Type is text/html, whose URL is about:srcdoc, and whose data consists of the value of the attribute. The resulting Document must be considered an iframe srcdoc document.

Alternatives to Iframe Srcdoc