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 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>
<style type="text/css">
#container {
    width: auto;
    height: 50px;
    background: black;
    <div id="container"></div>
    <a href="popup.html" onclick=", '_popup', 'width=200,height=100,resizable=no,scrollbars=no'); return false;">Open Popup</a>

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

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


Write comment