Javascript Window opener and callback

Hi All!

I want a two window navigation system: the menu will be in one window and the content in another..

Click on a link in the window named 'menu' and it will:
 - open a window named 'contentWindow' with the given href if no window named 'contentWindow' exists or is open;
 - change the location of a window named 'contentWindow' if it does exist and is open but has a different location to the target location.
 - call focus on the window named 'contentWindow' if it exists, is open and already has the target href as its location.

Conversely, click on a 'menu' link in the window named 'contentWindow' and it will either open the menu if no window named 'contentWindow' exists of call focus on it if it does exist. The href for 'menu' is always the same.

My testing code for this is below. My problem is that on each alert, the 'placed' window property is undefined!

Any help would be most appreciated!

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

RobertMarkBramAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

NetGrooveCommented:
I tested your code and it worked on WindowsXP Pro IE6.0

0
VincentPugliaCommented:
Hi Robert,

1) it is undefined because all the vars are local to the functions

function.....
{
var win = null;
 alert ("window.contentWindow = " + window.contentWindow);
....

2) everytime the function is called it recreates the var 'win' and sets it to null

Vinny
0
VincentPugliaCommented:
NetGroove:  that's interesting.  XP home ie6.0, it comes up undefined

Vinny
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

NetGrooveCommented:
You mean for the first call of "contentWindow"?
That is obvious, therefore I did not mention that.
But from that one on it works for me.

0
NetGrooveCommented:
And it has nothing to do with variables, from my point of view.
All the links are made from window.name assignments and window name parameter in second parameter of window.open()

0
RobertMarkBramAuthor Commented:
Hi Vincent.

1) it is undefined because all the vars are local to the functions
2) everytime the function is called it recreates the var 'win' and sets it to null

The only local var is "win", which is always:
 - assigned a property from the current window object; or
 - assigned 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 be local?

However, somehow I must be getting references confused for it not to work..

Rob
:)
0
RobertMarkBramAuthor Commented:
NetGroove, I run XP Pro and when I try it in Netscape 7.1 and IE 6.0, clicking links on the Menu window seem to work ok but clicking back to the menu sometimes creates a new window (I am having a hard time detecting a pattern in this behaviour).

Rob
:)
0
VincentPugliaCommented:

function openContentWindow (pageUrl)
{
 var win = null;
 alert ("window.contentWindow = " + window.contentWindow.length);
....
}
alert(window.contentWindow)
alert(window.name)
alert(win)

Vinny
0
RobertMarkBramAuthor Commented:
Hi Vinny,

Can you elaborate on this a bit further?

alert(window.contentWindow)
alert(window.name)
alert(win)

I know that win will always be null/undefined.. however I don't quite understand why I see the first two come up every time the page is brought back into focus - I thought I had avoided reloading the document if the window existed with the correct page loaded already...

Rob
:)
0
RobertMarkBramAuthor Commented:
Howdy All!

I finally worked this out.

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.

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

0
VincentPugliaCommented:
Hi Robert,

>>My testing code for this is below. My problem is that on each alert, the 'placed' window property is undefined!

  amused to see your solution had 'nothing' to do with any of the posts above.  I guess the addition of global variables came to you out the blue, zen-like.


Vinny
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
RobertMarkBramAuthor Commented:
I do apologise. Please forgive my rudeness. Your suggestion was indeed part of the answer I constructed. Thank you very much for your time and effort - it was much appreciated.

Rob
:)
0
VincentPugliaCommented:
no apology necessary.  I probably should have answered your post:  "Can you elaborate on this a bit further?"  but I was feeling zen-ish :D

Vinny
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.