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.

Did you solve this? The solutions below are not working for me. I'm using React, but I don't think that's the problem. — chococroqueta
– chococroqueta, Commented Jan 20, 2023 at 14:50

James Hill · Accepted Answer · 2022-01-04 13:06:47Z

6

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);
}

edited Jan 4, 2022 at 13:06

answered Mar 21, 2012 at 17:51

James Hill

62.1k22 gold badges150 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

David Spector Over a year ago

Actually, the fiddle example is not working, nor can I get it working myself. I've spent several hours and cannot get windows or iframes working with access by the parent/opener. Firefox 63.0.3 (64bit)

James Hill Over a year ago

@DavidSpector, are you violating the same origin policy? Are the parent and child window on the same domain, or are both of the domains under your control with a valid same origin policy?

David Spector Over a year ago

They are not only in the same domain but in the same directory. I'm working on a tool to help design websites and it never has to work across different domains. It does have to have a window or pane showing the page under development and be able to manipulate its elements. Thanks for asking. Getting help is hard enough without getting accusations.

Peter VARGA Over a year ago

Please update your same-origin policy link - it's dead.

gdoron · Accepted Answer · 2012-03-21 18:32:35Z

1

Wait...

Note that remote URLs won't load immediately. When window.open() returns, the window always contains about:blank. The actual fetching of the URL is deferred and starts after the current script block finishes executing. The window creation and the loading of the referenced resource are done asynchronously.

MDN

And if you wait, you will get this error:

Unsafe JavaScript attempt to access frame with URL https://www.google.co.il/ from frame with URL http://fiddle.jshell.net/_display/. Domains, protocols and ports must match.

So it can be done with google, unless you're working there...

Fiddle

If you open something "valid" it will work fine.

Working DEMO

edited Mar 21, 2012 at 18:32

answered Mar 21, 2012 at 18:02

gdoron

151k59 gold badges302 silver badges376 bronze badges

3 Comments

gdoron Over a year ago

@OscarJara. We cleaned all the thread from comments. it was a mess.

David Spector Over a year ago

This fiddle "working demo" is also not working, 6 years later.

David Spector Over a year ago

I think waiting for the new window or iframe to load is key to making this work, and none of the Mozilla or other tutorials I can find mention this!

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related