Friday, 4 April 2014

How to return value from child window to parent window using window.open in Javascript?

How to return value from child window to parent window using window.open in Javascript?

It is very easy to return a value from a child window to parent window which has been opened from parent window using window.open method in Javascript. In many scenarios, it is possible to do some calculations on the child window and parent window need the result of that calculations to perform some task. So, let's try to resolve this problem.

In Parent Window

I have following Javascript function which will open a child window named childWin. I also have a function which will catch the value returned by the child window.

function openChildWin() 
{   
    var childWin = window.open("childWin.html", "_blank", "height=400, width=550, status=yes, toolbar=no, menubar=no, location=no,addressbar=no); 
}

function setValue(val1) 
{
   //you can use the value here which has been returned by your child window
}

ChildWin.html page

Following is my childWin HTML page. There is a button on this HTML page which when clicked will return a value to the parent window which has setValue function. Basically, child window is accessing parent's setValue function here. After this, child window is closed.

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

<script type="text/javascript">

function OKClicked()
{
window.opener.setValue('Hello');; //I want to return true here
window.close(); //Close this child window  
}

</script>

  </head>
  <body>
<button type="button" id="OKButton" onclick="OKClicked()">Click ME</button>
  </body>
 </html>

No comments:

Post a Comment