【js】手机浏览器端唤起app,没有app就去下载app 的方法
这种功能的作用:
1.一般公司有自己的app,而app是需要不断有新用户涌入才能持续运营,达到不错的收入。就需要使用这种方式进行引入新的用户。
2.一些内容在网页端体验不好,或者一些功能需要app内才能实现,就需要将用户引入app中。打开app并自动跳到相应页面。
首先,这个方法仅适用于移动端h5页面,一般的智能机都是可以使用的。这里使用的是es5的代码模式,容易理解。
知道了需求,我们看看如何实现:
1.首先要通过UA判断当前浏览器UA 并转大写。用来分别针对安卓和ios机型做2种不一样的处理。
var UA=navigator.userAgent.toUpperCase();
2.根据UA判断的安卓还是ios机型,分别做处理。
安卓设备:
通过隐藏iframe方式实现。iframe中请求协议启动地址,创建iframe需要时间,延迟一点时间,将iframe加入dom,产生请求。
如果app已安装,浏览器就会弹出一个提示框,问用户是否启动app。
如果未安装,浏览器等待一秒后就会去下载。
之所以使用iframe,为了防止location跳转后,js请求中断,跳入空白页。
代码中的Data.now()-t < 1200,只所以是1200,其实也是一个估计值,为了大部分解决一些已经安装的app,1秒后还是会跳转下载。因为打开app的瞬间,浏览器可能会卡一下js的执行导致延迟时间变长。超出1200ms就可以不用去下载了。
//如果是安卓浏览器(自带浏览器、UA浏览器、QQ浏览器等)
if(UA.indexOf("ANDROID")!=-1){
//创建iframe
var ifr=document.createElement("iframe");
//iframe设置为app的协议打开方式地址
ifr.src="cmread://cmread.com/client?url=wap.cmread.com/rbc/402310056/index.htm";//安卓协议启动地址
ifr.style.display="none";//隐藏
var t=Date.now();//取当前时间戳
//延迟执行iframe 实现访问app协议打开app
setTimeout(function(){
document.body.appendChild(ifr);
},96);
//延迟执行 如果1s没响应,就表示你手机中没有该app。就可以去下载了
setTimeout(function(){
if(Date.now() - t < 1200){
document.body.appendChild(ifr);
location.href="http://wap.cmread.com/r/p/pg/212/CMREADBC_Android/CMREADBC_Android.apk";//安卓下载地址
}
},1001);
}
IOS设备:
首先,ios浏览器已经不支持再使用iframe了,所以上面的方式不适合用在ios上。
因此,这里只能采用location的方式。
如果安装了app,ios浏览器打开app协议前就会弹出个框,提示是否打开。
如果没有安装,就不会弹出这个提示。
//如果是ios浏览器(safari、UA浏览器、QQ浏览器等)
else if(UA.indexOf("IOS")!=-1 || UA.indexOf("IPHONE")!=-1){
var t=Date.now();//取当前时间戳
//延迟直接跳转唤起app协议地址
setTimeout(function(){
location.href='cmread://cmread.com/clientjson={"activity":{"url":"http://wap.cmread.com/rbc/402310056/index.htm"}}&contentId=1004';//ios协议启动地址
},96);
//延迟执行 如果1s没响应,就表示你手机中没有该app。就可以去下载了
setTimeout(function(){
if(Date.now() - t < 1200){
location.href="https://itunes.apple.com/cn/app/he-yue-du/id863837323?mt=8&uo=4&at=10lM6r";//ios下载地址
}
},1001);
}
【js】手机浏览器端唤起app,没有app就去下载app 的方法的更多相关文章
- JS手机浏览器判断(转)
整理查询一下,js判断手机浏览器的方法 <script type="text/javascript"> /* * 智能机浏览器版本信息:包括微信内置 * */ var ...
- [转] js在浏览器端对二进制流进行AES加密和解密
开始解密 简单了解一下所用的的AES加密算法,我们用的是AES的CFB加密方式,服务端会提供给我一个key和iv的二进制字节串.密文也是二进制字节串. 我用的加密/解密插件: crypto-js 一般 ...
- js手机移动端选择插件 mobileSelect.js
一.mobileSelect获取方法 mobileSelect支持单选.多级联动.自定义回调函数.二次渲染.最新版本下载地址[2017-09-21更新]: https://github.com/onl ...
- 遵循amd规范的require.js(适合浏览器端)
1. 下载require.js 2. 引用 html <!DOCTYPE html> <html lang="en"> <head> <m ...
- 关于CSS属性clip在手机浏览器端的兼容性问题
由于自己的6坏了拿去修了所以这两天使用了同事一只山寨安卓机和自己早年的小4,在今天的页面测试中,对于img中进行clip操作在这两台机子中均不能实现,后借用同事的6发现clip能正常展现,其中安卓版本 ...
- js手机浏览器浏览WebApp弹出的键盘遮盖住文本框的解决办法
if(window.navigator.userAgent.indexOf('Android') > -1 || window.navigator.userAgent.indexOf('Adr' ...
- js手机浏览器video标签会一直置顶,遮盖住弹出层问题
<video x5-playsinline="" playsinline="" webkit-playsinline="">&l ...
- 浏览器中唤起native app || 跳转到应用商城下载
前段时间遇到一个小需求:要求在分享出来的h5页面中,有一个立即打开的按钮,如果本地安装了我们的app,那么点击就直接唤起本地app,如果没有安装,则跳转到下载. 因为从来没有做过这个需求,因此这注定是 ...
- 手机浏览器跳转APP
背景 对于APP来说,回流分享页是最好的最便宜的也是最病毒式的拉新方式.让新用户去下载APP是重要的.对老用户来说,可以直接调起APP也是提升用户体验和让用户有侵入式体验的重要手段.所以我们一起来看看 ...
随机推荐
- 算法 -- 四种方法获取的最长“回文串”,并对时间复杂进行分析对比&PHP
https://blog.csdn.net/hongyuancao/article/details/82962382 “回文串”是一个正读和反读都一样的字符串,比如“level”或者“noon”等等就 ...
- centos 打包报错License for package Android SDK Build-Tools 25.0.3 not accepted
报错如下: 提示没有25.0.3的安卓环境,那么,接下来就需要安装这个环境 1.android list sdk -a 会显示需要更新 类似如下(截图只是一部分,前后还有一部分): 2.android ...
- 数据分析与挖掘 - R语言:多元线性回归
一个简单的例子!环境:CentOS6.5Hadoop集群.Hive.R.RHive,具体安装及调试方法见博客内文档. 线性回归主要用来做预测模型. 1.准备数据集: X Y 0.10 42.0 0.1 ...
- MySQL数据类型--与MySQL零距离接触2-6数据表
系型数据库--二维表格也就是数据表,有行和列,行称为记录,列称为字段.有数据库只是一个空架子,要存数据需要有数据表.设计数据表. 使用数据库,打开数据库: 显示当前打开的那个数据库:SELECT D ...
- Mac使用数据线连接ios,安装deb
原创http://www.cnblogs.com/fply/p/8478702.html mac连接ios mac连接ios需要用到usbmuxd,这个可自行下载 到python-client目录下, ...
- mac控制台快捷键
ctrl+a //移到行首ctrl+e //移到行尾 ctrl+y // 插入最近删除的单词或语句ctrl+k //删除光标处到行尾部分ctrl+u //删除光标处到行首部分ctrl+w //删除光标 ...
- StackExchange.Redis在net中使用
redis 官网https://redis.io redis 下载 进入下载页面 https://redis.io/download https://github.com/MicrosoftArc ...
- openCV学习——一、图像读取、显示、输出
openCV学习——一.图像读取.显示.输出 一.Mat imread(const string& filename,int flags=1),用于读取图片 1.参数介绍 filename ...
- oracle 常用(一)
常用的6个分组函数: 注意点:where字句中不能使用组函数.要用到having函数. 但是从优化角度看,尽量使用where avg :平均值 sum:求和 ...
- 定义一个Rectangle类,该类提供getLength和getWidth方法。
import java.util.Comparator; /** * 定义一个Rectangle类,该类提供getLength和getWidth方法.利用图1-18中的findMax例程编写 * 一种 ...