“添加到收藏夹”功能（share）

以下分享自： 如何给网站增加“添加到收藏夹”

给网站添加“添加到收藏夹”理论上应该是很简单的事情，但是受到各种浏览器和操作系统的不一致的问题，使得这个问题异常的繁琐啊。

下面是梳理的一些资料，仅供参考。

 

首先是使用快捷键进行添加，如我们熟知的“Ctrl+D”，但是并不是说有的电脑都支持这么操作。键盘快捷键：Ctrl+D 仅适用于 Windows 和Linux）；⌘-D 才适用于苹果机（苹果机上没有Ctrl键）。

方案一：使用Javascript模拟键盘操作

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72

BookmarkApp = function () {     var isIEmac = false;     var isMSIE = (-[1,]) ? false : true;     var cjTitle = "Welcome to CodeCTO.com";     var cjHref = location.href;       function hotKeys() {         var ua = navigator.userAgent.toLowerCase();         var str = '';         var isWebkit = (ua.indexOf('webkit') != - 1);         var isMac = (ua.indexOf('mac') != - 1);           if (ua.indexOf('konqueror') != - 1) {             str = 'CTRL + B'; // Konqueror         } else if (window.home || isWebkit || isIEmac || isMac) {             str = (isMac ? 'Command/Cmd' : 'CTRL') + ' + D'; // Netscape, Safari, iCab, IE5/Mac         }         return ((str) ? 'Press ' + str + ' to bookmark this page.' : str);     }       function isIE8() {         var rv = -1;         if (navigator.appName == 'Microsoft Internet Explorer') {             var ua = navigator.userAgent;             var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");             if (re.exec(ua) != null) {                 rv = parseFloat(RegExp.$1);             }         }         if (rv > - 1) {             if (rv >= 8.0) {                 return true;             }         }         return false;     }       function addBookmark(a) {         try {             if (typeof a == "object" && a.tagName.toLowerCase() == "a") {                 a.style.cursor = 'pointer';                 if ((typeof window.sidebar == "object") && (typeof window.sidebar.addPanel == "function")) {                     window.sidebar.addPanel(cjTitle, cjHref, ""); // Gecko                     return false;                 } else if (isMSIE && typeof window.external == "object") {                     if (isIE8()) {                         window.external.AddToFavoritesBar(cjHref, cjTitle); // IE 8                     } else {                         window.external.AddFavorite(cjHref, cjTitle); // IE <=7                     }                     return false;                 } else if (window.opera) {                     a.href = cjHref;                     a.title = cjTitle;                     a.rel = 'sidebar'; // Opera 7+                     return true;                 } else {                     alert(hotKeys());                 }             } else {                 throw "Error occured.\r\nNote, only A tagname is allowed!";             }         } catch (err) {             alert(err);         }       }       return {         addBookmark : addBookmark     } }();

如果嫌上面的方案比较麻烦，可以采用jQuery来快速搞定。具体实现如下： 

?

1 2 3 4

var evt = jQuery.Event("keypress"); evt.keyCode = 100; // d evt.ctrlKey = true; $(document).trigger(evt);

方案二：采用Javascript来添加书签

以下是一段能自动把当前页面添加到浏览器书签的JavaScript 脚本，支持 FireFox，Opera 和 IE，Webkit 核心的 Safari 和Chrome 暂时没有实现类似功能的方法。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

function bookmark(url, title){     if (window.sidebar) // firefox         window.sidebar.addPanel(title, url, "");     else if(window.opera && window.print){ // opera         var elem = document.createElement('a');         elem.setAttribute('href',url);         elem.setAttribute('title',title);         elem.setAttribute('rel','sidebar');         elem.click();     }     else if(document.all) // ie         window.external.AddFavorite(url, title);     else         alert('Your browser does not support this function.'); }

同样的，也提供另外的jQuery方案：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

$(document).ready(function(){ $("a.jQueryBookmark").click(function(e){ e.preventDefault(); // this will prevent the anchor tag from going the user off to the link var bookmarkUrl = this.href; var bookmarkTitle = this.title;   if (window.sidebar) { // For Mozilla Firefox Bookmark window.sidebar.addPanel(bookmarkTitle, bookmarkUrl,""); } else if( window.external || document.all) { // For IE Favorite window.external.AddFavorite( bookmarkUrl, bookmarkTitle); } else if(window.opera) { // For Opera Browsers $("a.jQueryBookmark").attr("href",bookmarkUrl); $("a.jQueryBookmark").attr("title",bookmarkTitle); $("a.jQueryBookmark").attr("rel","sidebar"); } else { // for other browsers which does not support alert('Your browser does not support this bookmark action'); return false; } }); });

相应的HTML代码如下：

?

1	<a href="http://www.biaodianfu.com" title="标点符的博客" class="jQueryBookmark">标点符</a>