Welcome to WebmasterWorld Guest from 54.227.125.200

Forum Moderators: open

Message Too Old, No Replies

Auto refresh an external window.

Auto refresh an external window

     

typomaniac

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

5+ Year Member



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

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

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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

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

10+ Year Member



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
 

Featured Threads

Hot Threads This Week

Hot Threads This Month