[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

opening new windows with javascript

Posted on 2007-08-11
8
Medium Priority
?
1,733 Views
Last Modified: 2013-11-19
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?
0
Comment
Question by:derekstattin
  • 6
8 Comments
 
LVL 41

Expert Comment

by:HonorGod
ID: 19677775
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
 

Author Comment

by:derekstattin
ID: 19679769
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 19680165
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 41

Expert Comment

by:HonorGod
ID: 19680172
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 19680207
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
 
LVL 41

Accepted Solution

by:
HonorGod earned 1800 total points
ID: 19680254
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
 

Assisted Solution

by:narendra_mohan
narendra_mohan earned 200 total points
ID: 19683149
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
 
LVL 41

Expert Comment

by:HonorGod
ID: 19736479
Thanks for the points.  Good luck
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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 how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

868 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