Parent and Child Windows with jQuery

Parent and child browser windows can communicate when they share the same origin. Modern browsers may block popups unless window.open() is called directly from a user action.

Open and Close a Child Window Top ↑

let childWindow = null;

$( "#open-child" ).on(
    "click",
    function () {
        childWindow = window.open(
            "window-child-open-close.php",
            "plus2netChild",
            "width=600,height=500"
        );
    }
);

$( "#close-child" ).on(
    "click",
    function () {
        if (
            childWindow &&
            !childWindow.closed
        ) {
            childWindow.close();
        }
    }
);

Demo: open and close child window →

Read Parent Data from the Child Top ↑

if (
    window.opener &&
    !window.opener.closed
) {
    const parentValue =
        window.opener
            .document
            .querySelector( "#t1" )
            .value;
}

Demo: exchange data between parent and child →

Refresh Parent Data when Child Closes Top ↑

childWindow.addEventListener(
    "beforeunload",
    function () {
        refreshParentData();
    }
);

Direct DOM access requires the same origin. For more loosely coupled window communication, use postMessage().

// Parent
window.addEventListener(
    "message",
    function ( event ) {
        if (
            event.origin !==
            window.location.origin
        ) {
            return;
        }

        $( "#t1" ).val(
            event.data.value
        );
    }
);

// Child
window.opener.postMessage(
    {
        value:
            $( "#t2" ).val()
    },
    window.location.origin
);

Demo: refresh parent after child action →

Demo: reload part of parent content →

jQuery load()

Original Source Examples Retained for Migration Reference Top ↑

Original example 1

<script>
$(document).ready(function() {
//////////////var newWin; // declaring global variable 
////////////////////////////
$("#b_open").click(function(){
newWin = window.open("window-child-open-close.php");
})
//////////////
$("#b_close").click(function(){
newWin.close(); 
})
///////
})
</script>

Original example 2

<script>
$(document).ready(function() {
//////////////
$("#b2").click(function(){
self.close(); 
})
///////
})
</script>

Original example 3

<script>
$(document).ready(function() {
////////////////
var str=parent.window.opener.$('#t1').val()	
$('#d1').html("Parent Window Data = " + str);
//////////////
$("#b2").click(function(){
var sel=$('#t2').val();	
window.opener.$('#t1').val(sel);	
self.close(); 
})
///////
})
</script>

Original example 4

$("#b_open").click(function(){
newWin = window.open("window-child-reload.php");
newWin.onunload = my_load;
})

Original example 5

function my_load(){
if(newWin.location != "about:blank"){ // Don't do any thing if child window is open
var str=$('#t1').val();
str=parseInt(str)+1;
$("#t1").attr('value',str);	
}
}

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: