0

I'm using the method described here (https://stackoverflow.com/a/10433550/556079) to create an iframe that loads HTML that I give it rather than loading from another URL. The HTML I want to load is the entire DOM of the current page (essentially mirroring it).

Here is the code from that question linked above. This works perfectly except I need to get a lot more HTML into the iframe.

var iframe = document.createElement('iframe');
var html = '<body>Foo</body>';
document.body.appendChild(iframe);
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(html);
iframe.contentWindow.document.close();

As you can see, it's loading <body>Foo</body> into the iframe. I tried doing: var html = document; but this did not work.

This code is being used in a Chrome extension so I only need it to work in Chrome. My reasoning for doing this is that I want to manipulate the code in the iframe. Unfortunately, Chrome does not allow local pages to talk to each other and local pages is where I'm using this Chrome extension at.

Any ideas?

Community
  • 1
  • 1
jkupczak
  • 2,891
  • 8
  • 33
  • 55

1 Answers1

1

You can read the current document's body's markup via innerHTML (which won't include <body> and </body>) or outerHTML (which will). If you also need the head, you can do the same on document.head. If need both, either combine those two or use document.documentElement (which is the html element). If you need the doctype, it's on document.doctype (which is a DocumentType object):

So for instance:

var iframe = document.createElement('iframe');
var html = "";
// Reassemble the doctype if there is one
if (document.doctype && document.doctype.name) {
    html = "<!doctype " + document.doctype.name;
    if (document.doctype.publicId) {
        html += " PUBLIC " + document.doctype.publicId;
    }
    if (document.doctype.systemId) {
        html += " " + document.doctype.systemId;
    }
}
// Add in the document's markup
html += document.documentElement.outerHTML;
document.body.appendChild(iframe);
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(html);
iframe.contentWindow.document.close();

All three (innerHTML, outerHTML, and document.doctype) are standardized now. The first two are covered by the DOM Parsing and Serialization spec, which is referenced from the HTML spec's common infrastructure section, and document.doctype is in the DOM specification.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • Any way to grab literally everything in the source, even the doctype and head without having to add it myself? – jkupczak Dec 01 '16 at 18:37
  • @jimmykup: The above tells you how to get `head`. You can get the doctype from `document.doctype`. (I've updated the above.) – T.J. Crowder Dec 01 '16 at 18:41
  • I did some searching and I found that `document.documentElement.outerHTML` grabs the `head` and `body` at the same time and it ALSO grabs the `` tag. However, it looks like `document.doctype` returns `[object DocumentType]` in the iframe. Any idea how to get that fixed? – jkupczak Dec 01 '16 at 20:30
  • @jimmykup: **That's** what was bothering me: `documentElement`. :-) Indeed, if you want the whole thing, that (which is the `html` element) is what you're looking for. I've added code above that reassembles the doctype as best I know how; unfortunately, the `DocumentType` interface doesn't define something that lets us get it verbatim. – T.J. Crowder Dec 02 '16 at 07:14