Javascript, jQuery and parent windows

When you open a window with window.open, you can access the popup’s parent window using window.opener from the child window.

//In the parent window
window.open('http://example.com/url'); //Opens a new window/tab with this URL

//In the opened window
window.opener.document;

You can perform the same requests on window.opener.document as you would on the document object:

window.opener.document.getElementById('#tableInParent'); //Gets #tableInParent in the parent window

If you want to use jQuery selectors on element in the parent window, this is how you do it. In the example below, we fade out a table in the parent window:

$(window.opener.document).find('#tableInParent').fadeOut(); //Fades out #tableInParent

Alternatively, you can also set the selector’s scope:

$('#tableInParent', window.opener.document).fadeOut(); //Fades out #tableInParent

That’s it! If you want to learn jQuery properly, I highly recommend Mark Myers’ “A Smarter Way to Learn jQuery“. Mark Myers tends to write very high quality programming books with a focus on good practices.

Leave a Reply

Your email address will not be published. Required fields are marked *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax