在网页上实现加入收藏夹或书签功能

    使用 <a> 标记(HTML定位标记)来创建书签按钮。 可以添加一些CSS规则来使链接点看起来像一个按钮。 我们为什么不使用 <button> 标签? 原因在于某些浏览器(Firefox 15+和Opera 15之前的Opera)需要使用带有 rel="sidebar" 的链接标记来创建书签。

    基于WebKit&Blink的桌面浏览器(例如Safari,Chrome,Opera 15+)不支持通过JavaScript添加书签,系统会给出一个警告框并告诉用户使用Cmd + D / Ctrl + D 来进行书签添加操作。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>42度空间-如何在网页上实现加入收藏夹或书签功能</title>
</head>
<body>
<div>
    <a id="bookmark-it" href="http://www.42du.cn" title="把 42度空间 加入收藏夹">加入收藏/书签</a>
</div>
<script type="text/javascript">
    window.onload = function () {
        var it = document.getElementById("bookmark-it");
        it.onclick = function (e) {
            var bookmarkURL = window.location.href;
            var bookmarkTitle = document.title;
            if (window.external && ('AddFavorite' in window.external)) {
                // IE 收藏夹
                window.external.AddFavorite(bookmarkURL, bookmarkTitle);
            } else if (window.sidebar && window.sidebar.addPanel) {
                // Firefox <=22
                window.sidebar.addPanel(bookmarkTitle, bookmarkURL, '');
            } else if ((window.sidebar && /Firefox/i.test(navigator.userAgent)) || (window.opera && window.print)) {
                // Firefox 23+ 和 Opera <=14
                it.setAttribute("href",bookmarkURL);
                it.setAttribute("title",bookmarkTitle);
                it.setAttribute("rel","sidebar");
                return true;
            }  else {
                // 其它浏览器 (主要是 WebKit & Blink - Safari, Chrome, Opera 15+)
                alert('按 ' + (/Mac/i.test(navigator.userAgent) ? 'Cmd' : 'Ctrl') + '+D 键将本页加入书签。');
            }
            return false;
        }
    }
</script>
</body>
</html>

 

转载于:https://my.oschina.net/patch/blog/1648116

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值