“添加到收藏夹”的技术实现

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

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

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

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来快速搞定。具体实现如下： 

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

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

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

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方案：

$(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代码如下：

<a href="http://www.0574123.com/index.shtml" title="大象商城" class="jQueryBookmark">大象商城</a>

转自：标点符的《“添加到收藏夹”的技术实现》

转载于:https://www.cnblogs.com/oltra/p/5138897.html