Solved

Javascript Window opener and callback

Posted on 2003-10-30
14
5,475 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
 
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
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…

746 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now