“添加到收藏夹”功能(share)
以下分享自: 如何给网站增加“添加到收藏夹”
给网站添加“添加到收藏夹”理论上应该是很简单的事情,但是受到各种浏览器和操作系统的不一致的问题,使得这个问题异常的繁琐啊。
下面是梳理的一些资料,仅供参考。
首先是使用快捷键进行添加,如我们熟知的“Ctrl+D”,但是并不是说有的电脑都支持这么操作。键盘快捷键:Ctrl+D 仅适用于 Windows 和Linux);⌘-D 才适用于苹果机(苹果机上没有Ctrl键)。
方案一:使用Javascript模拟键盘操作
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
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来快速搞定。具体实现如下:
|
1
2
3
4
|
var evt = jQuery.Event("keypress");evt.keyCode = 100; // devt.ctrlKey = true;$(document).trigger(evt); |
方案二:采用Javascript来添加书签
以下是一段能自动把当前页面添加到浏览器书签的JavaScript 脚本,支持 FireFox,Opera 和 IE,Webkit 核心的 Safari 和Chrome 暂时没有实现类似功能的方法。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
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方案:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
$(document).ready(function(){$("a.jQueryBookmark").click(function(e){e.preventDefault(); // this will prevent the anchor tag from going the user off to the linkvar bookmarkUrl = this.href;var bookmarkTitle = this.title;if (window.sidebar) { // For Mozilla Firefox Bookmarkwindow.sidebar.addPanel(bookmarkTitle, bookmarkUrl,"");} else if( window.external || document.all) { // For IE Favoritewindow.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 supportalert('Your browser does not support this bookmark action');return false;}});}); |
相应的HTML代码如下:
|
1
|
|
“添加到收藏夹”功能(share)的更多相关文章
- 设为首页 添加到收藏夹 (share)
设为首页,添加到收藏夹 分享自:http://my.oschina.net/lyx2012/blog/60036 设为首页 和 收藏本站js代码 兼容IE,chrome,ff <script t ...
- 基于Metronic的Bootstrap开发框架经验总结(13)--页面链接收藏夹功能的实现2(利用Sortable进行拖动排序)
在上篇随笔<基于Metronic的Bootstrap开发框架经验总结(12)--页面链接收藏夹功能的实现>上,我介绍了链接收藏夹功能的实现,以及对收藏记录的排序处理.该篇随笔主要使用功能按 ...
- 基于Metronic的Bootstrap开发框架经验总结(12)--页面链接收藏夹功能的实现
在一个系统里面,往往有很多菜单项目,每个菜单项对应一个页面,一般用户只需要用到一些常用的功能,如果每次都需要去各个层次的菜单里面去找对应的功能,那确实有点繁琐.特别是在菜单繁多,而客户又对系统整体不熟 ...
- javascript添加到收藏夹写法
javascript添加到收藏夹写法 <pre>function addFavorite2() { var url = window.location; var title = docum ...
- 兼容IE,Firefox,Opera等浏览器的添加到收藏夹js代码实现
function AddToFavorites() { var title = document.title; var url = location.href; if (window.sidebar) ...
- JQUERY 实现加入收藏夹功能
关于"加入收藏"的代码,很多人都不会重视,一般情况是随便在网上搜一个代码放在页面里就草草了事了.可是都没有做到主流浏览器的兼容.下面分享一段使用 jQuery 实现加入收藏夹的功能 ...
- 保存知乎收藏夹功能的NodeJS版本
前两天发现知乎收藏夹中的答案正在不断减少..看来需要保存一下了,但之前别人的方式是用chrome插件(浏览器无法自动保存本地文件)+wget前后端配合来完成这个工作的,而且还有一些缺点(比如保存的ht ...
- 实现jsp网站添加到收藏夹
var ctrl = (navigator.userAgent.toLowerCase()).indexOf('mac') != -1 ? 'Command/Cmd': 'CTRL'; ...
- js_加入收藏夹功能
<script type="text/javascript">function addToFavorite(obj) { var url = "http ...
随机推荐
- Imagick 缩放图片和实现模糊
Imagick功能相当的多,只是还不稳定,我下面的程序能够运行,但是会出现内存错误,但我们要的图片还是能够得到. 弄这个的原因是,一个客户要求在一个appcan的应用里面实现一个页面的背景图的缩放.调 ...
- twrp编译步骤 (CWM也差不多)
1.源码的跟目录执行:. build/envsetup.sh,构建编译环境 2.执行 make -j4 otatools,生成后面编译需要的工具 3.把boot或recovery放到home目录,执行 ...
- 开启Win7系统管理员Administrator账户
Win7系统凭借酷炫的界面以及简单.易用.快速.安全等特点,迅速成为全球最受用户喜爱的操作系统,如今Win7已经成为身边很多朋友生活学习工作的好伙伴.在我们使用Win7的时候,有一些软件的正常运行需要 ...
- 一个简单的游戏开发框架(五.对象Object)
前面提到我们把行为Action从对象Object中分离了出来,用各种不同的行为组合出对象的功能.大家都知道,面向对象的一个类,就是数据和操作的集合.操作(行为)被分离出来了,数据怎么办呢?操作依赖的数 ...
- 在 ASP.NET 中创建数据访问和业务逻辑层(转)
.NET Framework 4 当在 ASP.NET 中处理数据时,可从使用通用软件模式中受益.其中一种模式是将数据访问代码与控制数据访问或提供其他业务规则的业务逻辑代码分开.在此模式中,这两个层均 ...
- 由cobertura插件生成测试覆盖率报告
由于cobertura已经集成到maven中,所以可以很方便的直接调用此插件生成报告: 直接运行命令:mvn cobertura:cobertura 就可以直接生成测试报告了. 下面是截图:
- php常见的关键字
一 instanceof 检测一个对象是否属于某个类型 <?php class A { } $a = new A(); if($a instanceof A) { echo "yes& ...
- 作业七:团队项目——Alpha版本冲刺阶段002
今日进展:我们终于安装好了软件,今天开始进行作业设计. 今日安排:今天开始我们要开始我们的框架的设计.
- 堆糖瀑布流完整解决方案(jQuery)
2010年堆糖创办以来,网站界面经历过3-5次重大改版,logo也曾更换过两次,早期蓝红相间三个圈的logo恐怕很少有人记得了.与此同时,前端 js 框架也在默默的更新换代.最早堆糖上线时,js 采用 ...
- Python的平凡之路(14)
一.什么是HTML HTML(Hyper Text Mark-up Language ) 即超文本标记语言,是 WWW 的描述语言,由 Tim Berners-lee提出.设计 HTML 语言的目的是 ...