Call function from child window

 

In this guide, I will teach you how to call a function in a parent window, from a child window.

In order to understand this guide, you should know your way around in the basics of ‘javaScript’.

 

Note! If you just look for a quick answer? Then you don't have to read i all! :D

 

//Do this from the child window
window.opener.yourFunctionFromParent

 

 

If you want a full example? Then ignore the above gode and keen reading (:

Let’s start out by walking through what we want to accomplish here!

When we open a window using the window.open() method in javaScript, it can often be useful if our new child window have the possibility to send some kind of answer back to our parent window.

I will demonstrate this by making a simple calculator, which opens up in a new window and then returns the result to our window.opener (Our parent window)’.

 

Below is an illustration of how this will work

 

Now we will look at the code on our parent window

 

<script type="text/javascript">
        //Function for opening our window
        function popup(url) {
            window.open(url, "Calculator", "width=340, height=100");
        }

        //Function for calculating the values (This function is called from another window
        function writeResult(Result, val1, val2) {
            //Variables

            var containerForVal1 = document.getElementById("val1");
            var containerForVal2 = document.getElementById("val2");
            var containerForResult = document.getElementById("result");

            //Inserting the variable 'result' into the variables containing our containers
            containerForVal1.innerHTML = val1;
            containerForVal2.innerHTML = val2;
            containerForResult.innerHTML = Result;

            //Show results
            document.getElementById("container").removeAttribute("style");
        }
</script> 

 

 

Above is the code that we use to open our window with the calculator inside.

We have a function for opening our new window, containing our calculator. We also have a function for showing the data that we will receive from our child window.

On line 4 we use window.open() to open a new window. This will take the url, name and features as parameters.

Beginning at line 8 is the function that we will call from our “Calculator” window, to show us the results from the calculator. This function is actually very simple! It only finds the three DOM elements with the id “val1, val2 and result”. And then feed them with the data returned from our “Calculator” window.

At last we remove all inline style from the container that holds these three elements, we do this because I as default have set the containers style to “display:none”.

 

Bellow you can see our Markup HTML code

 

<div id="wrap">
    <h3 onclick="popup('Window.htm')">
        Open calculator <img src="new_window_icon.png" />
    </h3>

    <table id="container" style="display:none;">
        <tr>
            <th colspan="5">Result from calculator</th>
        </tr>
        <tr>
            <td id="val1"></td>
            <td>+</td>
            <td id="val2"></td>
            <td>=</td>
            <td id="result"></td>
        </tr>
    </table>
</div>

 

 

All styling other than our “display:none” is not shown here. Look in the demo code to find that (:

 

 

At last we will look at the code on our “Calculator window”

//Our JavaScript
 
<script type="text/javascript">
    function callResult() {
        var val1 = document.getElementById("val1").value;
        var val2 = document.getElementById("val2").value;
        if (val1 != "" || val2 != "") {
            var result = parseFloat(val1) + parseFloat(val2);
            window.opener.writeResult(result, val1, val2);
            window.close();
        }
    }
</script> 

---

//Our markup HTML (Just to simplify this example, then I won’t show my css code here either)
 
<input id="input1" type="text" id="val1" />&nbsp+&nbsp
<input id="input2" type="text" id="val2" />
<br />
<input type="button" value="Calculate" onclick="callResult()" />

Beginning at line 2 in our JavaScript, we have a function called “callResult”. This function will just take the value of input1 and input2 and then multiply those. “callResult” also checks if input1 and input2 is empty or not, before using the “window.opener” to call our function “writeResult” from our parent window.

Congratulations!!  You have now successfully called a function from a child window! (:

Don't forget to leave a comment bellow! :D