Transfering Data between Multiple Browser Windows with Javascript

With javascript, it is fairly easy to transfer data between a popup window and the window which opened it. You can also call functions, or even set location of the opening window from a popup window. This is possible because a popup window holds a reference to the opening window in a javascript variable called ‘opener’.

So the variable:

window.opener

refers to opener window.

In this tutorial, we have an original webpage win_opener1.php and a popup webpage win_opener2.php. A link in the opening page (win_opener1.php) opens the popup (win_opener2.php). When the user types in some text in a form on win_opener2.php and submits it, the popup window closes, and the original window shows an alert of the text entered in the popup.

In the source code of the popup window javascript, there is also commented code, which when uncommented, makes the opening window redirect to a specified URL.

The source code for win_opener1.php is

<!DOCTYPE HTML>
<html lang="en">

<head>

 <meta charset="UTF-8">

 <title></title>

</head>

<body>

<a id="opener" href="#">Click to open child window</a> 

<form name="parentform" action="" >

 <input name="myinput" type="hidden" />

</form>

<script type="text/javascript" 

src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
</script>

<script type="text/javascript">

$(document).ready(function(){

 $("#opener").click(function(e){

 e.preventDefault();

 window.open("/resources/js/

data-trans-multiple-windows/win_opener2.php",
 "mywindow", "menubar=no,width=500,height=500");

 });

});

function process(){

 alert("You entered "+document.parentform.myinput.value);

}

</script>

</body>

</html>

The code for win_opener2.php is :

<!DOCTYPE HTML>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <title></title>

</head>

<body>

<form name="childform" action="">

Enter name: <input id="myname" name="myname" type="text" />

<input type="submit" value="Submit" />

</form>

<script type="text/javascript" 

src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">

</script>

<script type="text/javascript">

$(document).ready(function(){

 $("form").submit(function(e){

 e.preventDefault();

 // to set url on window opener

 // window.opener.location="http://www.yahoo.com";

 // passing data to window opener

 window.opener.document.parentform.myinput.value =
window.document.childform.myname.value;

 window.close();

 // to call a function on window opener

 window.opener.process();

 

 });

});

</script>

</body>

</html>