Jump to content

[SOLVED] Communicating between windows


dennismonsewicz

Recommended Posts

if a child window is opened by a parent window, you can access the parent window from the child window with:

window.opener

the url can be obtained with:

window.opener.window.location.href

 

if the parent's url changes to something on a different domain, you will get a permission denied error

 

just put the above code inside a setInterval() command

Link to comment
Share on other sites

ok so i have this code:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>JS Testing</title>

<script type="text/javascript">

function checkUrl() {
	var oldurl = window.opener.window.location.href;
	setInterval(document.write(oldurl), 5000);
}

</script>

</head>
<body onload="checkUrl();">

<p>Test 1</p>

</body>
</html>

 

it displays the URL it came from but it doesn't check to see if the parent window has changed... any thoughts?

Link to comment
Share on other sites

updated code:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>JS Testing</title>

<script type="text/javascript">

//setInterval("checkUrl()", 500);

function checkUrl() {
	var oldurl = window.opener.window.location.href;
	document.write(oldurl);
}

</script>

</head>
<body onload="checkUrl()">

</body>
</html>

 

Is there anyway to have the page reload so it displays the URL of the parent window?

Link to comment
Share on other sites

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>JS Testing</title>

<script type="text/javascript">
   var url;
   var timer;
   function checkUrl() {
      if(url != window.opener.window.location.href){
         clearInterval(timer); //Stop the timer
         //Put code that you want run here
         alert('The parent URL changed');
      }
   }
   function init(){
      url = window.opener.window.location.href; //Save the current parent url
      timer = setInterval("checkUrl()", 500); //Start the timer
   }
</script>
</head>
<body onload="init()">

</body>
</html>

 

what do you mean by:

Is there anyway to have the page reload so it displays the URL of the parent window?
Link to comment
Share on other sites

I updated your code:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>JS Testing</title>

<script type="text/javascript">
   var url;
   var timer;
   function checkUrl() {
      if(url != window.opener.window.location.href){
         clearInterval(timer); //Stop the timer
         //alert('The parent URL changed');
      }
   }
   function init(){
      url = window.opener.window.location.href; //Save the current parent url
      timer = setInterval("checkUrl()", 500); //Start the timer
  document.write(url); //I added this line
   }
</script>
</head>
<body onload="init()">

</body>
</html>

 

The page is not refreshing.. like i need the child (pop-up/under) window to refresh every like 5 seconds and checks to see if the parent window has changed and if it has then display that url on the child page

Link to comment
Share on other sites

the popup doesn't need to refresh.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>JS Testing</title>

<script type="text/javascript">
   var url;
   var timer;
   function checkUrl() {
      if(url != window.opener.window.location.href){
         document.write('URL changed to: '+window.opener.window.location.href+'<br>');
         url = window.opener.window.location.href;
      }
   }
   function init(){
      url = window.opener.window.location.href; //Save the current parent url
      timer = setInterval("checkUrl()", 500); //Start the timer
   }
</script>
</head>
<body onload="init()">

</body>
</html>

Link to comment
Share on other sites

hmmm we are getting closer...

 

I loaded your code and tested it. Is there anyway to have the current parent URL printed on the page once you go to the newly created child page and when the parent URL changes it re-prints the url on the child page? also once the timer starts the child page just keeps trying to load.

Link to comment
Share on other sites

the 'child page just keeps trying to load' is caused by using document.write(). instead, let's just append it to a div:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>JS Testing</title>

<script type="text/javascript">
   var url;
   var timer;
   function checkUrl() {
      if(url != window.opener.window.location.href){
         url = window.opener.window.location.href;
         document.getElementById('output').innerHTML += 'URL changed to: '+url+'<br>';
      }
   }
   function init(){
      url = window.opener.window.location.href; //Save the current parent url
      document.getElementById('output').innerHTML = 'URL started at: '+url+'<br>';
      timer = setInterval("checkUrl()", 500); //Start the timer
   }
</script>
</head>
<body onload="init()">
  <div id="output"></div>
</body>
</html>

Link to comment
Share on other sites

ah...so instead of appending, erase the old text and just show the new text?

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>JS Testing</title>

<script type="text/javascript">
   var url;
   var timer;
   function checkUrl() {
      if(url != window.opener.window.location.href){
         url = window.opener.window.location.href;
         document.getElementById('output').innerHTML = 'URL changed to: '+url+'<br>';
      }
   }
   function init(){
      url = window.opener.window.location.href; //Save the current parent url
      document.getElementById('output').innerHTML = 'URL started at: '+url+'<br>';
      timer = setInterval("checkUrl()", 500); //Start the timer
   }
</script>
</head>
<body onload="init()">
  <div id="output"></div>
</body>
</html>

 

p.s. all i did was remove the + in front of the = on this line:

         document.getElementById('output').innerHTML = 'URL changed to: '+url+'<br>';

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.