homepage Welcome to WebmasterWorld Guest from 107.20.25.215
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Auto refresh an external window.
Auto refresh an external window
typomaniac




msg:4545716
 7:43 pm on Feb 14, 2013 (gmt 0)

Is there a way to reload a browser window from another one when "another one" does something? ("another page") is not a separate frame but a tabbed window.

In another description what I have is a page(I'll call it page A), which upon loading will display a link containing the number of things that need dealt with. When I click the link a new window (B) opens where the tasks are taken care of. When a job in page B is taken care of(it links back to itself when the submit is pressed) the number of tasks decreases yet the number on page A needs to be manually refreshed to show the change. Need to know if there is a way to refresh page A when page B has been submitted (without errors of course).

The script is written in perl but I'm clueless with javascripting.

 

Fotiman




msg:4545729
 8:37 pm on Feb 14, 2013 (gmt 0)

Perhaps using window.opener. For example, on page B when submit is pressed, do something like:

var parentWindow = window.opener;
parentWindow.reload(true);

Haven't tried it, but I think that would work.

ajkimoto




msg:4545732
 8:50 pm on Feb 14, 2013 (gmt 0)

Hi Typomaniac,

You can certainly do this as long as Window B is opened by Window A via window.open().

Below are working code examples of the two pages. Window B is opened by clicking a button on Window A. You can then click a button on either page to act upon the other page. In this example, a function on Window A dynamically changes the value of a text box on window B and visa-versa.

Window B can access Window A by using the window.opener property

Window A can access Window B by first assigning the opened window to a variable like this:

windowName = window.open(window.html)

And then accessing the opened window using this variable:

windowName.document.....

Here is the code:

Window A (opener)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Window A</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
<!--
//Global variable to hold window object reference
var myWindow

//This function opens the window
function openWindow(){
myWindow=window.open('js_opened.htm')
}

//This function sets the value of a textbox in the opened window
function setTextbox(){
myWindow.document.forms[0].txtTest.value='Hello from opener!'
}
//-->
</script>
<style type="text/css">
</style>
</head>
<body>
<h1>Accessing Opened/Opener Windows</h1>
<p>This is an example of scripting between a window and a child window spawned by a window.open() command.
Please note that because of security settings, the two pages must be in the same web domain for this function
to work as expected.</p>
<form method="post" action="">
<input type="button" onclick="openWindow()" value="Open Window" />
<input type="button" onclick="setTextbox()" value="Set textbox in opened window" />
<input type="text" name="txtTest2" id="txtTest2" value="" />
</form>
</body>
</html>


******
Window B (opened)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Window B</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<script type="text/javascript">
<!--

function setOpenerText(){
window.opener.document.forms[0].txtTest2.value='Hello from opened!'
}

//-->
</script>

<style type="text/css">

</style>

</head>

<body>
<h1>Opened Window</h1>
<p>This is the opened child window. Click the button to set the value of a textbox in the opener window.</p>
<form method="post" action="">
<input type="button" onclick="setOpenerText()" value="Set Textbox on Opener" /><br /><br />
<span>To be set by opener </span><input type="text" id="txtTest" name="txtTest" value="" />
</form>
</body>

</html>


Hope this helps,

ajkimoto

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved