“添加到收藏夹”功能(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
< a  href = "http://www.biaodianfu.com"  title = "标点符的博客"  class = "jQueryBookmark" >标点符</ a >
本文转自挨踢前端博客园博客,原文链接http://www.cnblogs.com/duanhuajian/p/3499414.html如需转载请自行联系原作者

@挨踢前端
相关文章
|
存储 弹性计算 运维
2024阿里云服务器经济型e实例性能、适用场景和费用价格
2024阿里云服务器经济型e实例性能、适用场景和费用价格,阿里云服务器ECS推出经济型e系列,经济型e实例是阿里云面向个人开发者、学生、小微企业,在中小型网站建设、开发测试、轻量级应用等场景推出的全新入门级云服务器,CPU采用Intel Xeon Platinum架构处理器
|
数据采集 安全 前端开发
视频类音频了网站如何防止被盗
视频类音频了网站如何防止被盗
570 0
|
缓存 Java 数据库连接
深入浅出 MyBatis 的一级、二级缓存机制
深入浅出 MyBatis 的一级、二级缓存机制
640 0
|
4月前
|
前端开发 Java 数据库连接
java bo 对象详解_全面解析 java 中 PO,VO,DAO,BO,POJO 及 DTO 等几种对象类型
Java开发中常见的六大对象模型(PO、VO、DAO、BO、POJO、DTO)各有侧重,共同构建企业级应用架构。PO对应数据库表结构,VO专为前端展示设计,DAO封装数据访问逻辑,BO处理业务逻辑,POJO是简单的Java对象,DTO用于层间数据传输。它们在三层架构中协作:表现层使用VO,业务层通过BO调用DAO处理PO,DTO作为数据传输媒介。通过在线商城的用户管理模块示例,展示了各对象的具体应用。最佳实践包括保持分层清晰、使用工具类转换对象,并避免过度设计带来的类膨胀。理解这些对象模型的区别与联系。
285 1
|
3月前
|
Java 测试技术 API
自动化测试框架深度解析与选择指南
Apache JMeter是Apache组织基于Java开发的一款压力测试工具,旨在测试软件的性能承受能力。它支持多种协议测试及功能测试,提供灵活的断言创建能力,如同创建带断言的脚本来验证程序是否返回预期结果。
基于蒙特卡洛的电力系统可靠性分析matlab仿真,对比EDNS和LOLP
电力系统可靠性评估研究,聚焦于LOLP(电力不足概率)和EDNS(期望缺供电量)的模拟分析。使用MATLAB2022a进行基于蒙特卡洛的仿真,模拟单线及多线故障,分析连锁效应。程序中通过随机断开线路,计算潮流,判断越限并用PSO优化。结果显示,LOLP和EDNS增加时,故障概率降低,但小概率大影响事件概率上升。以IEEE24-RTS系统为案例,考虑元件失效的马尔科夫过程,不考虑3个及以上元件失效情况,因为可能导致系统大规模崩溃。仿真步骤包括随机线路断开、故障分析和稳定性评估,涉及信息节点概率计算、潮流计算及优化决策。
|
算法 搜索推荐 数据挖掘
推荐算法之基于用户的协同过滤
推荐算法之基于用户的协同过滤
|
算法 IDE Linux
【CMake 小知识】CMake中的库目标命名和查找策略解析
【CMake 小知识】CMake中的库目标命名和查找策略解析
604 1
|
网络协议 网络安全 数据安全/隐私保护
【渗透】爆破工具Hydra
Hydra是一款强大的工具,可以帮助用户快速地进行密码破解和暴力攻击。如果你看过我之前写的靶机视频,你就会发现,在用大字典时,相对于burp suite,Hydra的表现更为优异,那么我们就来深入了解一下这个爆破神器吧。
425 0
|
iOS开发 MacOS Python
Mac安装pip报错的解决办法
Mac安装pip报错的解决办法