Javascript 如何在我的网站上添加“添加到收藏夹”按钮或链接？

How do I add an "Add to Favorites" button or link on my website?

提问by webmaniacgr

I'm building a website using Drupal. On the header of each page I want to have a single image (custom designed by me) which would act as a custom "Add to Favorites" button. Clicking on the image should add the website's URL to the user browser's favorites (bookmarks). This should work for all browsers, IE7+, FF, Opera, Chrome. I wasn't able to find much information for this online. I suppose that javascript should do the job but I don't have much experience in Javascript :) so I need your help!

我正在使用 Drupal 建立一个网站。在每个页面的标题上，我希望有一个图像（由我自定义设计）作为自定义的“添加到收藏夹”按钮。单击图像应将网站的 URL 添加到用户浏览器的收藏夹（书签）。这应该适用于所有浏览器，IE7+、FF、Opera、Chrome。我无法在网上找到很多相关信息。我想 javascript 应该可以完成这项工作，但我在 Javascript 方面没有太多经验 :) 所以我需要你的帮助！

回答by iambriansreed

jQuery Version

jQuery 版本

$(function() {
  $('#bookmarkme').click(function() {
    if (window.sidebar && window.sidebar.addPanel) { // Mozilla Firefox Bookmark
      window.sidebar.addPanel(document.title, window.location.href, '');
    } else if (window.external && ('AddFavorite' in window.external)) { // IE Favorite
      window.external.AddFavorite(location.href, document.title);
    } else if (window.opera && window.print) { // Opera Hotlist
      this.title = document.title;
      return true;
    } else { // webkit - safari/chrome
      alert('Press ' + (navigator.userAgent.toLowerCase().indexOf('mac') != -1 ? 'Command/Cmd' : 'CTRL') + ' + D to bookmark this page.');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a id="bookmarkme" href="#" rel="sidebar" title="bookmark this page">Bookmark This Page</a>

回答by PHPst

This code is the corrected version of iambriansreed's answer:

此代码是 iambriansreed 答案的更正版本：

<script type="text/javascript">
    $(function() {
        $("#bookmarkme").click(function() {
            // Mozilla Firefox Bookmark
            if ('sidebar' in window && 'addPanel' in window.sidebar) { 
                window.sidebar.addPanel(location.href,document.title,"");
            } else if( /*@cc_on!@*/false) { // IE Favorite
                window.external.AddFavorite(location.href,document.title); 
            } else { // webkit - safari/chrome
                alert('Press ' + (navigator.userAgent.toLowerCase().indexOf('mac') != - 1 ? 'Command/Cmd' : 'CTRL') + ' + D to bookmark this page.');
            }
        });
    });
</script>

回答by Alaa.Kh

I have faced some problems with rel="sidebar". when I add it in link tag bookmarking will work on FF but stop working in other browser. so I fix that by adding rel="sidebar" dynamic by code:

我在 rel="sidebar" 方面遇到了一些问题。当我将它添加到链接标签时，书签将在 FF 上工作，但在其他浏览器中停止工作。所以我通过代码添加 rel="sidebar" dynamic 来解决这个问题：

jQuery('.bookmarkMeLink').click(function() {
    if (window.sidebar && window.sidebar.addPanel) { 
        // Mozilla Firefox Bookmark
        window.sidebar.addPanel(document.title,window.location.href,'');
    }
    else if(window.sidebar && jQuery.browser.mozilla){
        //for other version of FF add rel="sidebar" to link like this:
        //<a id="bookmarkme" href="#" rel="sidebar" title="bookmark this page">Bookmark This Page</a>
        jQuery(this).attr('rel', 'sidebar');
    }
    else if(window.external && ('AddFavorite' in window.external)) { 
        // IE Favorite
        window.external.AddFavorite(location.href,document.title); 
    } else if(window.opera && window.print) { 
        // Opera Hotlist
        this.title=document.title;
        return true;
    } else { 
        // webkit - safari/chrome
        alert('Press ' + (navigator.userAgent.toLowerCase().indexOf('mac') != - 1 ? 'Command/Cmd' : 'CTRL') + ' + D to bookmark this page.');

    }
});

回答by Dima

  if (window.sidebar) { // Mozilla Firefox Bookmark
     window.sidebar.addPanel(document.title,location.href,"");

It adds the bookmark but in the sidebar.

它添加了书签，但在侧边栏中。

回答by snir

Credit to @Gert Grenander, @Alaa.Kh, and Ross Shanon

感谢@Gert Grenander，@ Alaa.Kh和罗斯香农

Trying to make some order:

尝试下订单：

it all works - all but the firefox bookmarking function. for some reason the 'window.sidebar.addPanel' is not a function for the debugger, though it is working fine.

一切正常 - 除了 Firefox 书签功能。出于某种原因，“window.sidebar.addPanel”不是调试器的功能，尽管它工作正常。

The problem is that it takes its values from the calling <a ..>tag: title as the bookmark name and href as the bookmark address. so this is my code:

问题在于它从调用<a ..>标记中获取其值：title 作为书签名称，href 作为书签地址。所以这是我的代码：

javascript:

javascript:

$("#bookmarkme").click(function () {
  var url = 'http://' + location.host; // i'm in a sub-page and bookmarking the home page
  var name = "Snir's Homepage";

  if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1){ //chrome
    alert("In order to bookmark go to the homepage and press " 
        + (navigator.userAgent.toLowerCase().indexOf('mac') != -1 ? 
            'Command/Cmd' : 'CTRL') + "+D.")
  } 
  else if (window.sidebar) { // Mozilla Firefox Bookmark
    //important for firefox to add bookmarks - remember to check out the checkbox on the popup
    $(this).attr('rel', 'sidebar');
    //set the appropriate attributes
    $(this).attr('href', url);
    $(this).attr('title', name);

    //add bookmark:
    //  window.sidebar.addPanel(name, url, '');
    //  window.sidebar.addPanel(url, name, '');
    window.sidebar.addPanel('', '', '');
  } 
  else if (window.external) { // IE Favorite
        window.external.addFavorite(url, name);
  } 
  return;
});

html:

html：

  <a id="bookmarkme" href="#" title="bookmark this page">Bookmark This Page</a>

---

---

In internet explorer there is a different between 'addFavorite': <a href="javascript:window.external.addFavorite('http://tiny.cc/snir','snir-site')">..</a>and 'AddFavorite': <span onclick="window.external.AddFavorite(location.href, document.title);">..</span>.

在 Internet Explorer 中， 'addFavorite':<a href="javascript:window.external.addFavorite('http://tiny.cc/snir','snir-site')">..</a>和 'AddFavorite':之间存在差异 <span onclick="window.external.AddFavorite(location.href, document.title);">..</span>。

example here: http://www.yourhtmlsource.com/javascript/addtofavorites.html

这里的例子：http: //www.yourhtmlsource.com/javascript/addtofavorites.html

Important, in chrome we can't add bookmarks using js (aspnet-i): http://www.codeproject.com/Questions/452899/How-to-add-bookmark-in-Google-Chrome-Opera-and-Saf

重要的是，在 chrome 中我们不能使用 js ( aspnet-i)添加书签：http: //www.codeproject.com/Questions/452899/How-to-add-bookmark-in-Google-Chrome-Opera-and-安全