“添加到收藏夹”功能(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 ...
随机推荐
- 在APACHE服务器上的访问方式上去除index.php
在APACHE服务器上的访问方式上去除index.php 下面我说下 apache 下 ,如何 去掉URL 里面的 index.php 例如: 你原来的路径是: localhost/index ...
- 394. Decode String
[题目] Total Accepted: 10087 Total Submissions: 25510 Difficulty: Medium Contributors: Admin Given an ...
- RegExp
var str = "1a1b1c";var reg = new RegExp("1(.)", "g");alert(reg.test(st ...
- dede日期时间标签调用大全
dedecms最强大的功能就是调用标签,可以变换出各种样式的文章形式出来,本节将DEDECMS调用时间的样式做一个总结,基本所有的时间调用样式都有了,日期时间格式 (利用strftime()函数格式化 ...
- storm启动过程之源码分析
TopologyMaster: 处理拓扑的一些基本信息和工作,比如更新心跳信息,拓扑指标信息更新等 NimbusServer: ** * * NimbusServer work flow: 1. ...
- reds Virtual Memory
Virtual Memory technical specification This document details the internals of the Redis Virtual Memo ...
- 在QtCreator 2.1.0 下使用opencv231库加载图片并显示
在.pro中库连接如上图,具体规则正在学习,注意debug下连接*d.lib.release下链接.lib.没有d的. 如果出现imread不可以加载图片,cvloadImage却可以,则是上面说的连 ...
- map的四种遍历方式
map是Java中非常常用的一种数据结构,但map不同于set和list都继承自Collection接口. 所以map没有实现Collection的Iterator 方法,自身没有迭代器来遍历元素. ...
- 解决 主界面mainactivity 中fragment弹框把下面tab选项卡 顶上去的方案
android:windowSoftInputMode="adjustPan" android:configChanges="screenSize ...
- Python笔记-集合,拷贝
对于列表,元组,集合的异同,有如下解释 #list ----> 允许重复的集合,修改# tuple ----> 允许重复的集合,不修改# set ----> 不允许重复的集合下面是示 ...