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?
derekstattinAsked:
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.

 
HonorGodSoftware EngineerCommented:
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>
0
 
derekstattinAuthor Commented:
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
0
 
HonorGodSoftware EngineerCommented:
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.


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.

 
HonorGodSoftware EngineerCommented:
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.
0
 
HonorGodSoftware EngineerCommented:
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.
0
 
HonorGodSoftware EngineerCommented:
What's really interesting is that FireFox 2.0.0.6 works as expected...
Netscape 8.12 & 8.1.3 - don't quite act as expected.  When the specified target window wasn't open a new tab (not window) was opened.  However, when the tab was present, clicking on the link did not put focus on that tab.
Netscape 8 = works as expected
Opera 9.0.2 - works as expected
Opera 9.22 -  works as expected
0

Experts Exchange Solution brought to you by ConnectWise

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
 
narendra_mohanCommented:
u need to like this
window.open(url, name, feature);
url will contain path for the file.
name will handle for the uniqueness. means if one window is already opened with the name then url will refer to that screen only.
features will help u to set up the window size,location and status
0
 
HonorGodSoftware EngineerCommented:
Thanks for the points.  Good luck
0
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.

All Courses

From novice to tech pro — start learning today.