“添加到收藏夹”功能(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 ...
随机推荐
- iOS开发_内存泄漏、内存溢出和野指针之间的区别
今天,在工作群中,被问到了内存泄漏和野指针指向的区别,自己答的不是很好,特意回来查了资料,在博文中总结一下经验,欢迎指正. 内存泄漏:是指在堆区,alloc 或new 创建了一个对象,但是并没有放到自 ...
- Promise
function getURL(URL) { return new Promise(function (resolve, reject) { var req = new XMLHttpRequest( ...
- 在 Xcode 7 中安装 Alcatraz
http://www.jianshu.com/p/5c8ed25ad434 安装Xcode7后,继续采用官方方法安装Alcatraz,发现不成功.单独安装XVim也不成功.看了一下Alcatraz的i ...
- unity代码加密for Android,mono编译
uinty3d加密推荐几篇比较好的博客链接: http://www.cppcourse.com/u3d-encryption.html http://www.xuanyusong.com/archiv ...
- web前端基础篇⑩
1.960栅格式布局法屏幕分辨率为1024*768.采用接 main宽为960px的布局方式12列式:每格60px 间距20px 3 6 3版 三格式布局(最常用)16列式:每格40px 间距20px ...
- ldap日志
要开启openldap的日志功能是非常简单的:1.在slapd.conf中加一行:loglevel 4095 2.在/etc/rsyslog.conf 中加入ldap日志文档: ...
- Spark源码学习1.6——Executor.scala
Executor.scala 一.Executor类 首先判断本地性,获取slaves的host name(不是IP或者host: port),匹配运行环境为集群或者本地.如果不是本地执行,需要启动一 ...
- BackgroundWorker组件的作用
当构建一个图形化的Windows Form桌面应用程序并且需要执行在应用程序主UI线程之外的线程中长时间的任务时,BackgroundWorker类就很有用了. 要使用BackgroundWorker ...
- iOS AVCaptureSession 小视频开发总结,支持设备旋转
iOS开发中当我们想要自定义相机拍照或摄像界面时,UIImagePickerController无法满足我们的需求,这时候我们可以使用AVFoundation.framework这个framework ...
- 第一章:Android系统移植与驱动开发概述
Android是基于Linux内核的,与Linux内核没有太大的区别,只是增加了一些自己独有的驱动,随着Android发布版本的不断升级,他所使用的Linux内核也在不断升级,以适应新的安卓版本,为他 ...