6

I'm building a widget that can be embedded in other sites. The widget is an iframe that is created using document.write() however I don't know how to apply the iframe doctype using javascript.

Here is my code:

document.write("<iframe scrolling=\"no\" frameborder=\"0\">");
document.write("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\"   \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">");
document.write("<html>");
document.write("<head></head><body></body>");
document.write("</html>");
document.write("</iframe>");
document.write("</div>");

The iframe is created but I the doctype is not applied. is there a way to do this?

Thanks

Doua Beri
  • 9,236
  • 15
  • 78
  • 126
  • 1
    I'm afraid this is not really working. All elements between `iframe` tags are in the original page, and are shown, if the browser doesn't support iframes. What you get with this code is only an iframe with `src="about:blank"`. Please check this: [MDN: ` – Teemu Jan 06 '13 at 20:00
  • @Teemu oh.. I see.. but the question still remains. I created an inframe with javascript and I can add elements to iframe using javascript. is there a way to add doctype? – Doua Beri Jan 06 '13 at 20:15
  • If you mean, that you really "document.write()" some elements between body tags in your code, and they also can be seen in the `iframe`, this question would be beyond my knowledge : ). – Teemu Jan 07 '13 at 09:09
  • [This post](http://stackoverflow.com/q/802854/1169519) might also be interesting reading... – Teemu Jan 07 '13 at 18:00

2 Answers2

14

In order to write into the iframe, you'll first need to create it, attach it to the document, and then reach inside of it to get a handle on its contentDocument.

Here is some sample code:

// create the iframe and attach it to the document
var iframe = document.createElement("iframe");
iframe.setAttribute("scrolling", "no");
iframe.setAttribute("frameborder", "0");
document.body.appendChild(iframe);

// find the iframe's document and write some content
var idocument = iframe.contentDocument;
idocument.open();
idocument.write("<!DOCTYPE html>");
idocument.write("<html>");
idocument.write("<head></head>");
idocument.write("<body>this is the iframe</body>");
idocument.write("</html>");
idocument.close();

// now have a look at your creation in the console
console.log(idocument);

See it working in this jsfiddle.

Chris Calo
  • 6,567
  • 7
  • 44
  • 57
1

You could also use an HTML5 srcdoc attribute to specify your iframe's content.

document.getElementById('myFrame').srcdoc = "<!DOCTYPE html PUBLIC....";

You'll have to check if srcdoc is supported by your browser.

Denis Pshenov
  • 10,272
  • 6
  • 38
  • 39