Opening New Windows

Roger Johansson Dec 4, 2006

General

When using strict doctypes the target attribute is not allowed for opening new windows. This script will accomplish that task easily and unobtrusively.

Good JavaScript site!

Notes

Created by: Roger Johansson
Web Site: http://www.456bereastreet.com/
Posted: December 4, 2006

The script uses the class name "non-html" so you will need to add that to the links you want to open in a new window, e.g., <a href="yourDocument.html" class="non-html">A sample file</a>

This script will not open a new window if a modifier key (ctrl/shift/etc.) is pressed while the link is clicked.

It also checks if the new window was successfully opened. If it was not, it returns true to allow the browser to open the link in the original window.

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: openNewWindows.js

/* 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] );
 	}
}

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;
 	}
}

/* Create the new window */
function openInNewWindow(e) {
 	var event;
 	if (!e) event = window.event;
 	else event = e;
 	// Abort if a modifier key is pressed
 	if (event.shiftKey || event.altKey || event.ctrlKey || event.metaKey) {
  		return true;
 	} else {
 	 	// Change "_blank" to something like "newWindow" to load all links in the same new window
 	     var newWindow = window.open(this.getAttribute('href'), '_blank');
 		 if (newWindow) {
 			  if (newWindow.focus) {
 	 			  newWindow.focus();
 			 }
 			 return false;
 		 }
 		 return true;
 	}
}

/* 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 = " [ file opens in a new window ]";
  		// Find all links
  		var links = document.getElementsByTagName('a');
  		var objWarningText;
  		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/.test(link.className)) {
    				// Create an em element containing the new window warning text and insert it after the link text
    				objWarningText = document.createElement("em");
    				objWarningText.appendChild(document.createTextNode(strNewWindowAlert));
    				link.appendChild(objWarningText);
    				link.onclick = openInNewWindow;
   			}
  		}
  		objWarningText = null;
 	}
}

addEvent(window, 'load', getNewWindowLinks);

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="openNewWindows.js"></script>

Body

Paste this code into the BODY section of your HTML document


<a href="http://www.javascriptsource.com/" class="non-html">Good JavaScript site!</a>

Leave a Response

(1 comment)

can these source code works for my frontpage created web

toba tunde Dec 5, 2006

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details