How to check whether window already exists…

@peddipradeep26Nov 11.2008

Hi All,

I have one problem of knowing how to know whether window already exists.

My application has some links and on clicking them opens in new popup window. Some of them has forms to fill.
For Example if user clicks
Link1 which opens in new popup window and has form to fill.
Similarly Link2 – opens in 2nd popup window.
If user again tries to click Link1 then it should just focus the already opened popup for that link so that user will not use any data while filling the form.

Can anyone help me in fixing this issue?

Thanks.
Pradeep Peddi.

to post a comment

JavaScript

19 Comments(s) _↴

@felgallNov 12.2008 — #Just assign the focus to the window immediately after opening it. If the open creates a new window then it will already have the focus and the extra statement will do noting. If the window already exists then giving it the focus after the open statement will work (at least in those browsers that allow giving the focus to windows which most do even though it isn't a standard event for windows).

@peddipradeep26authorNov 12.2008 — #Thanks for the reply. Your solution is helpful for some extent.

May be my problem is more than that. Let me explain the scenario.

Links are dynamic so donno how may links are there.

for example 10 popups are opened.

Link1 - popup1

Link2 - popup2....Link10 - popup10

While working in popup10 if user clicks link1 the focus should go to popup1 window instead of re-opening it .

This is what I am trying to do...I am storing the popup window objects in an array.

var openedPopups=new array(50);

while opening new popup...

openedPopups[uniqueWinName]=window.open(url, uniqueWinName);

and checking the already opened popup with window name and changing focus if its already opened popup.

But the problem comes here...once if the main page which contains all the links is reloaded/refreshed then array is refreshed and contains no window objects. Now no history of already opened popups.

@MrNobodyNov 12.2008 — #I have one problem of knowing how to know whether window already exists.[/QUOTE]
This is the JavaScript technique for knowing if a window is already open without re-loading the content of that window:

http://www.webdeveloper.com/forum/showthread.php?p=949145#post949145

@felgallNov 12.2008 — #You don't need to know if it is already open or not.

openedPopups[uniqueWinName]=window.open(url, uniqueWinName);

openedPopups[uniqueWinName].focus();

will open the window if it isn't already open and will then give the already open window the focus regardless of whether it has just been opened or was already open before. Just call the two statements one after the other.

@MrNobodyNov 12.2008 — #I could be wrong, but I think the problem described, by the OP, is that if it is done as you describe, then the user will lose any data they've already typed into the form; because what you are describing forces the load of a new document over the top of what is already in the window.

@felgallNov 12.2008 — #In that case you'd use

if (openedPopups[uniqueWinName] && !openedPopups[uniqueWinName].closed)

openedPopups[uniqueWinName]=window.open(url, uniqueWinName);

openedPopups[uniqueWinName].focus();

@peddipradeep26authorNov 12.2008 — #I am posting the example HTML and actual popup javascript code to explain my problem...

This is ExamplePopup.html

<html>

<head>

<script language="javascript" src="popup.js">

</script>

</head>

<ul>

<li><a href="http://wwww.yahoo.com/" rel="popup.yahoo1">Yahoo Popup</a>

<li><a href="https://www.bankofamerica.com/" rel="popup.boa">Bank Of America Popup</a>

<li><a href="http://www.msn.com/" rel="popup.msn">MSN Page Popup</a>

<li><a href="http://wwww.google.com/" rel="popup.google">Google Popup</a>

<br><br>

<li><a href="ExamplePopup.html">Reload this page</a>

</ul>

</html>

This is popup.js

//javascript starts

// Following are the standard parameters used for setting the window

var winName = "popWindow"; //New window name

var width = "1024"; //New window width

var height = "768"; //New window height

var relName = "popup"; //Relationship Attribute

var newWindow = null; //window object

var uniqueId="";

//variable to store uniqueId for new popups

var uniqueIdArray = new Array(50);

//variable to store window objects as the history of popup windows

var windowObject =new Array(50);

// Function to Open a new Window using window.open with necessary parameters

function popUpWin(url, type, strWidth, strHeight){

type = type.toLowerCase();

var tools="";

if (type == "standard")

{

tools = "resizable,status=yes,toolbar=no,location=no,scrollbars=yes,menubar=no,width="+strWidth+",height="+strHeight+",top=0,left=0";

}

if (type == "console" || type == "fullscreen")
  { 
   tools = "resizable,toolbar=no,location=no,scrollbars=no,width="+strWidth+",height="+strHeight+",left=0,top=0";
  }
 
  // Here is what I am doing for checking already opened ppups
  if(windowObject[winName+uniqueIdArray[url]]!=null)
  {
   alert('window is already opened for this link and will set the focus to that window');
   windowObject[winName+uniqueIdArray[url]].focus();
  }
  else
  {
   alert('New window will be opened for this link');
   windowObject[winName+uniqueIdArray[url]] = window.open(url, winName+uniqueIdArray[url], tools);
   windowObject[winName+uniqueIdArray[url]].focus();
  }

}

// function to set default value for the window (i.e width and height) and call the popUpWin function

function doPopUp(e)

{

//set defaults - if nothing in rel attrib, these will be used

var t = "standard";

//look for parameters
  attribs = this.rel.split(" ");
  if (attribs[1] != null)
  {	t = attribs[1];
  }
  if (attribs[2] != null)
  {
   width = attribs[2];
  }
  if (attribs[3] != null)
  { 
   height = attribs[3];
  }
 
  // --------call the popup script----------
  popUpWin(this.href,t,width,height);
 
  //cancel the default link action if pop-up activated
  if (window.event) 
  {
   window.event.returnValue = false;
   window.event.cancelBubble = true;
  } 
  else if (e) 
  {
   e.stopPropagation();
   e.preventDefault();
  }

}

// Function used to for setting the attributes and events for the popup window

function findPopUps()

{

var popups = document.getElementsByTagName("a");

for (i=0;i<popups.length;i++)

{

if (popups[i].rel.indexOf(relName)!=-1)

{

if (popups[i].rel.indexOf(".") != -1)

{

uniqueId=popups[i].rel.substring(popups[i].rel.indexOf(".")+1);

 //adding string value after '.' as uniqueId to the map which will be used as unique Window name
   uniqueIdArray[popups[i].href]=uniqueId;
 
   alert('internal popup | '+popups[i].href+' | with uniqueId   '+uniqueIdArray[popups[i].href]);
   } 
 
   // ----------attach popup behaviour--------
   popups[i].onclick = doPopUp;
 
   // add info to title attribute to alert fact that it's a pop-up window
   popups[i].title = popups[i].title + "Opens in a new window";
   }
  }

}

// Function is used for adding the event to the page

function addEvent(elm, evType, fn, useCapture)

{

if(elm.addEventListener)

{

elm.addEventListener(evType, fn, useCapture);

return true;

}

else if (elm.attachEvent){

var r = elm.attachEvent('on' + evType, fn);

return r;

}else{

elm['on' + evType] = fn;

}

}

addEvent(window, 'load', findPopUps, false);

//javascript ends

When you try this example in your system....In ExamplePopup.html page as long as you don't click "Reload this Page" link everything works perfect but once if we click that link everything goes wrong. If page is reloaded window doesn't remember the already opened window Objects because that array is refreshed too.

In my real application, weblogic portal application, if user clicks links other than popup links page will be reloaded. That is the reason why I am explaining the problem clearly.

I donno whether my problem is obvious or complicated but I am working on this since 3 days. Hope I explained my problem clearly.

@peddipradeep26authorNov 13.2008 — #Hi All,

Can anyone help me in the above problem I explained...Does anyone have the solution for that problem. Thanks.

-Pradeep.

@MrNobodyNov 13.2008 — #The link I posted is a solution for that problem (recovering a lost pointer to a child window). You just have to adapt it to your situation and keep in mind that IE7 will not lend itself to reconnecting to the desired window once the pointer to that window has been lost.

@peddipradeep26authorNov 17.2008 — #Hi MrNobody,

I saw the link you posted and trying to undersatnd what you explained.

I didn't understand how it works in my issue.

If you dont mind can you please explain me how it works.

Thanks.

@MrNobodyNov 17.2008 — #Well, you are correct that the parent window looses track of the child windows when the parent window's content is refreshed. This is expected behavior and, in this case, the child windows are referred to as orphaned windows because the original parent window is now considered dead. For the new parent window to adopt the orphaned windows, it is just a matter of recreating the relationship (pointer) between the windows. The only method available for doing this is to repeat the original [B]window.open()[/B] command but specifying an empty URL parameter.

Thus, if this was the original command:

var ptr = window.open('myurl', 'myname');

then this command will re-establish the relationship -- by window name:

var ptr = window.open('', 'myname');

To know if you've successfully established the relationship (and not just opened a blank window), you need to be able to test for a known, named object inside that adopted window. If you can find that known, named object, then you've adopted the correct orphaned window and not just given birth to a new, blank window.

@peddipradeep26authorNov 21.2008 — #Hi MrNobody,

I understood what you said. We dont know whether window already is opened so always open a new window with empty URL and same winName and then assign required URL for that window. Then now if window was already opened then user should not loose the data and more like setting focus.

when I am implementing this solution....it is always going to else part.

newWindow = window.open('', winName+uniqueIdArray[url], tools);

if(newWindow

&& newWindow[winName]

&& newWindow[winName].name

&& newWindow[winName].name == winName)

{

newWindow.focus();

newWindow.location.href = url;

newWindow = null;

} else {

if(newWindow && !newWindow.closed) newWindow.close();

alert(winName+uniqueIdArray[url] + ' not found.');

}

I am getting alert box with message 'winName is not found' .

Did I do anything wrong in my case?

Thanks

@peddipradeep26authorNov 21.2008 — #Sorry I did some changes and not going to else part but one more problem....when I am implementing this solution....it is working fine when it is opened for first time...but when I refreshed the parent window and trying to click the same link it is again trying to reload the already existing window...What I mean to say is form data is lost when window is already opened...

@MrNobodyNov 21.2008 — #OK, you took this part from the other example -- which is a different scenario than yours:

newWindow.focus();

newWindow.location.href = url;

newWindow = null;

So, just remove the last two lines in order to retain the pointer to the child window.

@peddipradeep26authorNov 22.2008 — #We are always opening a window with URL

newWindow = window.open(''", winName, tools);

and then we r placing the required URL into that empty URL window and then focussing to that window.

if we remove last two lines then it will be just empty window, right?

This is what I am doing...

if(newWindow

&& newWindow

&& newWindow.name

&& newWindow.name == winName

&&!newWindow.closed)

{

//window already exists.

//Enters here for second click of that link before refresh of parent page.

newWindow.focus();

}

else

{

//Enters here for first time click of that link before or after refresh of parent page

newWindow = window.open(' ', winName, tools);

if(newWindow

&& newWindow

&& newWindow.name

&& newWindow.name == winName)

{

newWindow.focus();

newWindow.location.href = url;

newWindow = null;

}

else

{

if(newWindow && !newWindow.closed) newWindow.close();

alert(winName + ' not found.');

}

}

Can you please explain me exactly where to change in the above code so that user will not loose the data anytime when he clicks that link(first time or second time or before or after refreshing of parent page).

I really appreciate your patience.

Thanks.

@MrNobodyNov 22.2008 — #if we remove last two lines then it will be just empty window, right?[/QUOTE]
Did you try what I said before you asked the question? But to answer, if the window already exists, then it is not empty, right? :rolleyes: This is what you could be doing... This code works whether this is the first time opening the window or the window is already open and you're merely wanting to reconnect to it again:

var myPtr1 = window.open('', winName, tools);
 if(myPtr1
 &amp;&amp; myPtr1[winName]
 &amp;&amp; myPtr1[winName].name
 &amp;&amp; myPtr1[winName].name == winName)
 {
 myPtr1.focus();
 }
 else
 {
 myPtr1.location.href = url;
 }

And don't forget the code I said had to go in the other window. But it will be different for you than in that other case. For you, the window will already have a name and you don't want to try and change it. Just take the window name and use it to create an object by that name. Liek this:

&lt;script type="text/javascript"&gt;
 var top[top.name] = {name:top.name};
 &lt;/script&gt;

@peddipradeep26authorNov 24.2008 — #Sorry for troubling you. Yes I tried it before I asked you.

I asked that question whether it will be just empty window because this statement..

var myPtr1 = window.open('', winName, tools);

opens a window with empty URL.

If a window with that name already exists the above statement will reload a new page into that window with empty URL.

I can clearly see that already existing window is relaoded without saving the form data.

I implemented a javascript code in the child window to give warning message if it is reloaded without saving the form data. That is how I can know that already existing window is loosing data by the execution of the above statement.

Thanks.

@MrNobodyNov 24.2008 — #... this statement..

var myPtr1 = window.open('', winName, tools);

opens a window with empty URL.

If a window with that name already exists the above statement will reload a new page into that window with empty URL.[/QUOTE]
Not true. The statement you had was one which had a blank between the two quotes. That is an error. The statement I gave you was one which was an empty string -- no space between the quotes. Thus, that statement will only open a blank window if there is no window already open by the same name. Further, if there is a window already open by the same name, it will NOT load a blank URL into that window. I have used this code for years and years. It works very well and has never failed (until IE7 -- but it still works in other browsers).

@peddipradeep26authorNov 28.2008 — #Hey MrNobody,

Awesome...your concept is working...it solved my problem...

This is what I used...

 myPtr1 = window.open('', winName+uniqueIdArray[url], tools);
   if(myPtr1
   && myPtr1
   && myPtr1.name
   && myPtr1.name == winName+uniqueIdArray[url])
   {
   if(myPtr1.location.href=='about:blank')
   {
   myPtr1.location.href = url;
   }
   myPtr1.focus();
 
   }

Ultimately your concept of opening a window solved my problem...

Thanks alot...

Also in #JavaScript _↴

Javascript and Iframe?keyboard shortcuts in pop-up windows Simple loop through object problem

Success!

Help @peddipradeep26 spread the word by sharing this article on Twitter...

Tweet This

How to check whether window already exists…

19 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

How to check whether window already exists…

19 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

19 Comments(s) _↴

Also in #JavaScript _↴