$(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. Power BI for Office 365(四)Power View第一部分

    Power View是一种可以创建动态的交互式报表的工具,并且支持丰富多样的图表类型,在Power View中创建的报表可以很容易地进行分享,以及供查看报表的用户对Power View报表进行交互.从 ...

  2. Maven 添加自定义 archetype

    环境:jdk7 maven3.23 eclipse mars 关于maven是使用插件自带的还是单独下载的,应该都是可以的,但是要注意maven和jdk版本的问题,比如3.2.3版本的maven支持j ...

  3. SQL中exists、not exists以及in、not in的区别和使用

    exists : 强调的是是否返回结果集,不要求知道返回什么, 比如:   select name from student where sex = 'm' and mark exists(selec ...

  4. 第二十八篇:SOUI中自定义控件开发过程

    在SOUI中已经提供了大部分常用的控件,但是内置控件不可能满足用户的所有要求,因此一个真实的应用少不得还要做一些自定义控件. 学习一个新东西,最简单的办法就是依葫芦画瓢.事实上在SOUI系统中内置控件 ...

  5. Tomcat中JVM内存溢出及合理配置及maxThreads如何配置(转)

    来源:http://www.tot.name/html/20150530/20150530102930.htm Tomcat本身不能直接在计算机上运行,需要依赖于硬件基础之上的操作系统和一个Java虚 ...

  6. 【BZOJ1671】[Usaco2005 Dec]Knights of Ni 骑士 BFS

    [Usaco2005 Dec]Knights of Ni 骑士 Description  贝茜遇到了一件很麻烦的事:她无意中闯入了森林里的一座城堡,如果她想回家,就必须穿过这片由骑士们守护着的森林.为 ...

  7. JDBC连接数据库(数据源的方式)

    在tomcat安装目录下的context.xml文件中配置DataSource <Resource name="jdbc/news"(JNDI的名字,news是数据库的实例名 ...

  8. SqlServer禁用启用触发器、外键约束

    --禁用指定名称触发器 ALTER TABLE tbname DISABLE TRIGGER trigname --恢复指定名称触发器 ALTER TABLE tbname ENABLE TRIGGE ...

  9. JavaScript 一种轻量级的编程语言

     JavaScript 一种轻量级的编程语言 作为一名计算机应用专业的学生,大一上学期开始接触了网页设计和制作,刚开始时感觉做网页很不错,简单地写几行代码就能做出效果来,当时感觉很兴奋,渐渐的喜欢上它 ...

  10. 简明 Git 命令速查表(中文版)

    原文引用地址:https://github.com/flyhigher139/Git-Cheat-Sheet/blob/master/Git%20Cheat%20Sheet-Zh.md在Github上 ...