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