Skip to main content

Javascript Tips: Give Visitors An Option To Open Links in New Window

Do you manually append the target="_blank" attribute to <A HREF..> tags because you prefer that visitors open external hyperlinks in new browser windows and don't leave your website ?

While it's your blog and you have the full right to decide how to display external links to your site visitors, how about giving the site visitors an option to decide if they want to open external links in the current window itself, not in new browser windows.

If they want to see the current page on your website again, they can always press the Back button on the browser toolbar. Plus you are also saved from manually typing that extra target="_blank" attribute in each of hyperlink HTML code.

So essentially, we will put a checkbox on the website that users can select if they wish to open external links in a new browser window. Implementing this new functionality is extremely simple,

Step 1: Add the following Javascript code somewhere inside the HEAD tag of your blog template. 
<script type="text/javascript">
// Open Links in New Window ?
  function changeHyperLinks(newWindow)  {
    if(newWindow)
      targetWindow ="_blank";
    else
      targetWindow ="_self";
// Process all hyperlinks   
for (var i=0; i if(document.links[i].href.indexOf("javascript")==-1 &&
  document.links[i].href.indexOf(window.location.hostname)==-1){
    document.links[i].target = targetWindow;
      }
    }
  }
</script>
Step 2: Modify the body tag to add the onload function
<body onload="changeHyperLinks(true)">
Step 3: Add a checkbox which people can tick to open links in new window.
<form>
<input type="checkbox" 
     onclick="changeHyperLinks(this.checked)" checked> 
                              Open links in new window
</form>
Dynamic Drive has another related script that allows you to open only selected links in new windows that are enclosed in a particular named DIV tag.

Update: Anjanesh makes an interesting observation. Since the target attribute for anchors is not allowed in strict HTML or strict XHTML 1.1, the above javascript code can be a good hack to bypass w3c.org validators.

Update: Why was the target attribute removed from XHTML 1.1?

W3C FAQ: It wasn't. XHTML 1.0 comes in three versions: strict, transitional, and frameset. All three of these were deliberately kept as close as possible to HTML 4.01 as XML would allow. XHTML 1.1 is an updated version of XHTML 1.0 strict, and no version of HTML strict has ever included the target attribute. The other two versions, transitional and frameset, were not updated, because there was nothing to update. If you want to use the target attribute, use XHTML 1.0 transitional.

Popular posts from this blog

How to Download Contacts from Facebook To Outlook Address Book

Facebook users are not too pleased with the "walled garden" approach of Facebook. The reason is simple - while you can easily import your Outlook address book and GMail contacts into Facebook, the reverse path is closed. There's no "official" way to export your Facebook friends email addresses or contact phone numbers out as a CSV file so that you can sync the contacts data with Outlook, GMail or your BlackBerry. Some third-party Facebook hacks like "Facebook Sync" (for Mac) and "Facebook Downloader" (for Windows) did allow you to download your Facebook friends' names, emails, mobile phone number and profile photo to the desktop but they were quickly removed for violation of Facebook Terms of Use. How to Download Contacts from Facebook There are still some options to take Friends data outside the walls of Facebook wall. Facebook offers the Takeout option allowing you to download all Facebook data locally to the disk (include...
Read more

Firefox Keyboard Shortcuts for Power Users

All features in Mozilla Firefox browser are accessible through the use of the keyboard. You can use shortcut keys to view and save Web pages, search the web, open new webpages, work with bookmarks, or find text on the current webpage. Some of the most common keyboard shortcuts in Mozilla Firefox are Ctrl+N (to open a new Firefox window), Ctrl+T (to open a new tab), Ctrl+F4 (to close the current tab) and Ctrl+S to save the current webpage. Mozilla Firefox supports many more powerful keyboard shortcuts. For instance, by pressing a simple key combination, you can manually delete autocomplete entries from the Firefox location bar or Web forms. I am sharing a list of my favorite Mozilla Firefox Keyboard Shortcuts that make web browsing with Firefox even more fun . And you also save your precious time as navigating through several layers of Firefox Toolbar menus is no longer necessary. 1. Web Search Ctrl+K moves the cursor to the Search Bar. You can then type in the terms you wish to fin...
Read more

Digital Inspiration

Digital Inspiration is a popular tech blog by  Amit Agarwal . Our popular Google Scripts include  Gmail Mail Merge  (send personalized emails with Gmail ),  Document Studio (generate PDFs from Google Forms ) and   File Upload Forms ( receive files  in Google Drive). Also see  Reverse Image Mobile Search , Online Speech Recognition and Website Screenshots , the most useful websites on the Internet.
Read more