How do I open the SAME page on a NEW window, and cross JavaScript with them

[Jose_49]

Hi people. I know this is an unusual question.

But I'm looking to open the same page on a new window. And with that new window, I would like to have cross javascript manipulation. Meaning that the new Window can manipulate the old window, and vice versa; From JavaScript to the complete DOM. Plus synchronous scrolling

Thanks a lot!

[Jose_49]

Answered!

http://stackoverflow.com/questions/14540114/how-do-i-open-the-same-page-on-a-new-window-and-cross-javascript-with-them

[Jose_49]

Ok. Finally found the true answer to all of my headaches.

I'll explain what is the best way to communicate between a parent window and a child window from the same page. This logic can be tweaked for different pages (but from the same host).

Used: JavaScript + PHP

<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
<!--
var window_ = null;
var n = false; //Variable n


<?php
if(isset($_GET['n'])) //This will make the n variable go true if
//'?n' (without quotes) is found in the URL. Meaning, that the child exists
{
print('n = true;');
}
?>


function openChildWindow() //function which opens the child window.
{
if (window_ != null) //This will check if the window is opened
{
if ( window_.closed == false ) //if the window is opened, a.k.a is not closed
window_.close(); // close the window
window_ = null; // and nullify the variable, so it can be reopened if desired.
}

else
{
window_ = window.open(window.location.href+'?n'); //This is the tricky part.

/*Assign the window.location.href so it will open a new window with the same page
BUT assign it the n variable, so the GET function will receive it, and set n to true.
*/

window_.focus();
}
// Need to call on a delay to allow
// the child window to fully load...

}

function callChildWindowFunction()
{
if ( (window_ != null) && (window_.closed == false) )
{
window_.shout('bearl');
}


}
// -->

function shout(val)
{
alert(val);
}
$(document).ready(function(e) {
/*Wait for the document to load, so you can check if the variable n is true,
which means that **IT IS** the child window and it has been loaded completely. Meaning
that you can finally manipulate the child window with the parent document*/
if(n == true)
{
window.opener.callChildWindowFunction(); //Call the parent telling it "I'm ready"
}
});

</script>


<input type="button" value="Blear" onClick="openChildWindow();">[/CODE]

Now, explaining the code.

The trick here is to create an "artificial switch" which will tell the browser which page is the parent, and which is the child.

The one who does this, is the variable ***n***. By assigning it a false value, I'm telling it is the parent who has been loaded and not the child.

When the child window is opened, (please see the openChildWindow() function), it will verify if the window has been opened so it can close/open it, according to the situation.

If the window is opened, it will assign the EXACT URL plus the ?n variable which will help PHP to identify that it is the child window.

At the bottom of the opened page, after the document has been loaded, n will be true, so it will call the parent through the **window.opener** function. This will trigger a function, that will trigger the child's function (shout(val)).

You can also do this with two different pages.

Create a Page "A.html" and a Page "B.html" (Without quotes).

Page A will get the following code:

[CODE]
<script type="text/javascript">
<!--
var window_ = null;
function openChildWindow()
{
if ( (window_ != null))
{
if ( window_.closed == false )
window_.close();
window_ = null;
}

var windowUrl = 'B.html';

window_ = window.open(windowUrl);

window_.focus();
}

function callChildWindowFunction()
{
if ( (window_ != null) && (window_.closed == false) )
{
window_.shout('bearl');
}
}
// -->
</script>


<input type="button" value="Blear" onClick="openChildWindow();">[/CODE]

Page B will get this

[CODE]
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function shout(val)
{
alert(val);
}
$(document).ready(function(e) {
{
window.opener.callChildWindowFunction();
}
});

</script>[/CODE]

Note that the mechanics are the same. The only thing that there is no need for an "artificial switch" because the pages are different.

Just assign the page B you want to create a $(document).ready() function to verify it has loaded completely, and call the parent through the window.opener function so it can start calling the child.

If you've found a better way to do this, then go ahead and show me. setTimeOut, setInterval functions did not work because the code pre-executed before the time was out (Opera). Furthermore, this will assure you that the document was 100% loaded, and the code will not break if the user has slowpoke Internet connection.

[Detection]

Would it not be easier to plug 2 LCDs into your GPU and set display to Clone ? :p

jk

[AoM_Scott]

I think you might be able to tell if the child is the child by testing whether window.opener exists?