Popup window accessing parent dom

Question

I have a popup window that needs to access the parent dom to generate a print page. The structure of the print page is significantly different then the structure of the parent so a print css would not solve the problem. I basically want to popup a window and then have that window grab some data from the parent of even access the dom from the popup and generate the print page without having to go to the server again. Any ideas how i can achieve this?

Im using the standard

window.open()

to pop up a window. I need this solution to not be a hack and be cross browser compatible with all major browsers.

Thanks in advance!

score 29 · Accepted Answer · edited May 23 '17 at 12:02

29

Sajjan's answer is a start, but better make sure your objects are available before you try to access them:

var opener = window.opener;
if(opener) {
    var oDom = opener.document;
    var elem = oDom.getElementById("your element");
    if (elem) {
        var val = elem.value;
    }
}

Otherwise, you do run the risk that the opener doesn't respond to your initial call, and that you can't get the element from it.

As jQuery, I think (based on an answer, here: how to access parent window object using jquery?):

var opener = window.opener;
if(opener) {
    var elem = opener.$("#elementId");
    if (elem) {
        var val = elem.val(); // I forgot we're dealing with a jQuery obj at this point
    }
}

edited May 23 '17 at 12:02

Community

1
1

answered Nov 09 '12 at 16:22

Jason M. Batchelor

2,951
16
25

Awesome that works. Now how would i use jquery to access the elements instead of getElementById i would rather do $("#id").val() – Scoota P Nov 09 '12 at 17:12
While you might be able to consolidate that a bit, I'd be cautious. Popup windows get complicated, mainly due to all the issues surrounding popup blockers, and simple things like reloading a popup window can break the connection between it and its parent. – Jason M. Batchelor Nov 09 '12 at 17:17
I haven't had a chance to try this out in IE. Again, popup windows are plagued with issues (popup blockers making their use always quite bizarre), so you will have to fiddle around with it to see what works in which browser. What version of IE are you dealing with? If you're in IE9, can you see any errors showing up in the Console? – Jason M. Batchelor Nov 09 '12 at 18:36
My situation: (tested in IE11, for FF, Chrome, window.parent work in any one case.) when I put something to load in iframe, the page loaded in iframe can call window.parent for its property but, when I call a popup window by `window.open`, the child cannot call `window.parent` for its property, if I check the `window.parent.name`, it is instead showing itself. In this case, can call `window.opener` for its property. I think this behaviour is in IE. For FF and Chrome, I have tried without parent just window.parent. – 西門正 Code Guy May 09 '17 at 09:23
this worked for me. It solved this error Cannot read properties of null (reading 'document'). Thanks – ratna Jan 10 '22 at 08:21

score 5 · Answer 2 · answered Nov 09 '12 at 16:19

5

window.opener.document.getElementById("your element").value

answered Nov 09 '12 at 16:19

Sajjan Sarkar

3,900
5
40
51

score 2 · Answer 3 · answered Nov 09 '12 at 16:21

2

According to MDN, window.open() will return you a handle to the new window.

var popUpHandle = window.open();

With this handle you should be able to access the DOM of the PopUp. It is possible vice-versa using the already mentioned window.opener. Refer again to MDN:

var originalWindow = window.opener;

Still, your favorite search engine will provide you more details, as this is topic is fairly old and your approach has already been done a million times or more.

answered Nov 09 '12 at 16:21

cimnine

3,987
4
33
49

OP's trying to get data from the opener, not the other way around, which this code would enable. – Jason M. Batchelor Nov 09 '12 at 16:23
Shure, but to avoid a roundtrip to the server, he will have to write at least *something* to the popup he just opened. Otherwise he will have a roundtrip to the server to load at least a script, and therefore he could just generate the popup content on the server. – cimnine Nov 09 '12 at 16:27

score 0 · Answer 4 · answered Oct 12 '18 at 07:51

0

parent.document helped in my case.

var elem = parent.document.getElementById("overlay_modal");
if (elem) {
alert('setting attribute');
elem.setAttribute("onclick", "Windows.close('2', event);");
}

answered Oct 12 '18 at 07:51

subho

79
2
12

Popup window accessing parent dom

4 Answers4

Linked