How to get element and html from window.open js function with jquery

Question

I am trying to open a popup like this:

$('#btn').click(function () {
    var popup = window.open('mypage.php', '_blank', 'width=500,height=500');
    var dom = popup.document.body;
    for (i in dom) {
        console.log(dom[i]);
    }
});

Now what I want to do is to get the html from the popup window and also be able to use maybe a jQuery function from the window.opener (the page that opened the popup)

PS. In the console there are a lot of things printed but no html source.

Use this to try: http://jsfiddle.net/JRqTy/

Thanks in advance.

Answer 1

Try:

var html = popup.document.documentElement.outerHTML

EDIT

The window is not loaded immediately. Something like this will work, assuming that you're not attempting to violate the same-origin policy:

$('#btn').click(function() {
    var popup = window.open('[Your URL HERE]', '_blank', 'width=500,height=500');

    popup.onload = function() {
        setTimeout(function(){ console.log(popup.document.documentElement.outerHTML) }, 2000);
    }  
});​

Here's a working fiddle.

Note: If you control both the parent and the child source, you could also have the child invoke a method on the parent that passes in it's html:

Child Window

// Call when body is loaded
function SendHtmlToParent() {
    window.opener.HtmlReceiver(document.outerHTML);
}

Parent

function HtmlReceiver(html) {
    console.log(html);
}