H5唤起APP一些坑
$(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一些坑的更多相关文章
- H5唤起app
H5唤起app 1.判断是否在微信中打开 无论是在哪个平台的客户端Android/IOS,在微信的平台上访问都有一个问题,那就是无法启动客户端,这是微信为了安全性考虑的限制,android这边屏蔽sc ...
- H5 唤起 APP的解决方案
H5 页面唤起APP或跳转到下载APP的某个链接地址.总结如下: 在 IOS 中, 系统版本在 8 以下时,可以监听页面的 pagehide / visibilitychange 事件. 系统版本大于 ...
- h5唤起APP并检查是否成功
// 检查app是否打开 function checkOpen(cb) { const clickTime = +(new Date()); function check(elsTime) { if ...
- h5 唤起app或跳转appStore
//唤起app通过唤端媒介(URL Scheme) //微信浏览器自6.3.x版本起禁用了大多数Scheme跳转功能,扫一扫目前可用 // URL 的组成: // [scheme:][// ...
- 简话h5唤起本地app
在没接触这个功能之前,查询各种文档后也只是似懂非懂,做过之后,发现其实很简单,简言之就是通过一个iframe或者a标签来跳转app端提供的URL schema(至于这个URL schema的组成格式, ...
- H5如何实现唤起APP
前言 写过hybrid的同学,想必都会遇到这样的需求,如果用户安装了自己的APP,就打开APP或跳转到APP内某个页面,如果没安装则引导用户到对应页面或应用商店下载.这里就涉及到了H5与Native之 ...
- 如何应用前端技术唤起app及判断用户来源及与原生交互的原理
做唤起时需要native端进行配合, h5唤起app这种需求是常见的.在移动为王的时代,h5在app导流上发挥着重要的作用. 目前我们采用的唤起方式是url scheme(iOS,Android平台都 ...
- h5页面唤起app(iOS和Android),没有安装则跳转下载页面
浏览器和app没有通信协议,所以h5不知道用户的手机释放安装了app.因此只能是h5去尝试唤起app,若不能唤起,引导用户去下载我们的app. 微信里屏蔽了 schema 协议,如果在微信中打开h5, ...
- h5移动网页唤起App
最近这个困惑了很久,不断的有一些坑,目前还有疑问关于iOS唤起无效时会出现弹框的问题,这个最后再说 1.首先可能需要判断当前浏览器的来源(目前开发的App还没有上架,所以针对腾讯出品的大家广为人知的微 ...
随机推荐
- 前后台json数据绑定——way.JS
依赖于JQ 01_页面值-页面值绑定.html 02_List绑定多个相同模型.html 0201_先set,再DOm添加.再get.html 03_绑定多个不同模型.html 04_继承03用类.方 ...
- Codeforces Round #222 (Div. 1) D. Developing Game 线段树有效区间合并
D. Developing Game Pavel is going to make a game of his dream. However, he knows that he can't mak ...
- StringEscapeUtils类的转义与反转义方法
第一步.下载Jar包(commons-lang.jar) 下载地址:http://commons.apache.org/proper/commons-lang/download_lang.cgi 第二 ...
- linq学习笔记
最近在学习linq的一些基础知识,看了c#高级编程及阅读了园子内部几篇优秀的博文,有所体会,感觉应该记录下来,作为以后复习使用.都是一些最基础的知识,大致分为三个部分:linq预备知识:linq查询: ...
- 七月十三号CSS3总结《2D的转换》
/*2D的转换*/ 位移 -webkit-transform: translate(10px, 10px) 缩放 -webkit-transform: scale(.5, .5)重置原点 ...
- 分享Kali Linux 2016.2第50周镜像文件
分享Kali Linux 2016.2第50周镜像文件Kali Linux官方于12月11日发布Kali Linux 2016.2的第50周镜像.这次保持以往规律,仍然是11个镜像文件.默认的Gnom ...
- JQuery上传插件Uploadify使用详解
本文转载http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html Uploadify是JQuery的一个上传插件,实现的效果非常不错 ...
- 【BO】安装BO服务器时,oracle服务端安装ora-12514和12541的问题
今天在安装BO服务器,oracle数据库时,出现了这样一个问题,描述如下: 首先安装oracle10g Server 32位版.安装ORCL数据库之后,使用10gServer下的NET MANAGER ...
- 2016-2017 ACM-ICPC, NEERC, Moscow Subregional Contest
A. Altitude 从小到大加入每个数,用set查找前驱和后继即可. 时间复杂度$O(n\log n)$. #include <bits/stdc++.h> using namespa ...
- 冰球项目日志2-yjw
我们小组在12.31号进行了讨论,确定了基本的任务及分工,后面是元旦放假,大家没有做很多的东西,我也是把自己分工的部分方案想了下. 后面在1.3号,我们会再进行一次小组讨论,确定下最终的方案,然后进行 ...