asked on

opening new windows with javascript

I would like to create a simple javascript function to open a new window, and if the window is already open, I want to focus when the link is clicked for the second time.

I can do each link individually, but I would rather have one function that takes care of them all.

These are the atributes that I want,

<a href="#" class="login" onclick="javascript: secondwindow =open('http://www.real-estate-proforma.com/login/login.php','login','height=900, width=900, scrollbars=yes,resizable=yes,top=100,left=100, screenx=100,screeny=100,addressbar=1,toolbar=1,hotkeys=yes,titlebar=yes,location=yes,statusbar=1,menubar=1'); secondwindow.focus();">-login-</a>

I am rusty on my java script

I these links currently

<a href="" onClick="openBrWindow('../login/clubs.php')"><span class="link">Add New Investment Club</span></a><br>
<a href="" onClick="openBrWindow('../login/index-members.php')"><span class="link">Excel Proformas</span></a> <br>

with

function openBrWindow(theURL)
{
window.open(theURL);
}

How do I alter this function and the links to get the desired result?

HonorGod

I would suggest that you not use inline JavaScript.
In addition, the functions can keep track of the windows that have been opened, and check to see if they are still open. If not, open it again upon subsequent click. Something like this perhaps:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>PopupTest.html</title>
<script type='text/javascript'>
var kids = {};
var attr = 'width=350,height=200,scrollbars=0,resizable=0,toolbar=0,location=1,menubar=1,status=1,directories=1';

function doit( obj ) {
if ( !obj ) {
alert( 'Required parameter missing' );
} else {
var target = obj.getAttribute( 'href' );
alert( 'target: ' + target );
if ( target in kids ) {
kids[ target ].focus();
} else {
kids[ target ] = window.open( target, '', attr );
}
}
return false;
}

</script>
</head>
<body>
<table border='1'>
<tbody>
<tr>
<td><a href='popup1.html' onclick='return doit(this);'>One</a></td>
</tr>
<tr>
<td><a href='popup2.html' onclick='return doit(this)'>Two</a></td>
</tr>
<tr>
<td><a href='popup3.html' onclick='return doit(this)'>Three</a></td>
</tr>
</tbody>
</table>
</body>
</html>

derekstattin

ASKER

thanks,
There is one thing that I would like to change.

I tried to get rid of the alert, but when I do this I do not get the results that I am looking for. If I take the alert out, open one of the links, then close it, then open it again, in IE, the href opens in the current window in IE, and dows not open in Mozilla.

Can you show me how to get rid of the alert and maintain the same functionality as there is with the alert?

Thanks,

Derek

HonorGod

I don't know why removing the alert would do that. Now, you're going to make me think... :-)

Anyway, here is an interesting article about opening new windows (really an article, and two revisions):
- article: http://www.456bereastreet.com/archive/200605/using_javascript_instead_of_target_to_open_new_windows/
- revision #1: http://www.456bereastreet.com/archive/200605/opening_new_windows_with_javascript_version_11/
- revision #2: http://www.456bereastreet.com/archive/200610/opening_new_windows_with_javascript_version_12/

Based upon those, I changed the code to be:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>PopupTest.html</title>
<script type='text/javascript' src='../../objDisplay.js'></script>
<script type='text/javascript' src='javascript-target.js'></script>
<script type='text/javascript'>
var kids = {};
var attr = 'width=350,height=200,resizable=1,location=1,menubar=1,status=1';

//------------------------------------------------------------------
// Name: addEvent()
// Role: addEvent function from http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html
//------------------------------------------------------------------
function addEvent( obj, type, fn )
{
if ( obj.addEventListener ) {
obj.addEventListener( type, fn, false );
} else if (obj.attachEvent) {
obj[ "e" + type + fn ] = fn;
obj[ type + fn ] = function() { obj[ "e" + type + fn ]( window.event ); }
obj.attachEvent( "on" + type, obj[ type + fn ] );
}
}

//------------------------------------------------------------------
// Name: removeEvent()
// Role: addEvent function from http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html
//------------------------------------------------------------------
function removeEvent( obj, type, fn ) {
if ( obj.removeEventListener ) {
obj.removeEventListener( type, fn, false );
} else if ( obj.detachEvent ) {
obj.detachEvent( "on" + type, obj[ type + fn ] );
obj[ type + fn ] = null;
obj[ "e" + type + fn ] = null;
}
}

//------------------------------------------------------------------
// Name: openInNewWindow
// Role: Create the new window (if the window isn't already open)
//------------------------------------------------------------------
function openInNewWindow() {
var dest = this.getAttribute( 'href' );
// if ( dest in kids ) {
// alert( objDisplay( 'dest', kids[ dest ] ) );
// }
if ( !( dest in kids ) || ( kids[ dest ].document == null ) ) {
kids[ dest ] = window.open( dest, '_blank', attr );
}
// alert( objDisplay( 'kids', kids ) );
kids[ dest ].focus();
return false;
}

//------------------------------------------------------------------
// Name: getNewWindowLinks
// Rold: Add the openInNewWindow function to the onclick event of
// links with a class name of "new-window"
//------------------------------------------------------------------
function getNewWindowLinks() {
// Check that the browser is DOM compliant
if ( document.getElementById && document.createElement && document.appendChild ) {
// Change this to the text you want to use to alert the user that a new window will be opened
var strNewWindowAlert = " (opens in a new window)";
// Find all links
var links = document.getElementsByTagName( 'a' );
var objWarningText;
var strWarningText;
var link;
for ( var i = 0; i < links.length; i++ ) {
link = links[ i ];
// Find all links with a class name of "non-html"
if ( /\bnon\-html\b/.exec( link.className ) ) {
// Create an em element containing the new window warning text and insert it after the link text
objWarningText = document.createElement( "em" );
strWarningText = document.createTextNode( strNewWindowAlert );
objWarningText.appendChild( strWarningText );
link.appendChild( objWarningText );
link.onclick = openInNewWindow;
}
}
objWarningText = null;
}
}

addEvent( window, 'load', getNewWindowLinks );
</script>
</head>
<body>
<table border='1'>
<tbody>
<tr>
<td><a href='popup1.html' class='non-html'>One</a></td>
</tr>
<tr>
<td><a href='popup2.html' class='non-html'>Two</a></td>
</tr>
<tr>
<td><a href='popup3.html' class='non-html'>Three</a></td>
</tr>
</tbody>
</table>
</body>
</html>

However, I'm still having trouble with IE (7). For some reason, the new window doesn't contain the requested html text, and as you indicated, subsequent clicking on one of the links replaces the parent window with the destination page text instead of putting focus on the actual child window.

HonorGod

Don't worry about the objDisplay.js file. It contains some debug code I use to try and help me figure stuff out. I'm going to keep working on this though.

HonorGod

At this point, the only explanation that I can come up with is that the references returned by window.open() in IE 7 is the reference to the current window, and not the one that was created/opened. This would violate the design of the window.open method. and I can't see how IE7 would do this. It would be a serious bug.

ASKER CERTIFIED SOLUTION

HonorGod

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

narendra_mohan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

HonorGod

Thanks for the points. Good luck