Referencing windows by name?

[Robert Mark Bram]

Hi All!

Is there a way to reference a window by name without doing something like
this:
open (, 'windowName');
The open method will open a blank window if there is no window with such a
name.

I am trying to organise a navigation structure between two windows with
content from the same host.. I have been trying the following:

The 'content pages' link back to the menu with this:
<a href="main.asp" onClick="return openMenuWindow(this.href);" >enter</a>

And the 'menu page' links to various content pages with this:
<a href="content.asp" onClick="return openContentWindow(this.href);"

enter</a>

The functions are below.My latest problem is that the links are opening up
in the same page, rather than two pages. However, I have a sneaking
suspicion that I am trying too hard and the correct technique is much
simpler.

Any advice on how to get these two windows talking to each other would be
most welcome!

var contentWindow = null;
// Menu window should use this function to open a content window.
function openContentWindow (pageUrl)
{
if (contentWindow != null &&
String(contentWindow.location) == pageUrl)
{
contentWindow.focus();
return false;
} // end if
contentWindow = window.open (pageUrl, "contentWindow");
contentWindow.menuWindow = window;
contentWindow.focus();
} // end openContentWindow function



// Content window should use this function to open a menu window.
function openMenuWindow (pageUrl)//(pageUrl, pageName, w, h, scroll, pos)
{
if (window.menuWindow != null &&
!window.menuWindow.closed)
{
window.open (, 'main').focus();
return;
} // end if

var pageName = 'main';
var w = '800';
var h = '450';
var scroll = 'no';
var pos = 'center';

window.name="contentWindow";
var LeftPosition=(screen.width)?(screen.width-w)/2:100;
var TopPosition=(screen.height)?(screen.height-h)/2:100;

var settings=
'width='+w+
',height='+h+
',top='+TopPosition+
',left='+LeftPosition+
',scrollbars='+scroll+

',location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no';

var menuWindow = window.open (pageUrl, pageName, settings);
menuWindow.focus();
return false;
} // end openContentWindow function

Rob

 

[Thomas 'PointedEars' Lahn]

Is there a way to reference a window by name without doing something like
this:
open (, 'windowName');
The open method will open a blank window if there is no window with such a
name.

var w = window.open('', 'windowName', 'featuresIfNotDefaults');
if (w && !w.closed)
{
...
}


PointedEars

 

[Robert Mark Bram]

Hi Thomas!

var w = window.open('', 'windowName', 'featuresIfNotDefaults');
if (w && !w.closed)
{
...
}

But this opens a blank window if no window with the desired name is found,
which is not what I want.

I want a way to find out if the named window is there, and change focus to
it if it is. If it is not, I wish to make the window anew - but not a blank
one!

Rob

 

[Thomas 'PointedEars' Lahn]

But this opens a blank window if no window with the desired name is found,
which is not what I want.

You are right. Sorry, misunderstood that.

I want a way to find out if the named window is there, and change focus to
it if it is. If it is not, I wish to make the window anew - but not a blank
one!

The above code allows for getting a reference to the new window. For that
reference to the window to be accessible by another window, you need to
include this information in the context of the latter. The easy way is to
add a property:

w = window.open(...);
...
w2 = window.open(...);
...
if (w && !w.closed && w2 && !w2.closed)
{
w2.w = w;
w.w2 = w2;
}

In `w' you then can access `w2' with `self.w2' or `window.w2' as well
as you can access `w' in `w2' with `self.w' or `window.w', provided
that `self' or `window' references the current window object in the
DOM you are using (as it is in all well-known browsers.)

You could also access the other window by referencing it as property
of the opener window until the latter is still there and if you use
global variables (as long as the above can be provided). In `w':

if (opener && !opener.closed && opener.w2 && !opener.w2.closed)
{
...
}
else
{
...
}

And in `w2' respectively:

if (opener && !opener.closed && opener.w && !opener.w.closed)
{
...
}
else
{
...
}

As posted many times before (Google is your friend!), without references
you cannot access other windows. There is no collection of Window objects
(unless you implement one.)


HTH

PointedEars

 

[Robert Mark Bram]

Hi Thomas.

Your advice is pretty much what I originally tried. Here is a test scenario
for that. My problem is that on each alert, the 'placed' window property is
undefined!

I am getting really frustrated here. Any advice would be most welcome!

Rob


============
menu.htm

============
<html><head>
<script language="JavaScript" type="text/javascript"
src="windowCode.js"></script>
</head><body>
<p>Menu:</p>
<p><a href="content1.htm"
onClick="openContentWindow(this.href); return false;">Content 1</a></p>
<p><a href="content2.htm"
onClick="openContentWindow(this.href); return false;">Content 2</a></p>
</body>
</html>


============
content1.htm

============
<html><head>
<script language="JavaScript" type="text/javascript"
src="windowCode.js"></script>
</head><body>
<p>Content 1</p>
<p><a href="menu.htm"
onClick="openMenuWindow(this.href); return false;">Menu</a></p>
</body></html>

============
content2.htm

============
<html><head>
<script language="JavaScript" type="text/javascript"
src="windowCode.js"></script>
</head><body>
<p>Content 2</p>
<p><a href="menu.htm"
onClick="openMenuWindow(this.href); return false;">Menu</a></p>
</body></html>


============
windowCode.js

============
// Menu window uses this function to open a content window.
function openContentWindow (pageUrl)
{
var win = null;


alert ("window.contentWindow = " + window.contentWindow);

if (window.contentWindow &&
!window.contentWindow.closed)
{
win = window.contentWindow;
if (String(win.location) != pageUrl)
{
win.location.replace (pageUrl);
} // end if
} // end if
else
{
win = window.open (pageUrl, "contentWindow");
window.contentWindow = win;
} // end else
win.menuWindow = self;
win.focus();
} // end openContentWindow function




// Content windows use this function to open a menu window.
function openMenuWindow (pageUrl)//(pageUrl, pageName, w, h, scroll, pos)
{
window.name="contentWindow";

var win = null;

alert ("self.menuWindow = " + self.menuWindow);

if (window.menuWindow &&
!window.menuWindow.closed)
{
win = window.menuWindow;
if (String(win.menuWindow) != pageUrl)
{
win.location.replace (pageUrl);
} // end if
} // end if
else
{
win = newMenuWindow (pageUrl);
window.menuWindow = win;
} // end else

win.contentWindow = self;
win.focus();
} // end openMenuWindow function


function newMenuWindow (pageUrl)
{
var pageName = 'menuWindow';
var w = '800';
var h = '450';
var scroll = 'no';
var pos = 'center';

var LeftPosition=(screen.width)?(screen.width-w)/2:100;
var TopPosition=(screen.height)?(screen.height-h)/2:100;

var settings=
'width='+w+
',height='+h+
',top='+TopPosition+
',left='+LeftPosition+
',scrollbars='+scroll+

',location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no';

var menuWindow = window.open (pageUrl, pageName, settings);
return menuWindow;
} // end openContentWindow function

 

[DU]

Hi Thomas.

Your advice is pretty much what I originally tried. Here is a test scenario
for that. My problem is that on each alert, the 'placed' window property is
undefined!

I am getting really frustrated here. Any advice would be most welcome!

Rob

Your code has several problems, some are logical ones.

============
menu.htm

============
<html><head>
<script language="JavaScript" type="text/javascript"
src="windowCode.js"></script>

If you want your code to work as best as possible in all compliant
browsers, then use a doctype declaration (preferably with a full url -
system id -, strict DTD) and validate your files. Here, language is
deprecated and invalid. type is both backward and forward-compatible, so
you can't be wrong .

</head>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en-us">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>Title goes here and is mandatory</title>

<script type="text/javascript" src="windowCode.js"></script>
</head>

<p>Menu:</p>
<p><a href="content1.htm"
onClick="openContentWindow(this.href); return false;">Content 1</a></p>
<p><a href="content2.htm"
onClick="openContentWindow(this.href); return false;">Content 2</a></p>
</body>
</html>


============
content1.htm

============
<html><head>
<script language="JavaScript" type="text/javascript"
src="windowCode.js"></script>
</head><body>
<p>Content 1</p>
<p><a href="menu.htm"
onClick="openMenuWindow(this.href); return false;">Menu</a></p>
</body></html>

============
content2.htm

============
<html><head>
<script language="JavaScript" type="text/javascript"
src="windowCode.js"></script>
</head><body>
<p>Content 2</p>
<p><a href="menu.htm"
onClick="openMenuWindow(this.href); return false;">Menu</a></p>
</body></html>


============
windowCode.js

============
// Menu window uses this function to open a content window.
function openContentWindow (pageUrl)
{
var win = null;

Your window object reference (win) is a local variable, not a global
variable. This has decisive importance in the way your script functions
and window object references can work interactively and efficiently.

alert ("window.contentWindow = " + window.contentWindow);

Your original post had contentWindow defined as a global variable and a
window object reference to a secondary window. Here, in this post, you
don't define it that way. So, it's already impossible to test, verify
your code. Best is to upload all these files in a site and then give an
url so that we can test, even debug the webpage application.
One other thing. If contentWindow is a window object reference, then
window.contentWindow is circular and unneedlessly redundant, auto-circular.

if (window.contentWindow &&
!window.contentWindow.closed)
{
win = window.contentWindow;

I would drop entirely resorting to this local variable (win) to store a
global reference: it's counter-intuitive and not needed.

if (String(win.location) != pageUrl)
{
win.location.replace (pageUrl);
} // end if
} // end if
else
{
win = window.open (pageUrl, "contentWindow");

Bad coding practice. You should always give distinct, unique, intuitive
and meaningful identifiers. Here, the window.name and the window object
reference identifier is the same. So this makes debugging more difficult
for reviewers or yourself later. Even when using application like a
javascript debugger, this makes the untangling of code unneedlessly more
difficult.

window.contentWindow = win;

This looks tortuous at best.

} // end else
win.menuWindow = self;
win.focus();

focus() calls should be done only if the targeted window has effectively
lost focus, otherwise this is a poor usage of user's system resources.

} // end openContentWindow function




// Content windows use this function to open a menu window.
function openMenuWindow (pageUrl)//(pageUrl, pageName, w, h, scroll, pos)
{
window.name="contentWindow";

var win = null;

alert ("self.menuWindow = " + self.menuWindow);

if (window.menuWindow &&
!window.menuWindow.closed)
{
win = window.menuWindow;
if (String(win.menuWindow) != pageUrl)
{
win.location.replace (pageUrl);
} // end if
} // end if
else
{
win = newMenuWindow (pageUrl);
window.menuWindow = win;

The previous 2 lines up there are illogical, at best, redundant.
Compacted, it ends up as:

menuWindow = newMenuWindow(pageUrl);
where menuWindow is a local variable in your newMenuWindow function and
on the left side is a global variable. It's really confusing.

} // end else

win.contentWindow = self;
win.focus();
} // end openMenuWindow function


function newMenuWindow (pageUrl)
{
var pageName = 'menuWindow';
var w = '800';
var h = '450';
var scroll = 'no';
var pos = 'center';

pos is never used in your code.

var LeftPosition=(screen.width)?(screen.width-w)/2:100;
var TopPosition=(screen.height)?(screen.height-h)/2:100;

Your code ignores space taken by os-dependent semi-permanent
applications. Explorer bar, NS/Mozilla sidebar, MS-magnify, MS-Office
quick launch bar, winbar, windows taskbar, etc.. are just examples of
applications re-defining the workarea for applications where a new
window can be positioned. The correct way to center a new window is to
consider the available screen dimensions for applications (referred as
workspace or workarea for applications in documentations).

var settings=
'width='+w+
',height='+h+
',top='+TopPosition+
',left='+LeftPosition+
',scrollbars='+scroll+

',location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no';

You're willing to turn off window resizability for a window which will
have a minimum of 800x450 dimensions. This can not promote usability.
You're also willing to turn off scrollbars if needed, that is if content
overflows your own requested window dimensions: this is
counter-usability and anti-userfriendly. Your code does not take into
consideration default font-size on the user's browser and studies show
that this is an important usability factor when browsing.

You're also willing to turn off status bar on a 800x450 window. Status
bar reports unbiased reliable notifications on connections, download,
SSL icon, security warnings, download progress, etc.. Why would you need
to remove the status bar?

var menuWindow = window.open (pageUrl, pageName, settings);
return menuWindow;
} // end openContentWindow function

var menuWindowObjectReference;
function newMenuWindow (pageUrl)
{
var windowWidth, windowHeight, windowLeft, windowTop;

if(typeof window.screenX == "number" && typeof window.innerWidth ==
"number")
{
windowWidth = window.innerWidth * .68;
windowHeight = window.innerHeight * .68;
windowLeft = window.screenX + window.innerWidth * .16;
windowTop = window.screenY + window.innerHeight * .16;
}
else if(typeof screen.availWidth == "number")
{
windowWidth = screen.availWidth * .68;
windowHeight = screen.availHeight * .5;
windowLeft = screen.availWidth * .16;
windowTop = screen.availHeight * .16;
}
else
{
windowWidth = 500;
windowHeight = 250;
windowLeft = 60;
windowTop = 40;
};


menuWindowObjectReference = window.open(pageUrl, "menuWindowName",
"left=" + windowLeft + ",top=" + windowTop + ",width=" + windowWidth +
",height=" + windowHeight + ",resizable,scrollbars,status");
}

I'm sure your problem is solvable. Can you upload all your files into a
website? I would look at it.

DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/
- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html

 

[Robert Mark Bram]

Hi DU,

My testing pages can now be found here:
http://members.optushome.com.au/suesayram/rob/menu.htm
http://members.optushome.com.au/suesayram/rob/content1.htm
http://members.optushome.com.au/suesayram/rob/content2.htm
http://members.optushome.com.au/suesayram/rob/windowCode.js

All style, compatibility and naming issues aside (which I take to heart and
thank you for pointing out), there is one point I would like to ask you
about here.

Your window object reference (win) is a local variable, not a global
variable. This has decisive importance in the way your script functions
and window object references can work interactively and efficiently.

A friend suggested this to me before - but I fail to see how this can be the
cause of my problems since in all cases win is assigned:
- a property from the current window object; or
- the value of a new window (which is then stored as a property in the
current window object).
Either way, while win maybe local, it is a reference to a window object that
is not local (afaik) - how can DOM's window for the currently executing page
be local?

On a point of style, I believe it to be a good thing to use a local variable
here. I would think that the following code:

win = window.contentWindow;
if (String(win.location) != pageUrl)
{
win.location.replace (pageUrl);

is far more readable than this code:

win = window.contentWindow;
if (String(window.contentWindow.location) != pageUrl)
{
window.contentWindow.location.replace (pageUrl);

Although win could be re-named as "contentWin" in openContentWindow() and
"menuWin" in openMenuWindow().

Thank you very much for your response and the time taken to prepare it.

Rob

 

[Robert Mark Bram]

Hi DU,

One other question..

focus() calls should be done only if the targeted window has effectively
lost focus, otherwise this is a poor usage of user's system resources.

If the window already exists with the correct page loaded, I wish to bring
the window to the top (and not reload anything).. is there another way apart
from focus() to do this?

Rob

 

[DU]

Hi DU,

One other question..




If the window already exists with the correct page loaded,

then right here you first need to test if the window object reference
exists in memory and then if the referenced window is not closed.

I wish to bring

the window to the top (and not reload anything)..

But your code does none of this: it just calls win.focus() even if it is
not justified to do so. The standard way to do things is to verify
existence of an object and support for a method and then call the method
if the context justifies doing so.
What I'm trying to say is
bring it back on top if it lost focus, if it is behind the opener and do
nothing if it has not lost focus.
Your code says: bring it on top whatever. That's not sound programming.

Your code uses so many window references assignments, so many local
variable storing window references, etc.. It's really spaghetti-like.
Sorry if I sound admonishing or scolding you (I'm not trying to be hard
on you)... but that is what I see in your posts.

 

[Robert Mark Bram]

Hi DU!

I wish to bring

But your code does none of this: it just calls win.focus() even if it is
not justified to do so. The standard way to do things is to verify
existence of an object and support for a method and then call the method
if the context justifies doing so.

That is what the code does.

if (window.contentWindow &&
!window.contentWindow.closed)
{
win = window.contentWindow;
if (String(win.location) != pageUrl)
{
win.location.replace (pageUrl);
} // end if
} // end if
else
{
win = window.open (pageUrl, "contentWindow");
window.contentWindow = win;
} // end else

This will assign a value to 'win' - if contentWindow is there then will be
assigned
window.contentWindow
other wise it is assigned
window.open

I do not believe focus is being called unnecisarily -- focus() is only
called as part of a call to openContentWindow() (from the menu window) or
openMenuWindow() (from the content window). In either case, it is one window
bringing the *other* into focus.

Your code uses so many window references assignments, so many local
variable storing window references, etc.. It's really spaghetti-like.
Sorry if I sound admonishing or scolding you (I'm not trying to be hard
on you)... but that is what I see in your posts.

What I want to do is manipulate two window objects - contentWindow and
menuWindow - and allow each to bring the other back into focus without
reloading the document where possible.

Rob

 

[DU]

Hi DU,

My testing pages can now be found here:
http://members.optushome.com.au/suesayram/rob/menu.htm
http://members.optushome.com.au/suesayram/rob/content1.htm
http://members.optushome.com.au/suesayram/rob/content2.htm
http://members.optushome.com.au/suesayram/rob/windowCode.js

Your original post had contentWindow defined as a global variable and a
window object reference to a secondary window. Here, in your previous
post and still in your uploaded files, you don't define it that way. So
what should I be debugging here? What is your real code?
You did not include in these files any of the recommendations I suggested.

All style, compatibility and naming issues aside (which I take to heart and
thank you for pointing out), there is one point I would like to ask you
about here.

You can not ignore the usability issues here and what a vast experience
of coding and doing popups has gathered over the years: these are very
important for the success of your webpages. Here's food for you to think
about:

"Research shows that most users don't like to run more than one
application at a time. In fact, many users are confused by multiple
applications."

Windows User Experience team,
Microsoft Windows User Experience Frequently Asked Questions: Why is the
taskbar at the bottom of the screen?,
March 2001

"(...) Users often don't notice that a new window has opened, especially
if they are using a small monitor where the windows are maximized to
fill up the screen. So a user who tries to return to the origin will be
confused by a grayed out Back button." Jakob Nielsen, The Top Ten New
Mistakes of Web Design: 2. Opening New Browser Windows, May 30, 1999

and we know that you impose 2 distinct 800x450 secondary windows here.
So the user has to be able to juggle confortably with 3 opened windows
(menu.htm, content1.htm, content2.htm). You're definitively not making
this easy for a majority of users.

"(...) spawning second browser windows can completely throw users off
track because it removes the one thing they are sure how to use: the
'Back' button.(...) In another recent study, six out of 17 users had
difficulty with multiple windows, and three of them required assistance
to get back to the first window and continue the task."
Carolyn Snyder, Seven tricks that Web users don't know: 7. Second
browser windows, June 2001

A friend suggested this to me before - but I fail to see how this can be the
cause of my problems since in all cases win is assigned:

Maybe and then maybe not. What are your chances of self-creating a
logical bug by making your code more intricatedly complex? Have you an
idea of the side effects of toying with multiple local variables
interacting with global variables? What's the safe, sane, sound and most
efficient way to code here?

I did not see obvious misses with your code... but I know from
experience that you should keep number of variables to a minimum and not
use variables which duplicate unneedlessly the work of other variables.
It's not only a debugging issue, a code maintenance issue, a sound code
practice issue: it's a memory calls, stack, memory management issue on
the user's system. Crashes sometimes happens because of undetected
memory management conflicts.

- a property from the current window object; or

which is a global variable storing a reference to a window object. Why
play with 2 classes of memory... when you do not absolutely need to?

- the value of a new window (which is then stored as a property in the
current window object).
Either way, while win maybe local, it is a reference to a window object that
is not local (afaik)

Correct. So, just answer me: is that sound, logical and suitable in your
opinion?

- how can DOM's window for the currently executing page

be local?

On a point of style, I believe it to be a good thing to use a local variable
here.

Well, ask around in this newsgroup then. Trust me: you'll get a
different feedback.

I would think that the following code:

win = window.contentWindow;
if (String(win.location) != pageUrl)
{
win.location.replace (pageUrl);

is far more readable than this code:

win = window.contentWindow;
if (String(window.contentWindow.location) != pageUrl)
{
window.contentWindow.location.replace (pageUrl);

var contentWindowObjectReference ; // global variable
function openContentWindow(pageUrl)
{
if(contentWindowObjectReference != null &&
!contentWindowObjectReference.closed)
{
if(contentWindowObjectReference.location.href != pageUrl)
{
contentWindowObjectReference.location.replace(pageUrl);
};
}
else
{
contentWindowObjectReference = window.open(pageUrl,
"contentWindowName", "...windowFeatures string list...");
};
}

I even think at this point that your function name identifier is also
confusing: you're replacing content or you're creating and opening that
content window really. You should not assume that people reviewing your
code will easily figure out what you mean to do when you do not give
best meaningful identifiers to your function name, variables, etc..

Although win could be re-named as "contentWin" in openContentWindow() and
"menuWin" in openMenuWindow().

Although win could be entirely removed everywhere in these functions in
a sane effort of simplifying the code, making it more
memory-management-efficient, straightforward, easier to debug, etc...:
yes, that is what I'm saying.
You don't even need to prefix window object references with window either.

Just get rid entirely and everywhere of all these local win variables
and just work on global variables which store references to window
objects. Simplify your code!

DU

P.S.: just got an idea of what I think you're trying to achieve here.
Can you have a look at this page and then tell me if that is what you're
trying to achieve here?

http://www10.brinkster.com/doctorunclear/BrowserBugsSection/Opera7Bugs/Opera7Bugs.html

.... because in that page, I recycle and reuse the same requested popup:
I just change the url of the popup.

 

[DU]

Hi DU!




That is what the code does.

No. Your function calls the focus method regardless of context.

if (window.contentWindow &&
!window.contentWindow.closed)
{
win = window.contentWindow;
if (String(win.location) != pageUrl)
{
win.location.replace (pageUrl);
} // end if
} // end if
else
{
win = window.open (pageUrl, "contentWindow");
window.contentWindow = win;
} // end else

This will assign a value to 'win' - if contentWindow is there then will be
assigned
window.contentWindow
other wise it is assigned
window.open

I do not believe focus is being called unnecisarily -- focus() is only
called as part of a call to openContentWindow() (from the menu window) or
openMenuWindow() (from the content window).

Your focus call is called every single time that openContentWindow is
called. Every time.

In either case, it is one window

bringing the *other* into focus.





What I want to do is manipulate two window objects - contentWindow and
menuWindow -

Your code could be made more compact, more straightforward, more
efficient. I am again repeating myself.

and allow each to bring the other back into focus without

reloading the document where possible.

Rob

Just answer me then. Did you post or not the following? Just yes or no.
Fair enough?

function openContentWindow (pageUrl)
{
var win = null;


alert ("window.contentWindow = " + window.contentWindow);

if (window.contentWindow &&
!window.contentWindow.closed)
{
win = window.contentWindow;
if (String(win.location) != pageUrl)
{
win.location.replace (pageUrl);
} // end if
} // end if
else
{
win = window.open (pageUrl, "contentWindow");
window.contentWindow = win;
} // end else
win.menuWindow = self;
win.focus();
} // end openContentWindow function

Where have I copied that code then?

DU

 

[Robert Mark Bram]

Hi DU!

I get your point about focus now - I don't need to call it after
'window.open'. Thanks for that!

I apologise if I confused the issue with my testing pages. Yes those pages
had different code from the code I posted originally. I have gone through
many revisions of the code in the past two days and the code I posted here
was my most recent attempt.

I also agree that working with multiple windows is generally a bad idea - I
was trying to work with only two windows. The actual application has a lot
more to it than the above testing pages. I am sorry if this puts you off
wanting to help me (I understand your reasons), but I am not asking for
design assistance; I just want to get the JavaScript correct.

P.S.: just got an idea of what I think you're trying to achieve here.
Can you have a look at this page and then tell me if that is what you're
trying to achieve here?

http://www10.brinkster.com/doctorunclear/BrowserBugsSection/Opera7Bugs/Opera7Bugs.html

... because in that page, I recycle and reuse the same requested popup:
I just change the url of the popup.

That's the effect! Except that I want a 'call back' - so the "pop-ups"
(which is my content window) have a link back to the menu that will focus on
the menu window if it is still open or reload it if it is not.

This is why I was trying to have two window objects referring back to each
other: with the idea that each window could simply 'focus' back on the other
when a link is hit..

Rob

 

[Robert Mark Bram]

Howdy All!

I finally worked this out. Thanks very much to DU, who I hope will excuse me
for posting the sloppy html below - the only thing I want to show here is
the valid EcmaScript required to do the job.

This example involves two windows - a menu window and a content window.
Clicking links from the menu window open their documents in the content
window, loading only when appropriate. In turn, each content page has a link
back to the menu window, again, only loading where appropriate.

Any comments, criticisms or corrections welcome!

Rob


==========
menu.htm
==========
<html><head>
<script type="text/javascript">

window.name = "menuWindow";
var contentWindow;
var previousContentUrl;

// Menu window uses this function to open a content window.
function openContentWindow (contentUrl)
{
if (contentWindow == null ||
contentWindow.closed)
{
contentWindow = window.open (contentUrl, "contentWindow");
} // end if
else if (previousContentUrl != contentUrl)
{
contentWindow = window.open (contentUrl, "contentWindow");
contentWindow.focus();
} // end else if
else
{
contentWindow.focus();
} // end else

previousContentUrl = contentUrl;
} // end openContentWindow function
</script>
</head><body>
<h1>Menu:</h1>
<p><a href="content1.htm"
onClick="openContentWindow(this.href); return false;">Content 1</a></p>
<p><a href="content2.htm"
onClick="openContentWindow(this.href); return false;">Content 2</a></p>
</body>
</html>


==========
content1.htm
==========
<html><head>
<script type="text/javascript" src="windowCode.js"></script>
</head><body>
<h1>Content 1</h1>
<p><a href="menu.htm"
onClick="showMenuWindowFromContentWindow(this.href); return
false;">Menu</a></p>
</body></html>

==========
content2.htm
==========
<html><head>
<script type="text/javascript" src="windowCode.js"></script>
</head><body>
<h1>Content 2</h1>
<p><a href="menu.htm"
onClick="showMenuWindowFromContentWindow(this.href); return
false;">Menu</a></p>
</body></html>


==========
windowCode.htm
==========
function showMenuWindowFromContentWindow (pageUrl)
{
// Either gain reference to a window nameed menuWindow
// or open a blank window named menuWindow.
menuWindow = window.open('','menuWindow');

// If it is a blank window then its location will be blank
// and should be reloaded.
if (String (menuWindow.location) != pageUrl)
{
menuWindow.location.replace (pageUrl);
} // end if
else
{
menuWindow.focus();
} // end else
} // end openMenuWindow function

 

[DU]

Hi DU!

I get your point about focus now - I don't need to call it after
'window.open'. Thanks for that!

It's sometimes difficult to understand each other in newsgroup postings.

I apologise if I confused the issue with my testing pages. Yes those pages
had different code from the code I posted originally. I have gone through
many revisions of the code in the past two days and the code I posted here
was my most recent attempt.

I also agree that working with multiple windows is generally a bad idea - I
was trying to work with only two windows. The actual application has a lot
more to it than the above testing pages. I am sorry if this puts you off
wanting to help me (I understand your reasons), but I am not asking for
design assistance; I just want to get the JavaScript correct.




That's the effect! Except that I want a 'call back' - so the "pop-ups"
(which is my content window) have a link back to the menu that will focus on
the menu window if it is still open or reload it if it is not.

Ok. So, you need to edit the content of that popup a bit, right? I first
need to see the changes before suggesting any modifications to your
code. I need to see the final latest version of your code.

This is why I was trying to have two window objects referring back to each
other: with the idea that each window could simply 'focus' back on the other
when a link is hit..

Rob

DU

 

[DU]

Howdy All!

I finally worked this out. Thanks very much to DU, who I hope will excuse me
for posting the sloppy html below - the only thing I want to show here is
the valid EcmaScript required to do the job.

This example involves two windows - a menu window and a content window.
Clicking links from the menu window open their documents in the content
window, loading only when appropriate. In turn, each content page has a link
back to the menu window, again, only loading where appropriate.

Any comments, criticisms or corrections welcome!

Rob


==========
menu.htm
==========
<html><head>
<script type="text/javascript">

window.name = "menuWindow";

I don't think this is needed; right now, I don't see this as necessary
nor recommendable. menu.htm can be referred as the opener all the time;
opener is a pointer, a window object reference while window.name is just
a string property of the window object only useful in conjunction with
the HTML 4 target attribute.

var contentWindow;
var previousContentUrl;

// Menu window uses this function to open a content window.
function openContentWindow (contentUrl)
{
if (contentWindow == null ||
contentWindow.closed)
{
contentWindow = window.open (contentUrl, "contentWindow");
} // end if
else if (previousContentUrl != contentUrl)
{
contentWindow = window.open (contentUrl, "contentWindow");
contentWindow.focus();
} // end else if
else
{
contentWindow.focus();
} // end else

previousContentUrl = contentUrl;
} // end openContentWindow function
</script>
</head><body>
<h1>Menu:</h1>
<p><a href="content1.htm"
onClick="openContentWindow(this.href); return false;">Content 1</a></p>
<p><a href="content2.htm"
onClick="openContentWindow(this.href); return false;">Content 2</a></p>
</body>
</html>


==========
content1.htm
==========
<html><head>
<script type="text/javascript" src="windowCode.js"></script>
</head><body>
<h1>Content 1</h1>
<p><a href="menu.htm"
onClick="showMenuWindowFromContentWindow(this.href); return
false;">Menu</a></p>
</body></html>

==========
content2.htm
==========
<html><head>
<script type="text/javascript" src="windowCode.js"></script>
</head><body>
<h1>Content 2</h1>
<p><a href="menu.htm"
onClick="showMenuWindowFromContentWindow(this.href); return
false;">Menu</a></p>
</body></html>


==========
windowCode.htm
==========
function showMenuWindowFromContentWindow (pageUrl)
{
// Either gain reference to a window nameed menuWindow
// or open a blank window named menuWindow.
menuWindow = window.open('','menuWindow');

Right here, I think you need to explain your logic a bit. Why would you
want to load the opener (menuWindow) into the content window? This does
not strike to me as natural, recommendable...

// If it is a blank window then its location will be blank
// and should be reloaded.
if (String (menuWindow.location) != pageUrl)

This line above looks ok but for debugging purposes, it's preferable to use
if (String (menuWindow.location.href) != pageUrl)
This way of coding is more reliable.

Also, the previous line just opened an empty, "about:blank" document:
so, menuWindow.location.href will always be different from the pageUrl.
I'm a bit confused on the purpose of your page. Why do you absolutely
need to use 3 windows (1 opener and 2 popups)?

{
menuWindow.location.replace (pageUrl);
} // end if
else
{
menuWindow.focus();
} // end else
} // end openMenuWindow function

menuWindow should be declared outside that function as a global
variable: just var menuWindow

Finally, you can add these lines in your top part of your documents to
trigger standards compliance rendering mode in MSIE 6 for windows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en-us">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>Title goes here</title>

DU

 

[Robert Mark Bram]

Hi DU!

I don't think this is needed; right now, I don't see this as necessary
nor recommendable. menu.htm can be referred as the opener all the time;

Not if menu.htm was closed or if the content window was not reached through
menu.htm.

So the idea is that if 'menu' is clicked on a content window and menu.htm
isn't open, it will be opened. In this case, opener will be null.

opener is a pointer, a window object reference while window.name is just
a string property of the window object only useful in conjunction with
the HTML 4 target attribute.

When you open a window like this:
window.open ('', "menuWindow");
it will search for a window named 'menuWindow' and return reference to it or
open a blank window newly named 'menuWindow' and return reference to that.
This line in menu.htm:
window.name = "menuWindow";
makes sure that the menu window has that name if it was the first window
opened..

This should have been "windowCode.js"

Right here, I think you need to explain your logic a bit. Why would you
want to load the opener (menuWindow) into the content window? This does
not strike to me as natural, recommendable...

It isn't loading menuWindow into the content window. If the first parameter
(url) is empty and the second (window name) has a value, it will do one of
two things:
- return reference to an already open window with that name
- open a blank window with that name and return a reference to it
This is important because if the contentWindow is already open, I only want
to change its contents if it does not have the corrent document loaded.

This line above looks ok but for debugging purposes, it's preferable to use
if (String (menuWindow.location.href) != pageUrl)
This way of coding is more reliable.
Thanks!

Also, the previous line just opened an empty, "about:blank" document:

Only if no window with the desired name was found - in which case it will
have its location property manipulated to load the correct window..

so, menuWindow.location.href will always be different from the pageUrl.
I'm a bit confused on the purpose of your page. Why do you absolutely
need to use 3 windows (1 opener and 2 popups)?

I am not. There are only two windows.

menuWindow should be declared outside that function as a global
variable: just var menuWindow

Ok.

Finally, you can add these lines in your top part of your documents to
trigger standards compliance rendering mode in MSIE 6 for windows:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en-us">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>Title goes here</title>

And ok again!

Thank you once more DU, for the time you have taken.

Rob