三种方式

方式一:简单的进行打开app,延时操作若未打开直接跳gp

  1. function isInstalled(){
  2. var urlFrag = 'somepars';
  3. var the_href = 'market://****';//获得下载链接
  4. window.location.href = "appname://start" + urlFrag;//打开某手机上的某个app应用
  5. setTimeout(function(){
  6. window.location.href = the_href;//如果超时就跳转到app下载页
  7. },800);
  8. }

方式二 :添加 iframe

  1. function isInstalled() {
  2. var timeout, t = 1000,
  3. hasApp = true,
  4. urlFrag = 'somepars';
  5. url = "appname://start" + urlFrag ;
  6. var openScript = setTimeout(function() {
  7. if (!hasApp) {
  8. var durl = 'market://******';
  9. window.location.href = durl;
  10. }
  11. document.body.removeChild(ifr);
  12. }, 2000)
  13.  
  14. var t1 = Date.now();
  15. var ifr = document.createElement("iframe");
  16. ifr.setAttribute('src', url);
  17. ifr.setAttribute('style', 'display:none');
  18. document.body.appendChild(ifr);
  19. timeout = setTimeout(function() {
  20. var t2 = Date.now();
  21. if (!t1 || t2 - t1 < t + 100) {
  22. hasApp = false;
  23. }
  24. }, t);
  25. }

方式三:利用a标签,经过验证浏览器对iframe的方法支持率不高,而且同一个浏览器也会有时而能打开时而打不开的情况发生,经验证将iframe替换为a标签支持率很高

  1. function openAppGp(ap, gp) {
  2. //检查app是否打开
  3. function checkOpen(cb) {
  4. var _clickTime = +(new Date());
  5. function check(elsTime) {
  6. if (elsTime > 2000 || document.hidden || document.webkitHidden) {
  7. cb(1);
  8. } else {
  9. cb(0);
  10. }
  11. }
  12. //启动间隔20ms运行的定时器,并检测累计消耗时间是否超过3000ms,超过则结束
  13. var _count = 0, intHandle;
  14. intHandle = setInterval(function () {
  15. _count++;
  16. var elsTime = +(new Date()) - _clickTime;
  17. if (_count >= 50 || elsTime > 2000) {
  18. clearInterval(intHandle);
  19. check(elsTime);
  20. }
  21. }, 20);
  22. }
  23. //在iframe 中打开APP
  24. const link = document.createElement('a');
  25. document.body.appendChild(link);
  26. link.setAttribute('href', ap);
  27. link.style.display = 'none';
  28. link.click();
  29. // if (1) {
  30. checkOpen(function (opened) {//checkOpen中的cbk参数 = function (opened)
  31. if (opened == 0) {
  32. //用户没有安装app 可以请求下载地址并跳转 跳转方法:window.location.href 即可
  33. window.location.href = gp;
  34. } else if (opened == 1) {
  35. //用户打开了app 用户有安装app
  36. console.log("Opend app");
  37. }
  38. });
  39. // }
  40.  
  41. setTimeout(function () {
  42. document.body.removeChild(link);
  43. }, 2000);
  44. }

  

注意:

1 有的浏览器会有安全验证的问题,可能会连续两次提示打开窗口,这样就需要提供白名单给到相应的浏览器开发者;

2 该方法成功率不是100%,有的手机会完全不支持, 有的浏览器也不支持  经验证opera不支持;

3 具体的market 和 打开app的协议 由产品和客户端提供;

利用 html js判断 客户端是否安装了某个app 安装了就打开 否则跳转到gp的更多相关文章

  1. 一个JS判断客户端是否已安装某个字体(Only IE)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. H5案例分享:使用JS判断客户端、浏览器、操作系统类型

    使用JS判断客户端.浏览器.操作系统类型 一.JS判断客户端类型 JS判断客户端是否是iOS或者Android手机移动端 通过判断浏览器的userAgent,用正则来判断手机是否是ios和Androi ...

  3. 使用JS判断客户端、浏览器、操作系统类型

    一.JS判断客户端类型 JS判断客户端是否是iOS或者Android手机移动端 通过判断浏览器的userAgent,用正则来判断手机是否是ios和Android客户端. 核心代码如下: 方法一: &l ...

  4. JS判断客户端是否是iOS或者Android或者ipad(二)

    js判断客户端是IPAD和iphone 多了就不说了,直接上代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22     funct ...

  5. JS判断客户端、浏览器、操作系统

    一.JS判断客户端是否是iOS或者Android手机移动端 通过判断浏览器的userAgent,用正则来判断手机是否是ios和Android客户端. 方法一: var u = navigator.us ...

  6. JS判断浏览器类型,JS判断客户端操作系统

    JS判断浏览器类型 function judge(){ var browser = { versions: function() { var u = navigator.userAgent, app ...

  7. JS判断访问设备(userAgent)加载不同页面 JS判断客户端操作系统类型(platform)

    //平台.设备和操作系统 var system ={ win : false, mac : false, xll : false }; //检测平台 var p = navigator.platfor ...

  8. js 判断客户端 和 asp.net/C#判断客户端类型

    1.js 判断客户端 <script language="JavaScript"> <!-- onload = function browserRedirect( ...

  9. JS判断客户端是否是iOS或者Android或者ipad(三)

     *  * @function: 判断浏览器类型是否是Safari.Firefox.ie.chrome浏览器  * @return: true或false  *  */ function isSafa ...

随机推荐

  1. redis安装(单节点)

    # tar -zxvf redis.tar.gz # cd redis 安装(使用 PREFIX 指定安装目录): # make PREFIX=/usr/local/redis install 安装完 ...

  2. DataTable数据存储问题

    需求: 我想要实现这样一个效果:用户可以在表中通过右键新建行.删除行(这两个后面再写),编辑数据后进行保存.这里保存需要做一个区分,就是新增的和修改的.他们的区别就是新增的主键为空,而修改的因为原本就 ...

  3. bootstrap网格设置等高度

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  4. 对于EMC DAE、DPE、SPE、SPS的解释

    对于EMC DAE.DPE.SPE.SPS的解释: DAE: Disk Array Enclosure 单一的磁盘扩展单元 CX200/CX300/CX400/CX500CX600/CX700 DPE ...

  5. wpf mvvm 实例

    1.程序结构如图所示: 2.Model实现 在Model文件夹下新建业务类StudentModel,代码如下: public class StudentModel : INotifyPropertyC ...

  6. Exp2 后门原理与实践 20164320 王浩

    一.实践基本内容 1.实践目标 (1)使用netcat获取主机操作Shell,cron启动 (2)使用socat获取主机操作Shell, 任务计划启动 (3)使用MSF meterpreter(或其他 ...

  7. char和QChar(Unicode的编码与内存里的值还不是一回事)

    char类型是c/c++中内置的类型,描述了1个字节的内存信息的解析.比如: char gemfield=’g’;那么在由gemfield标记的这块内存的大小就是1个字节,信息就是01100111,8 ...

  8. python panda::dataframe常用操作

    1.条件查询: result = df.query("((a==1 and b=="x") or c/d < 3))" print result 2.遍历 ...

  9. [vue开发记录]全局loading组件

    上图不上种,菊花万人捅: loading.js: import './loading.css' let Loading = {} // 避免重复install,设立flag Loading.insta ...

  10. Java注解--笔记

    @Override标签的作用@Override是伪代码,所以是可写可不写的.它表示方法重写,写上会给我们带来好处. 1.可以当注释用,方便阅读. 2.告诉阅读你代码的人,这是方法的复写. 3.编译器可 ...