$(function () {

function _openAppUrl(appUrl){
var ua = navigator.userAgent.toLocaleLowerCase(),
openBrowser = null,
deviceVersion = 0,
matchVersion = null,
openAppType = "",
downLoadUrl = 'http://pages.book.qq.com/pages/qidian/qddown/qdreader.htm';

//如果是在微信内部点击的时候
if(ua.indexOf("micromessenger") != -1 ){
_openAppUrl = function(){
alert("DEMO,请在移动端的浏览器查看!");
}
}else{
//在浏览器打开,判断是在移动端还是在PC端
if(matchVersion = navigator.userAgent.match(/OS\s*(\d+)/)){
//赋值,并且判断
//IOS设备的浏览器
deviceVersion = matchVersion[1] || 0;

if(deviceVersion - 9 >= 0){
openAppType = "newType";
}
}else if(matchVersion = navigator.userAgent.match(/Android\s*(\d+)/)){
//Android的设备
deviceVersion = matchVersion[1] || 0;

if(deviceVersion - 5 >= 0){
openAppType = "newType";
}

}else{
//PC端的设备
openAppType = "pc";
}


if(openAppType == "pc"){
_openAppUrl = function(){
alert("DEMO,请在移动端的浏览器查看!");
}
}else if(openAppType == "newType"){
//使用新的方法,尝试打开APP
//IOS>9,Android>5的版本
_openAppUrl = function(url){
var history = window.history,
body = $("body").eq(0),
ifr = $('<iframe class = "full-screen dn" style = "z-index:101;border:none;width:100%;height:100%;" src="'+downLoadUrl+'"></iframe>');

body.append(ifr);
$(window).on("popstate",function(e){
var state = history.state;

if(!state){
ifr.addClass("dn");
}
});

function _show(){
history.pushState({}, "下载APP链接页", "");
ifr.removeClass("dn");
}

_openAppUrl = function(url){
location.href = url;
_show();
}

_openAppUrl(url);

}
}else{
//使用计算时差的方案打开APP
var checkOpen = function (cb){
var _clickTime = +(new Date()),
_count = 0,
intHandle = 0;

//启动间隔20ms运行的定时器,并检测累计消耗时间是否超过3000ms,超过则结束
intHandle = setInterval(function(){
_count++;
var elsTime = +(new Date()) - _clickTime;

if (_count>=100 || elsTime > 3000 ) {
clearInterval(intHandle);
//计算结束,根据不同,做不同的跳转处理,0表示已经跳转APP成功了
if ( elsTime > 3000 || document.hidden || document.webkitHidden) {
cb(0);
} else {
cb(1);
}

}
}, 20);
}

_openAppUrl = function(url){
var ifr = document.createElement('iframe');

ifr.src = url;
ifr.style.display = 'none';

checkOpen(function(opened){
if(opened === 1){
location.href = downLoadUrl;
}
});

document.body.appendChild(ifr);

setTimeout(function() {
document.body.removeChild(ifr);
}, 2000);
}

}

}

_openAppUrl(appUrl);

}

var appUrl = "QDReader://";

$("#tryOpenApp").on("click",function(){
_openAppUrl(appUrl);
return false;
});

});

H5唤起APP一些坑的更多相关文章

  1. H5唤起app

    H5唤起app 1.判断是否在微信中打开 无论是在哪个平台的客户端Android/IOS,在微信的平台上访问都有一个问题,那就是无法启动客户端,这是微信为了安全性考虑的限制,android这边屏蔽sc ...

  2. H5 唤起 APP的解决方案

    H5 页面唤起APP或跳转到下载APP的某个链接地址.总结如下: 在 IOS 中, 系统版本在 8 以下时,可以监听页面的 pagehide / visibilitychange 事件. 系统版本大于 ...

  3. h5唤起APP并检查是否成功

    // 检查app是否打开 function checkOpen(cb) { const clickTime = +(new Date()); function check(elsTime) { if ...

  4. h5 唤起app或跳转appStore

    //唤起app通过唤端媒介(URL Scheme)   //微信浏览器自6.3.x版本起禁用了大多数Scheme跳转功能,扫一扫目前可用   // URL 的组成:   // [scheme:][// ...

  5. 简话h5唤起本地app

    在没接触这个功能之前,查询各种文档后也只是似懂非懂,做过之后,发现其实很简单,简言之就是通过一个iframe或者a标签来跳转app端提供的URL schema(至于这个URL schema的组成格式, ...

  6. H5如何实现唤起APP

    前言 写过hybrid的同学,想必都会遇到这样的需求,如果用户安装了自己的APP,就打开APP或跳转到APP内某个页面,如果没安装则引导用户到对应页面或应用商店下载.这里就涉及到了H5与Native之 ...

  7. 如何应用前端技术唤起app及判断用户来源及与原生交互的原理

    做唤起时需要native端进行配合, h5唤起app这种需求是常见的.在移动为王的时代,h5在app导流上发挥着重要的作用. 目前我们采用的唤起方式是url scheme(iOS,Android平台都 ...

  8. h5页面唤起app(iOS和Android),没有安装则跳转下载页面

    浏览器和app没有通信协议,所以h5不知道用户的手机释放安装了app.因此只能是h5去尝试唤起app,若不能唤起,引导用户去下载我们的app. 微信里屏蔽了 schema 协议,如果在微信中打开h5, ...

  9. h5移动网页唤起App

    最近这个困惑了很久,不断的有一些坑,目前还有疑问关于iOS唤起无效时会出现弹框的问题,这个最后再说 1.首先可能需要判断当前浏览器的来源(目前开发的App还没有上架,所以针对腾讯出品的大家广为人知的微 ...

随机推荐

  1. LCA + 树状数组 + 树上RMQ

    题目链接:http://poj.org/problem?id=2763 思路:首先求出树上dfs序列,并且标记树上每个节点开始遍历以及最后回溯遍历到的时间戳,由于需要修改树上的某两个节点之间的权值,如 ...

  2. 【淘淘】Quartz作业存储与管理

    一.Quartz作业管理和存储方式简介: 作业一旦被调度,调度器需要记住并且跟踪作业和它们的执行次数.如果你的作业是30分钟后或每30秒调用,这不是很有用.事实上,作业执行需要非常准确和即时调用在被调 ...

  3. UML学习(一)-----用例图

    1.什么是用例图 用例图源于Jacobson的OOSE方法,用例图是需求分析的产物,描述了系统的参与者与系统进行交互的功能,是参与者所能观察和使用到的系统功能的模型图.它的主要目的就是帮助开发团队以一 ...

  4. linux xorddos样本分析2

    逆向分析 之后我们通过ida对该样本进行更深入的分析样本的main函数中,一开始会调用函数dec_conf对样本中的大量加密的字符串进行解密,如下图所示.

  5. 所有的畅通工程[HDU1232][HDU1874][HDU1875][HDU1879]

    畅通工程 Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submissio ...

  6. 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

  7. 怎样去除织梦版权信息中的Power by DedeCms

    用织梦建站时,网站底部调用的版权信息最后总会多出一个Power by DedeCms链接,此链接是织梦系统中默认的指向织梦官网的外链.本文就介绍两种去除这个外链的方法. 1.为什么要去除Power b ...

  8. WCF的同步和异步(以WPF连接为例)

    2016-06-0711:05:44 在学习WCF时,学到WCF服务的同步和异步. 我理解的同步是: 当WCF服务是同步执行时,程序只有一条线程,代码只能按顺序一步一步来执行,当执行客户端/服务端某方 ...

  9. 【转】安装第三方库出现 Python version 2.7 required, which was not found in the registry

    安装第三方库出现 Python version 2.7 required, which was not found in the registry 建立一个文件 register.py 内容如下. 然 ...

  10. synchronized的实现原理和应用

    在多线程并发编程中synchronized是元老级的角色,人多称重量级锁. synchronized实现同步的基础:Java中的每一个对象都可以作为锁.具体表现有如下3种: 1.对于普通同步方法,锁时 ...