您的位置：首页 > 其它

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

2018-03-20 00:00 316 查看

摘要: 再网页上实现加入收藏夹/书签功能。

使用 <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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 浏览器书签

相关文章推荐

新的分享

章节导航