UC手机浏览器js加入收藏夹

Wesley13
• 阅读 293

概述

对于某些网站来说,让用户一键把网页加入收藏夹的设计是非常棒的,它能提醒用户把网页加入收藏夹,从而增加用户的回访率,使网站获得更多的流量。

在PC端,只有ie和ff支持用js把网页加入收藏夹的操作,在移动端目前都不支持把网页加入收藏夹,除了uc手机浏览器,因为uc手机浏览器用的U4内核,经过了一些处理。

由于UC浏览器目前的用户数量还是挺多的,所以探讨一下UC手机浏览器端怎么实现把网页加入收藏夹是很必要的,我把结果记录下来,供以后开发时参考。

结果

直接上结果,通过下面的代码即可调出浏览器的加入收藏夹菜单:

window.location.href = "ext:add_favorite";

可以通过以下步骤方便的测试:

  1. 打开uc浏览器,随便输入一个网站,并且进入这个网站。
  2. 在地址栏输入ext:add_favorite并点击进入。
  3. 这时就会出现加入收藏夹菜单!

所以对于一键加入收藏夹,只需要在一个按钮上用JQ绑定点击事件即可:

$('.button').on('click', function() {
    window.location.href = "ext:add_favorite";
})

uc的酷影模式

一般的网站会启动uc的酷影模式,把PC端代码转化为移动端代码,并且会自动加上“点击收藏”的按钮。详细可以参考:酷影模式

值得一提的是,只有以马克斯程序(MaxCMS)模板建站的站点,uc才会启动酷影模式。进入酷影模式之后,uc会自动给网站加载wapmaxcms_ad_filter.min.js,这个js里面就有加入收藏的实现,我就是在这个js里面趴的。

uc的pwa

令人惊喜的是,uc的U4 2.0内核实现了PWA,具体可以参考:U4 2.0 新特性 —— Add to Home Screen里面的小视屏

uc的开发者工具

可以到UC PLUS里面下载uc浏览器开发者版本UC浏览器开发者工具对UC的页面进行调试。

操作方法:

  1. 手机安装uc浏览器开发者版本,电脑安装UC浏览器开发者工具
  2. 手机打开USB调试
  3. 用usb把手机连接到电脑。
  4. 电脑的UC浏览器开发者工具会自动识别,然后在手机上会弹出授权框,点击确认即可。

PC端的加入收藏夹代码

<script type="text/javascript">
function addFavorite(){
    var bookmarkUrl = "http://baidu.com";
    var bookmarkTitle = "baidu";

    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 { // for other browsers which does not support
         alert('浏览器不支持,请按 Ctrl+D 手动收藏!');
         return false;
    }
}
</script><a href="#" rel="sidebar" onclick="addFavorite()">加入收藏</a>

具体可以参考:兼容多数浏览器的js添加收藏夹脚本

点赞
收藏
评论区
推荐文章
秃头王路飞 秃头王路飞
2个月前
webpack5手撸vue2脚手架
webpack5手撸vue相信工作个12年的小伙伴们在面试的时候多多少少怕被问到关于webpack方面的知识,本菜鸟最近闲来无事,就尝试了手撸了下vue2的脚手架,第一次发帖实在是没有经验,望海涵。languageJavaScript"name":"vuecliversion2","version":"1.0.0","desc
光头强的博客 光头强的博客
2个月前
Java面向对象试题
1、请创建一个Animal动物类,要求有方法eat()方法,方法输出一条语句“吃东西”。创建一个接口A,接口里有一个抽象方法fly()。创建一个Bird类继承Animal类并实现接口A里的方法输出一条有语句“鸟儿飞翔”,重写eat()方法输出一条语句“鸟儿吃虫”。在Test类中向上转型创建b对象,调用eat方法。然后向下转型调用eat()方
刚刚好 刚刚好
2个月前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
小森森 小森森
2个月前
校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
后续会继续更新,敬请期待2.0全新版本欢迎添加左边的微信一起探讨!项目地址:(https://www.aliyun.com/activity/daily/bestoffer?userCodesskuuw5n)\2.Bug修复更新日历2.情侣脸功能大家不要使用了,现在阿里云的接口已经要收费了(土豪请随意),\\和注意
晴空闲云 晴空闲云
2个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
1个月前
快速入门|使用MemFire Cloud构建React Native应用程序
MemFireCloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
Stella981 Stella981
1年前
Android So动态加载 优雅实现与原理分析
背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载.!(https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png)点击上方“蓝字”关注我
helloworld_28799839 helloworld_28799839
2个月前
常用知识整理
Javascript判断对象是否为空jsObject.keys(myObject).length0经常使用的三元运算我们经常遇到处理表格列状态字段如status的时候可以用到vue
helloworld_34035044 helloworld_34035044
5个月前
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为