Opening new windows with JavaScript, version 1.1

Update: The technique described here is not ideal. Read why in New windows with JavaScript and the target attribute.

After considering the suggestions made in the comments on my article Using JavaScript instead of target to open new windows and thinking some more about it, I've made some changes to the script. For the full story, please read the original article if you haven't already.

The revised script differs from the original in two ways:

  • It no longer opens a new window if a modifier key is pressed while the link is clicked. Good news for people who like to ctrl/shift/cmd/whatever-click to open links in new tabs.
  • It now 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.

To enable link styling depending on the type of file being linked to, I have revised the markup to use an additional class name that matches the file type. This has the additional benefit of enabling link styling in browsers with no JavaScript support. Note that I haven't styled the link in the demo document.

Example markup:

  1. <a href="javascript-target.pdf" class="non-html pdf">A sample PDF file</a>

Try it out in the JavaScript target demo document.

Here is the revised script, which should be included in your common.js or wherever you store your global JavaScript functions:

  1. // Create the new window
  2. function openInNewWindow(e) {
  3. var event;
  4. if (!e) event = window.event;
  5. else event = e;
  6. // Abort if a modifier key is pressed
  7. if (event.shiftKey || event.altKey || event.ctrlKey || event.metaKey) {
  8. return true;
  9. }
  10. else {
  11. // Change "_blank" to something like "newWindow" to load all links in the same new window
  12. var newWindow = window.open(this.getAttribute('href'), '_blank');
  13. if (newWindow) {
  14. if (newWindow.focus) {
  15. newWindow.focus();
  16. }
  17. return false;
  18. }
  19. return true;
  20. }
  21. }
  22. // Add the openInNewWindow function to the onclick event of links with a class name of "non-html"
  23. */
  24. function getNewWindowLinks() {
  25. // Check that the browser is DOM compliant
  26. if (document.getElementById && document.createElement && document.appendChild) {
  27. // Change this to the text you want to use to alert the user that a new window will be opened
  28. var strNewWindowAlert = " (opens in a new window)";
  29. // Find all links
  30. var objWarningText;
  31. var link;
  32. var links = document.getElementsByTagName('a');
  33. for (var i = 0; i < links.length; i++) {
  34. link = links[i];
  35. // Find all links with a class name of "non-html"
  36. if (/\bnon\-html\b/.test(link.className)) {
  37. // Create an em element containing the new window warning text and insert it after the link text
  38. objWarningText = document.createElement("em");
  39. objWarningText.appendChild(document.createTextNode(strNewWindowAlert));
  40. link.appendChild(objWarningText);
  41. link.onclick = openInNewWindow;
  42. }
  43. }
  44. objWarningText = null;
  45. }
  46. }

Either copy and paste from here or download my sample javascript-target.js file, which contains all the JavaScript you need to use this.

You also need to make sure the getNewWindowLinks() function is executed when the document has loaded. Use whichever addEvent() function you prefer using:

  1. addEvent(window, 'load', getNewWindowLinks);

That line is included in the javascript-target.js file that accompanies this article.

If you have any suggestions for further improvement, please post a comment.

Update: I have updated the script again. More information is available in Opening new windows with JavaScript, version 1.2.

Posted on May 9, 2006 in JavaScript