[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 256
  • Last Modified:

opening a browser window in JS

I want to display a document in a seperate browser window so I use window.open with the url to the document.

No problems... it works.

However the next time i want to display a document i want to use the same browser window... so the user does not have lots of windows open.

I see there is a windows.location.replace and other methods that maybe i can use... but how can i tell if the window is still open... as i guess then a "replace" would do nothing?

Any help or advice appreciated.
0
soozh
Asked:
soozh
  • 3
  • 2
2 Solutions
 
nap0leonCommented:
To re-use the same pop-up window, you do just like you would when you open a new browser window or a new tab - add a "target" to the opener function.

e.g.,
function LaunchPopup(page,width,height) {
     OpenWin = this.open(page, "CtrlWindow", "toolbar=no,menubar=no,location=no,scrollbars=yes,resizable=yes,dependent=no,directories=no,width=" + width + ",height=" + height + ",x=50,y=50");
}

Open in new window


This function happens to have 3 parameters, the URL, height, and width
1- page = the Url you want to display in the page
2- "CtrlWindow" is the name of the window - change this to whatever you want, you could parameterize it so that you can reuse the function to create multiple pop-up windows and selectively target which one to reload every time you call the function
3- All the stuff at the end are the attributes you can assign to the new window.  these can be parameterized, hardcoded, or removed as you see fit.
0
 
experts1Commented:
Try example below with parent window and child window
HTML files located in same folder:

Only one child window will open!

Parent window code:
----------------------------------------
<html>
<head>
<title>Close Child Window Show Parent</title>
<script language="javascript">
  var main_win;
function win_child()
{
//var cs=document.getElementById("conno").value;
//var urlstring="?cSearch="+cs;
main_win=window.open("child_window.html", "myWin", "toolbar=no,menubar=no,width=800,height=425,resizable=no");
main_win.focus();
//gogetit(cs);
}

function alert_child() {
alert("child window just closed");
}
</script>
</head>
<body> 
<br>
<input type=button value="Child_Screen" onClick="win_child()">
<br>
<input type=button value="Child_Focus" onClick="javascript:main_win.focus();">
</body>
</html>

Child window code:
----------------------------------------
<html>
<head>
<title>Child_Window</title>
<script language="javascript">
 window.onbeforeunload = function() {
   showParent();
   window.opener.alert_child();
   window.opener.focus();
   alert('onunload event');
}

 function showParent() {
   window.opener.focus();
}
</script>
</head>
<body onunload=" window.opener.focus();"> 
<br>
<input type=button value="Show_Parent" onClick="showParent()">
<br>
</body>
</html>

Open in new window

0
 
soozhAuthor Commented:
Hello,

Thanks for the comments.  

I look at nap0lens solution but i could not see how the target was introduced in the open window call.

I am not sure how relevants experts1 solution is.  I know nothing about js.  All i want to do is open a new url in the same window.

Thanks
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
experts1Commented:
What I submitted was a test example with two web pages
for you to place in a test folder on your machine as follows:

(1) the first file with Parent window code can be named "parent_window.html"

(2) the second file with Child window code is named "child_window.html"

In parent window code you may change the URL name from "child_window.html"
to an external URL like "www.mywebpage.com" or whatever you choose, but the
child window will open in the same window as long as you use the "main_win" object
to open it.

Hope this helps!
0
 
nap0leonCommented:
The target is CtrlWindow in my example. It is the second parameter in the this.open command.
0
 
nap0leonCommented:
Perhaps a simpler example... both of these buttons pass 'targetNameHere' as the name of the target window.  

<button onclick="LaunchPopup('popup1.html','targetNameHere')">Popup 1</button>
<button onclick="LaunchPopup('popup2.html','targetNameHere')">Popup 2</button>
<script>
function LaunchPopup(page,target) {
     OpenWin = this.open(page, target);
}
</script>

Open in new window


If you want it to be a popup instead of a new tab, you will need to add back the parameters from the first example I posted that give the window a height and width.
<button onclick="LaunchPopup('popup1.html','targetNameHere')">Popup 1</button>
<button onclick="LaunchPopup('popup2.html','targetNameHere')">Popup 2</button>
<script>
function LaunchPopup(page,target) {
     OpenWin = this.open(page, target, "width=300,height=300");
}
</script>

Open in new window


The other optional parameters you can use (scrollbars, x/y position, etc.) are listed in my first example.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now