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

Question

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

52

我正在使用Drupal建立一个网站。在每个页面的头部，我想要放置一个单个图片（由我自定义设计），作为一个“添加到收藏夹”的自定义按钮。点击这张图片应该将网站的URL添加到用户浏览器的收藏夹中。这应该适用于所有浏览器，包括IE7+、Firefox、Opera和Chrome。

我在网上没找到太多相关信息。我认为可以使用javascript来完成这个操作，但是我对javascript并不很熟悉:)所以需要你的帮助！

- webmaniacgr

可能是使用jQuery点击书签的重复问题。 - alanj

简而言之，您可以尝试使用Web扩展，或者在页面上创建一个带有rel="bookmark"的绝对链接，以便用户决定如何处理它。 - vhs

5个回答

23

这段代码是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>

- Handsome Nerd

谢谢！这个在IE上可行，不像被接受的答案。（在强制IE9模式下，在IE10上） - reikyoushin

2

更新：如果您有一个id = sidebar的元素，这将失败，请查看此链接：http://stackoverflow.com/questions/17747578/uncaught-typeerror-object-htmldivelement-has-no-method-addpanel/17747873?noredirect=1#comment25877287_17747873 - reikyoushin

使用Firefox浏览器，具有id = sidebar的元素。请检查上面的问题...虽然已经修复。 - reikyoushin

3

刚刚尝试了这个脚本，但只在IE、Firefox、Chrome、Opera和Safari（Windows版）上弹出了书签框，其他都弹出警报。 - richard

3

我曾经遇到了关于rel="sidebar"的一些问题。当我在链接标签中添加它时，Firefox中的书签会正常工作，但在其他浏览器中停止工作。因此，我通过代码动态地添加rel="sidebar"来解决这个问题：

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.');

    }
});

- Alaa.Kh

1

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

它将书签添加到侧边栏中。

- Dima

2

location.href，document.title - 应该相反。 - Dima

0

感谢@Gert Grenander，@Alaa.Kh和Ross Shanon

试图整理一下：

所有的东西都可以工作 - 除了 Firefox 的书签功能。由于某种原因，调试器中的“window.sidebar.addPanel”不是一个函数，尽管它正常工作。

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

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：

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

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

示例在这里: http://www.yourhtmlsource.com/javascript/addtofavorites.html

重要的是，在Chrome中我们无法使用JS添加书签(aspnet-i)： http://www.codeproject.com/Questions/452899/How-to-add-bookmark-in-Google-Chrome-Opera-and-Saf

- snir

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- iambriansreed · Accepted Answer

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>