Connect two pages with javascript

  5 / 5 (2 Votes)
In this tutorial we explain you how connect a popup with the main page of the site.
Is a simple process, you must be use the window.open() function to open the popup. In the popup, yo must use the javascript opener object to apply change in the main window.

Note: For security reasons, the explorer only allow this action between pages that encountered in the same domain.

See this through a simple example.
In this example, we will created a main page (index.html) with a link to open the popup (popup.html) and a container (div) to apply a background color change.

index.html <html>
<head>
<style type="text/css">
#container {
    width: auto;
    height: 50px;
    background: black;
}
</style>
</head>
<body>
    <div id="container"></div>
    <a href="popup.html" onclick="window.open(this.href, '_popup', 'width=200,height=100,resizable=no,scrollbars=no'); return false;">Open Popup</a>
</body></html>

popup.html <html>
<head>
<script type="text/javascript">
    function apply_colour()
    {
        // JavaScript
        opener.document.getElementById('container').style.background = 'red';
    }
</script>
</head>
<body>
    <a href="#" onclick="apply_colour(); return false;">Change colour of Container</a>
</body></html>


The example only use javascript but, if your site use jQuery, is possible to use the same opener object combined with jQuery.
For example:
opener.jQuery('#container').css('background', 'red');

Download Example






Comments


Write comment