“添加到收藏夹”功能(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; // d evt.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 link var bookmarkUrl = this .href; var bookmarkTitle = this .title; if (window.sidebar) { // For Mozilla Firefox Bookmark window.sidebar.addPanel(bookmarkTitle, bookmarkUrl, "" ); } else if ( window.external || document.all) { // For IE Favorite window.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 support alert( '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 ...
随机推荐
- JS-DOM基础
1 JS-DOM 全称:document object model 1.1 获取页面元素 getElementsByTagName():无论元素的数量是多少,都会存入数组 getElement ...
- GPS定位 测试
public class MainActivity extends Activity { private final String TAG = "BX"; private Loca ...
- oracle 递归应用(挺复杂的)
最近做数据过滤觉得很有必要记录下整个过程,说不定下次就不知道了. 废话不多说开始: 表结构: 企业表(自关联,采用树的形式记录分子公司) 区域表(自关联,采用树的形式记录省/市/县/乡,数据量大) 公 ...
- 计算机网络(10)-----TCP的拥塞控制
TCP的拥塞控制 拥塞(congestion) 在某段时间,若对网络中某一资源的需求超过了该资源所能提供的可用部分,网络的性能就要变坏. 拥塞控制 拥塞控制就是防止过多的数据注入到网络中,这样可以使网 ...
- Spring的入门的程序
1 下载Spring的开发包: spring-framework-3.2.0.RELEASE-dist.zip ---Spring开发包 docs :spring框架api和规范 libs :spri ...
- latex使用问题总结1
文献引用问题 若使用了\usepackage[super, square, number, sort&compress]{natbib},\cite的文献并不与文本平行,反而位于右上角 文献引 ...
- math and date、ajax、画布
console.log(Math.PI);//圆周率 console.log(Math.sqrt(4));//平方根2 console.log(Math.abs(-2.3));//绝对值2.3 con ...
- cURL入门
cURL 是一个利用URL语法规定来传输文件和数据的工具,支持很多协议,如HTTP.FTP.TELNET等.最爽的是,PHP也支持 cURL 库.本文将介绍 cURL 的一些高级特性,以及在PHP中如 ...
- URL编码 utf-8 gb2312的区别
一.问题的由来 URL就是网址,只要上网,就一定会用到. 一般来说,URL只能使用英文字母.阿拉伯数字和某些标点符号,不能使用其他文字和符号.比如,世界上有英文字母的网址“http://www.abc ...
- VS2012 调试时 局部变量显示不全的问题解决
在工程上右键,打开属性页,配置属性——C/C++——优化,将优化改为“已禁用/Od“