如何在所有浏览器中,包括 Chrome,在 JavaScript 中将网页添加到浏览器收藏夹或书签?

27

有人能帮忙吗,我正在尝试使用以下代码将书签添加到IE和Firefox中,但在Chrome中不起作用,而且我也没有收到错误消息"不支持"。

有人知道一个好的脚本来支持所有浏览器或者至少告诉我它不被支持,我可以使用jQuery - 也许有一些方法来检测浏览器

我目前正在使用这个代码,在IE和Firefox中它可以工作但是在chrome中不行

if (window.sidebar) { // Mozilla Firefox
    window.sidebar.addPanel(name, url, "");
}
else if (window.external) { // IE
    window.external.AddFavorite(url, name);
}
else if (window.opera && window.print) {
    window.external.AddFavorite(url, name);
}
else {
    alert('not supported');
}

抱歉,您的意思是要强制用户的浏览器添加书签吗?虽然Firefox或IE插件可以实现您建议的功能,但页面上的常规脚本肯定无法访问此类功能。 - Jonathan Fingland
实际上,IE方法被广泛使用(通常用于“添加到收藏夹”按钮),它会打开添加对话框。这是一种不好的做法,但当互联网初学者(=>在IE上)不知道他们可以自己完成时,它变得非常流行。 - instanceof me
3
是的,这个想法很愚蠢(就像页面中的“返回”链接一样)。但是客户经常在其他网站上看到它并希望使用。 - SpliFF
1
嗯...我想知道要求别人收藏你的页面和实际收藏之间是否存在真正的相关性?对我来说,这似乎和一个按钮说“喜欢这个页面”一样有用,好像点击它会使页面变得更好。 - SpliFF
3
开玩笑地说,由于SO有一个id为“sidebar”的元素,所以window.sidebar检查成功了...然后addPanel调用失败得很惨。因此,如果你要使用上述代码,你应该检查确保window.sidebar实际上是你认为的那个对象。 - Yahel
3
为什么不加一个提示,写上“使用Ctrl+D将此页面加入书签”呢? - NoBugs
6个回答

13

抱歉,没有跨浏览器的方法来实现这个。你的FF示例也有问题:它不会创建一个常规书签,而是创建了一个在侧边栏中打开的书签集。您需要使用书签服务 来创建一个实际的书签,但由于安全限制,这将失败。


我也是..觉得这是个愚蠢的想法,但客户想要它..但如果不可能的话,我想我还是得找别的东西 :-) - mark smith
6
如果这只是为一个知识不全的客户而做,那么是否在Chrome中能否正常工作就无关紧要了呢? - DA.
FF的情况略有改善:由于UI更改,现在在添加书签时可以将其标记为常规,但默认情况下仍将在侧边栏中打开。 - Christoph
1
这个答案已经过时了,我认为请看FFish发布的脚本。 - Stephan Muller
@Stephan:我不同意 - 你是正确的,如果你忽略用户必须取消侧边栏框才能获得正确的书签(我已经评论过了),它现在可以在FF中工作,但在许多其他浏览器中,脚本将只显示一个alert()告诉用户按一些键组合;与以前一样,仍然没有真正的跨浏览器解决方案。 - Christoph

6
发现了许多这不起作用的方法后,最终像爱迪生一样,我找到了这个页面,该页面明确说明在Chrome中禁用了通过JS添加书签。不幸的是,它并没有解释为什么。
更新:另一个SO用户要求我扩展此答案...
我的链接和按钮都与class="addbookmark"关联。当用户代理为Chrome时,我使用一些jQuery来禁用链接并解释原因:
<script type="text/javascript" src="/scripts/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="/scripts/bookmark.js"></script> 
<script> 
    title='A Label for this Bookmark, ie title of this page'; // for example, not really generated this way... 

    $jQuery(document).ready(function(){ 
        // chrome does not permit addToFavorites() function by design 
        if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { 
            $('.addbookmark').attr({ 
                title: 'This function is not available in Google Chrome. Click the star symbol at the end of the address-bar or hit Ctrl-D to create a bookmark.', 
                href: 'javascript:return false' 
            }) 
            .css({opacity: .25});       // dim the button/link 
        } 
    }); 
</script> 

并且在页面的其他位置:

 <td rowspan="2" class="noprint" style="width:24px;"> 
     <a class="addbookmark" title="Save a Bookmark for this page" 
        href="javascript:addToFavorites(location.href,title)"> 
        <img style="width:24px; height:24px; padding-top:2px;" src="/images/bookmark.gif"></a> 
 </td> 

虽然不完美,但似乎选择相对有限。

jQuery的版本并不重要,您可以选择本地副本或热链接到google版本bookmark.js基本上与OP的代码完全一致:

$ cat /scripts/bookmark.js 
/* simple cross-browser script for adding a bookmark 
    source: https://dev59.com/YXNA5IYBdhLWcg3wWsiK 
*/ 
function addToFavorites(url, name) { 
    if (window.sidebar) { // Mozilla Firefox 
        window.sidebar.addPanel(name, url, ""); 
    } else if (window.external) { // IE 
        window.external.AddFavorite(url, name); 
    } else if (window.opera && window.print) { 
        window.external.AddFavorite(url, name); 
    } else { 
        alert("Sorry! Your browser doesn't appear to support this function."); 
    } 
} 

希望这对你有所帮助。

5

我刚在以下平台测试了这个脚本:

Windows

  • IE 6.0,IE 7.0,IE 8.0
  • Firefox 2.0,Firefox 3.6.3
  • Safari 3.1.2,Safari 3.2.3
  • Opera 9.00
  • Google Chrome 8.0

Mac

  • Firefox 3.6.13
  • Safari 5.0.1
  • Opera 11.0
  • Google Chrome 8.0

    /*
    * Copyright 2010 by GlamThumbs Team.
    *
    * How To Use The Script:
    * add to your page this code between inside head tags
    * <script type="text/javascript" src="ATBookmarkApp.js"></script> 
    * add anchor with void href like this: 
    * <a href="javascript:void(0)" onClick="return BookmarkApp.addBookmark(this)">bookmark us</a> 
    * 
    */
    
    ATBookmarkApp = function () {
        var isIEmac = false; /*@cc_on @if(@_jscript&&!(@_win32||@_win16)&& 
    (@_jscript_version<5.5)) isIEmac=true; @end @*/
        var isMSIE = (-[1,]) ? false : true;
        var cjTitle = document.title;
        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
        }
    }();
    

4
@FFish这个不起作用,因为你使用了BookmarkApp.addBookmark(this)的指令,但根据你的脚本,它必须是ATBookmarkApp.addBookmark(this),请修改一下。还有,请问“GlamThumbs - Free Porn Video Galleries”这个标题是什么意思?请换一个标题 :) 我差点忘了它没有被改变,这对访客来说会很糟糕。 - aiternal
我编辑了上面的答案,确保调用正确的类,并删除了GlamThumbs标题(几乎忘记自己刚才删除它了)。除此之外,一切正常! - Stephan Muller
@Stephan:我不认为显示一个消息框,告诉用户按下键盘组合键就能“像魔法一样工作”... - Christoph
在IE9中,我得到了一个空的警告。另外,您调用变量ATBookmarkApp,但在链接onclick处理程序中返回BookmarkApp。 - Spadar Shut

5
您可以随时提醒客户按下 ctr + D。这在所有浏览器中都是通用的。虽然有点俗气,但对客户非常有用。
Windows:CTRL + D Mac:CMD + D

实际上,在 Opera 9 版本之前,是 CTRL + T,在 Konqueror 上是 CTRL + B。然后您还可以指定是“CTRL”还是“CMD/Command”,Win vs Mac。 - FFish
2
为什么要在你的车上加一个启动按钮,当我们总是像1910年那样“只是”用手摇起它呢? - Didier Levy

3
我无法使上述示例运行。无论如何,原问题的答案是:“在Chrome中无法运行,并且我也没有收到错误消息'not supported'”,这是由于以下行导致的:
else if (window.external) { // IE 

Chrome实际上通过了这个测试,但显然无法添加书签。我将此行更改为

else if(window.external && !window.chrome)  // IE

现在你收到了“不支持”的消息。我实际上删除了此消息,并调用函数hotKeys()以获取更有意义的警报。我不得不做一些更改才能使其工作。

function showHotKeys() 
{ 
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 || isMac) { 
    str = (isMac ? 'Command/Cmd' : 'CTRL') + ' + D'; // Netscape, Safari, iCab
} 
return ((str) ? 'Press ' + str + ' to bookmark this page.' : str); 
} 

0
我的方法是借助jQuery。
在IE 6-8、Fx 1-25和Opera 7-14中进行了测试。在Chrome和Saf中适应性良好。

CSS:

.no-js .link-bookmark {
   display: none;
}

JS:

/* ... Bookmark current page ... */
var $favLink = $('.link-bookmark');

if ( window.sidebar || 'AddFavorite' in window.external || window.opera ) {
    $favLink.show();
}

// add a 'rel' attrib if Op 7+ && Fx >= 23
if ( window.opera || window.sidebar ) {
    var $favLinkAttrRel = $favLink.attr('rel');
    if ( typeof $favLinkAttrRel !== "undefined" && $favLinkAttrRel !== false ) { // don't overwrite the rel attr if already set
        $favLink.attr('rel', 'sidebar');
    }
}

$favLink.click(function( event ) {
//event.preventDefault(); // prevent the anchor tag from sending the user off to the link
var url = this.href;
var $title = $('title').text();

// IE Favorite
if ( 'AddFavorite' in window.external ) {
    event.preventDefault();
    window.external.AddFavorite(url, $title);
}
// Fx <23 Bookmark, 'addPanel' not available from v23 on any more.
else if ( 'addPanel' in window.sidebar ) {
    event.preventDefault();
    window.sidebar.addPanel($title, url, '');
}
// Op 7+ && Fx >= 23
else if ( window.opera || window.sidebar ) {
    $favLink.attr('title', $title);
    return true; // do nothing - the rel="sidebar" should do the trick
}
// for Saf, Konq etc - browsers who do not support bookmarking scripts
else {
    event.preventDefault();
    alert('Your browser doesn\'t support the bookmark functionality,'
    + 'please add this page to your bookmarks manually.');
} 
});

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接