Home / Articles / Programming languages / Scripting languages / JavaScript / Cross-browser compatible add to favorites/bookmarks JavaScript

Cross-browser compatible add to favorites/bookmarks JavaScript

Cross-browser compatible add to favorites/bookmarks JavaScript
Cross-browser compatible add to favorites/bookmarks JavaScript
  • Currently 4 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 4/5 (4 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.

Cross-browser adding pages to favorites is implemented by JavaScript. To add a page to Favorites in the Internet Explorer and browsers, compatible with IE, there is a standard method AddFavorite. However, there is one important detail. If IE page is opened as an embedded-object in another application, such as plug-ins or while using components for html, then the object window.external is present, but its method AddFavorite won't work. This is the most common mistake of developers who just copy the code from each other without any understanding or testing. Also a huge mistake would be to use on your website only this single method.

Browsers with Gecko engine, such as Firefox, Netscape, K-Meleon and others have an object window.sidebar and an add method addPanel. The third parameter of the method is undocumented and therefor optional, so in the script is replaced with an empty string. Note, that by default the reference is added not right to the bookmarks, but to the browser sidebar. To add the page to the right bookmark folder, select it from the drop down menu.

For Opera the reference "Add to bookmarks" must have the attribute rel="sidebar". However, if this attribute is already set by default, some browsers like Netscape will work on the "Add to bookmarks" function twice, first time using the script and the second time through the attribute rel. So you'll have to change the reference attributes dynamically, but first determine the type of the browser by the test object like opera.

If all of these methods failed, do not haste to display an error message, or worse, silently end the script. It would be a better idea to show the user an easy solution to the problem, for example to offer to press the key combination Ctrl+D.

Now that we have all the raw data we need, you can write cross-browser script to add page to your bookmarks. This is what I've got:

// Add to Favorites 
function add_favorite( a ) { 
  title = document.title; 
  url = document.location; 
  try { 
    // Internet Explorer 
    window.external.AddFavorite( url, title ); 
  catch (e) { 
    try { 
      // Mozilla 
      window.sidebar.addPanel( title, url, "" ); 
    catch (e) { 
      // Opera 
      if( typeof( opera ) == "object" ) { 
        a.rel = "sidebar"; 
        a.title = title; 
        a.url = url; 
        return true; 
      else { 
        // Unknown 
        alert( 'Press Ctrl-D to add page to your bookmarks' ); 
  return false; 

Example of a reference "Add to Favorites" for this script:

<a href="#" onclick="return add_favorite(this);">Add to Favorites</a>

A working implementation of this example, can found right here. Using try-catch allows the script to work properly in any unusual situations, for example in the IE Tab, opened in Firefox. The script, also works properly in various non-typical browsers, which cannot be identified by UserAgent or DOM-properties. Any commercial "work-of-art" DLE-like programs in these situations just quietly surrender.

Read also

jQuery for beginners: selectors

jQuery for beginners: selectors

Log in or create a user account to post a comment.


Quick navigation

General navigation