.contentWindow.document.body.outerHTML Not Working?

Question

I have the following JavaScript code:

myFrame.src = pathToCourseContents + "/otherComponents/myData.htm";

After this line is executed:

myFrame.src equals "http://myServer.com/otherComponents/myData.htm"

If I put this URL address into FireFox I do get a web page with information coming up.

What I'm trying to get is the contents of myData.htm in the form of a string.

I thought this would work:

var myString = myFrame.contentWindow.document.body.outerHTML

but myFrame.contentWindow appears to be blank.

What am I doing wrong?

Is there JavaScript code that will work to get the html content in the form of a string?

Presumably they are on the same domain? - contentWindow should be contentDocument for anything above IE8 (http://stackoverflow.com/a/6582370/246342) Are you waiting to the budy to load fully? — Alex K., Apr 23 '13 at 17:35
I am stepping through the code in FireBug. If I put a break on the line: myFrame.contentWindow.document.body.outerHTML , and then step over it...shouldn't that give time enough for the body to fully load? How do I slow it down? — user737058, Apr 23 '13 at 17:57
Are you looking for `myFrame.addEventListener("load", function() { ... })`? — apsillers, Apr 23 '13 at 18:10
I'm not sure what you mean by "looking for"? Can you elaborate? Thanks. — user737058, Apr 23 '13 at 18:54

score 1 · Answer 1 · answered Apr 23 '13 at 17:36

1

You can try using this:

document.getElementsByTagName("html")[0]

answered Apr 23 '13 at 17:36

Floremin

3,969
15
20

score 0 · Answer 2 · answered Apr 23 '13 at 17:43

contentWindow is most often blank when you load url from diferent domain. It is prohibitied to access such content, because of security. If this is your case, you're doomed (well, there are workarounds, like proxy through the server that serves the container page, so that browser thinks they are from the same domain; or set document.domain in both files, if you control both of them; etc.).

myData.htm is on the same domain – user737058 Apr 23 '13 at 17:45 — user737058, Apr 23 '13 at 17:45

Paul S. · Answer 3 · 2013-04-23T18:18:49.937

If you're not encountering the same origin policy, it may be that you're trying to access nodes before they exist (i.e. before the DOM is ready).

A simple solution is to add an event listener on the <iframe> for the load event.

myFrame.addEventListener('load', function () { // add a listener
    console.log( // do what you want
        '<iframe> loaded\n',
        myFrame.contentWindow,   // the <iframe>'s Window
        myFrame.contentDocument, // the <iframe>'s document
        '\n',
        myFrame.contentDocument.body.outerHTML
    );
});
// set src after so that listener exists before event raised
myFrame.src = 'http://fiddle.jshell.net/'; // same origin pass

example fiddle

.contentWindow get's cleared every time you refresh so you can't add page load listeners to it that will give you the result you want, but you can listen for other events from within the <iframe> there.

.contentWindow.document.body.outerHTML Not Working?

3 Answers3