从 JavaScript 添加到浏览器收藏夹/书签，但适用于所有浏览器（我的在 Chrome 中不起作用）？
Posted
技术标签:
【中文标题】从 JavaScript 添加到浏览器收藏夹/书签，但适用于所有浏览器（我的在 Chrome 中不起作用）？【英文标题】：Add to browser favorites/bookmarks from JavaScript but for all browsers (mine doesn't work in Chrome)? 【发布时间】：2010-11-02 19:58:32 【问题描述】：谁能帮忙，我正在使用以下方法向 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 插件可以执行您的建议，但页面上的常规脚本肯定无法访问此类。 是的，这是一个愚蠢的想法（就像页面中的“返回”链接）。但客户经常在其他网站上看到它并想要它。 嗯.. 我想知道在要求某人为您的页面添加书签和人们实际这样做之间是否存在任何真正的关联？在我看来，它就像一个按钮说“喜欢这个页面”一样有用，好像点击它会使页面变得更好。 幽默的是，由于 SO 有一个id="sidebar"，window.sidebar 检查成功......然后 addPanel 调用失败了。所以，如果你打算使用上面的代码，你应该检查以确保window.sidebar 确实是你认为的那样。
为什么没有说明“使用 Ctrl+D 为该页面添加书签”的注释？
【参考方案1】：
您可以随时提醒客户按 ctr+D。这在所有浏览器中都是通用的。它很俗气，但对客户同样有用。
CTRL + D -- 适用于 Windows CMD + D -- 适用于 Mac
【讨论】：
实际上对于 Opera 9 之前的版本：它是 CTRL + T，在 Konqueror 上：CTRL + B。你也可以指定它是 'CTRL' 还是 'CMD/Command'，Win vs Mac。跨度> arlo：既然您可以像我们在 1910 年那样“直接”启动它，为什么还要在您的汽车上添加一个启动按钮？【参考方案2】：我在 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.');
);
【讨论】：
【参考方案3】：我刚刚测试了这个脚本：
赢
IE 6.0、IE 7.0、IE 8.0 火狐 2.0、火狐 3.6.3 Safari 3.1.2、Safari 3.2.3 Opera 9.00 谷歌浏览器 8.0苹果机
火狐3.6.13 Safari 5.0.1 Opera 11.0谷歌浏览器 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
();
【讨论】：
@FFish 这不起作用，因为您指示 BookmarkApp.addBookmark(this) 使用，但关于您的脚本，它必须是 ATBookmarkApp.addBookmark(this) 请编辑它。拜托，“GlamThumbs - 免费色情视频画廊”的标题是什么。请使用其他东西 :) 我差点忘了它没有改变，这对访客来说真的很糟糕。 我编辑了上面的答案以实际调用正确的类，并且我删除了 GlamThumbs 标题（刚才差点忘了自己删除）。除此之外，工作就像一个魅力！ @Stephan：我不考虑显示一个消息框，告诉用户按下组合键'像魅力一样工作'...... 在 IE9 中我得到一个空警报。您还调用变量 ATBookmarkApp，但在链接 onclick 处理程序上您返回 BookmarkApp。【参考方案4】：我无法让上面的例子工作。无论如何，原始问题的答案“它在 CHROME 中不起作用，我也没有收到我的错误消息说“不支持”......”是由于这条线
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);
【讨论】：
【参考方案5】：发现之后——就像爱迪生一样！ - 很多方法都不起作用，我最终遇到了this page，它说通过 JS 添加书签在 Chrome 中被明确禁用。不幸的是，它没有解释原因。
更新：另一个 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 version。 bookmark.js 几乎完全符合 OP 的代码：
$ cat /scripts/bookmark.js
/* simple cross-browser script for adding a bookmark
source: http://***.com/questions/992844/add-to-browser-favourites-bookmarks-from-javascript-but-for-all-browsers-mine-do
*/
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.");
希望有用。
【讨论】：
【参考方案6】：抱歉，没有跨浏览器的方法可以做到这一点。您的 FF 示例也已损坏：它不会创建常规书签，而是创建要在侧边栏中打开的书签集。您必须use the bookmark-service 才能创建一个实际的书签，但由于安全限制，这将失败。
【讨论】：
是的，我也是.. 认为这是一个愚蠢的想法，但客户想要它.. 但如果不可能，我想我会找到其他东西:-) 如果这仅适用于消息灵通的客户，那么为什么要关心它是否在 Chrome 中工作？ FF 情况略有改善：由于 UI 更改，现在可以在添加书签时将其标记为常规，但默认情况下仍会在侧边栏中打开 这个答案在 imo 中已经过时，请参阅 FFish 发布的脚本 @Stephan：我不同意——你说得对，它现在可以在 FF 中使用（如果你无视用户必须取消选中侧边栏框才能获得正确书签的事实，我已经评论过)，但在许多其他浏览器中，脚本只会显示alert()，告诉用户按下某个组合键；和以前一样，仍然没有真正的跨浏览器解决方案。以上是关于从 JavaScript 添加到浏览器收藏夹/书签，但适用于所有浏览器（我的在 Chrome 中不起作用）？的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript 在Javascript中创建添加到收藏夹/书签按钮