Solved

Javascript Window opener and callback

Posted on 2003-10-30
14
5,506 Views
Last Modified: 2012-05-04
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

0
Comment
Question by:RobertMarkBram
  • 5
  • 5
  • 3
14 Comments
 
LVL 10

Expert Comment

by:NetGroove
ID: 9654757
I tested your code and it worked on WindowsXP Pro IE6.0

0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9654898
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
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9654902
NetGroove:  that's interesting.  XP home ie6.0, it comes up undefined

Vinny
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 10

Expert Comment

by:NetGroove
ID: 9654928
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
 
LVL 10

Expert Comment

by:NetGroove
ID: 9654942
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
 

Author Comment

by:RobertMarkBram
ID: 9655106
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
 

Author Comment

by:RobertMarkBram
ID: 9655142
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
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9655191

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

Vinny
0
 

Author Comment

by:RobertMarkBram
ID: 9655271
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
 

Author Comment

by:RobertMarkBram
ID: 9656584
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
 
LVL 15

Accepted Solution

by:
VincentPuglia earned 125 total points
ID: 9659565
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
 

Author Comment

by:RobertMarkBram
ID: 9661799
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
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9661820
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

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
send email part1 9 39
JS library vs Js framework 11 20
window close link 7 32
center navbar (navigation menu) on web page 3 11
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

713 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question