在应用宝中有APP申请链接:

//是否可以打开App不可以跳则到下载页
$(".downNow button").on("click",function(){
if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i))
{
var loadDateTime = new Date().getTime();
window.setTimeout(function() {
var timeOutDateTime = new Date().getTime();
// alert("loadDateTime:"+loadDateTime+"--"+"timeOutDateTime"+timeOutDateTime)
if (timeOutDateTime - loadDateTime < 3000) {
window.location.href = "http:";//下载链接
} else {
window.close();
}
},1500);
window.location.href = "baoxianquan://";//ios app协议
}
if(navigator.userAgent.match(/android/i))
{
var loadDateTime = new Date().getTime();
window.setTimeout(function() {
var timeOutDateTime = new Date().getTime();
// alert("loadDateTime:"+loadDateTime+"--"+"timeOutDateTime"+timeOutDateTime)
if (timeOutDateTime - loadDateTime < 3000) {
window.location.href = "http:";//下载链接
} else {
window.close();
}
},1500);
window.location.href = "bxq://com.tou360.insurcircle";//android app协议
//jxapi://com.tou360.bida/
// window.setTimeout(function() {
// var timeOutDateTime = new Date();
// if((timeOutDateTime-loadDateTime)<3000){
// window.location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=com.tou360.bidaagent";//android 下载地址
// }
// }, 2000)
}
});

  对于app打开而言最常规的打开就是通过url scheme的方式去打开你的app,如下的:

myapp://
myapp://open
myapp://type=1&id=2sdeo223lwe

  

这些抛出都是以url的方式进行抛出,app捕捉到这些抛出去做相应的处理,本文对app的处理不做详细描述,app开发请自行谷歌百度。对于前端而言抛出的方式也有很多,而最理想的方式是通过iframe的src对其进行链抛出,来!说的在多都没有代码来的清晰,请看下面。

首先我们需要有一个iframe:

//实际上就是新建一个iframe的生成器
var createIframe=(function(){
var iframe;
return function(){
if(iframe){
return iframe;
}else{
iframe = document.createElement('iframe');
iframe.style.display = 'none';
document.body.appendChild(iframe);
return iframe;
}
}
})()

  之后我们还需要一个url scheme:

//生成一个url scheme,假设我们约定的scheme是myApp://type=1&id=iewo212j32这种形式的

var baseScheme = "myApp://"
var createScheme=function(options){
var urlScheme=baseScheme;
for(var item in options){
urlScheme=urlScheme+item + '=' + encodeURIComponent(options[item]) + "&";
}
urlScheme = urlScheme.substring(0, urlScheme.length - 1);
return encodeURIComponent(urlScheme);
}

  

这种scheme形式的其实不是最好的,根据我们踩过的坑,觉得约定为与http协议相近可能更好一些,具体的协议需要前端人员自己去和app端人员约定。

ok万事具备,iframe有了,urlScheme也有了,该去打开app了

var openApp=function(){
var localUrl=createScheme();
var openIframe=createIframe();
if(isIos()){
//判断是否是ios,具体的判断函数自行百度
window.location.href = localUrl;
var loadDateTime = Date.now();
setTimeout(function () {
var timeOutDateTime = Date.now();
if (timeOutDateTime - loadDateTime < 1000) {
window.location.href = "你的下载页面";
}
}, 25);
}else if(isAndroid()){
//判断是否是android,具体的判断函数自行百度
if (isChrome()) {
//chrome浏览器用iframe打不开得直接去打开,算一个坑
window.location.href = localUrl;
} else {
//抛出你的scheme
openIframe.src = localUrl;
}
setTimeout(function () {
window.location.href = "你的下载页面";
}, 500);
}else{
//主要是给winphone的用户准备的,实际都没测过,现在winphone不好找啊
openIframe.src = localUrl;
setTimeout(function () {
window.location.href = "你的下载页面";
}, 500);
}
}

  以上就是你要打开scheme的主要代码了,好吧,实际上不只是打开app,还要实现未打开的时候跳到下载页去。其中安卓实际上无论有没有打开都会跳到下载页去,而ios........好吧!按照网上的说法是浏览器失焦后会挂起脚本,呵呵,这是多老的ios版本的表现了,实际上现在的ios已经没有这么做,有些版本会跟安卓的表现一样,而有些则是直接跳转根本不会去打开,还有打开的时候那个恶心的系统弹窗是什么鬼。好吧,实际上至此你会发现,ios9.0以上的有些打不开直接跳,有些打得开还会有允许弹窗,而微信则是无论如何都打不开,实际上微信会在他的浏览器里拦截掉所有未经其允许的scheme包括app store,那么接下来我们要解决这些问题。

通用链接

针对ios9及以上的打不开问题,实际上ios9提供了更好的解决方案————通用链接。

什么是Universal Links(通用链接)?

这是iOS9推出的一项功能,如果你的应用支持Universal Links(通用链接),那么就能够方便的通过传统的HTTP链接来启动APP(如果iOS设备上已经安装了你的app,不需要额外做任何判断等),或者打开网页(iOS设备上没有安装你的app)。或许可以更简单点来说明,在iOS9之前,对于从各种从浏览器,Safari、UIWebView或者 WKWebView中唤醒APP的需求,我们通常只能使用scheme。

以上来自网上关于通用链接的介绍,对于前端简单点讲就是你访问一个http的url,如果这个url带有你提交给开发平台的配置文件中匹配规则的内容,ios系统会去尝试打开你的app,如果打不开,系统就会在浏览器中转向你要访问的链接。很好的一个属性,因为通过这个属性在ios9上我们能够绕过微信的拦截从而打开app。

以下是ios开发人员要做的百度搜索结果第一条ios中实现通用链接

而我们要做的真的很简单,实际上我们只需要抛出链接就好了(实际上博主只是来骗经验的)。在此之前请准备好与主站不同的域名,比如主站www.xxxx.com,你们可以准备好open.xxxx.com的域名作为重定向用。好吧!实际上通用链接有一个很坑的属性,必须是异域打开,而且如果你提交的是你主站的链接,你打开你的主站你会发现网站上方会挂着一个难看的灰条转向appstore中你们的app,没错,就是ios系统干的这个事,具体的其他注意事项可以参考这篇文章IOS9通用链接(universal link)

那么接下来我们的代码得做好更改

//增加通用链接的生成,
var baseScheme = "myApp://",
baseLink="http://m.xxxx.com?";
var createScheme=function(options,isLink){
var urlScheme=isLink?baseLink:baseScheme;
for(var item in options){
urlScheme=urlScheme+item + '=' + encodeURIComponent(options[item]) + "&";
}
urlScheme = urlScheme.substring(0, urlScheme.length - 1);
return isLink?urlScheme:encodeURIComponent(urlScheme);
}

  然后对抛出做

var openApp=function(){
//生成你的scheme你也可以选择外部传入
var localUrl=createScheme({type:1,id:"sdsdewe2122"});
var openIframe=createIframe();
if(isIos()){
//判断是否是ios,具体的判断函数自行百度
if(isGreaterThan9()){
//判断是否为ios9以上的版本,跟其他判断一样navigator.userAgent判断,ios会有带版本号
localUrl=createScheme({type:1,id:"sdsdewe2122"},true);//代码还可以优化一下
location.href = localUrl;//实际上不少产品会选择一开始将链接写入到用户需要点击的a标签里
return;
}
window.location.href = localUrl;
var loadDateTime = Date.now();
setTimeout(function () {
var timeOutDateTime = Date.now();
if (timeOutDateTime - loadDateTime < 1000) {
window.location.href = "你的下载页面";
}
}, 25);
}else if(isAndroid()){
//判断是否是android,具体的判断函数自行百度
if (isChrome()) {
//chrome浏览器用iframe打不开得直接去打开,算一个坑
window.location.href = localUrl;
} else {
//抛出你的scheme
openIframe.src = localUrl;
}
setTimeout(function () {
window.location.href = "你的下载页面";
}, 500);
}else{
//主要是给winphone的用户准备的,实际都没测过,现在winphone不好找啊
openIframe.src = localUrl;
setTimeout(function () {
window.location.href = "你的下载页面";
}, 500);
}
}

  实际上就只需要更改这么点,最重要的是app端接入通用链接,注意抛出的链接不要跟主站同域即可,之后就是不断的调试,自己去踩坑吧,记得绑定域名,这个对域名具有一定的依赖性。

原文

web页面打开本地app(判断是否安装)的更多相关文章

  1. 微信中通过页面(H5)直接打开本地app的解决方案

    简述 微信中通过页面直接打开app分为安卓版和IOS版,两个的实现方式是完全不同的. 安卓版实现:使用腾讯的应用宝,只要配置了“微下载”之后,打开链接腾讯会帮你判断本地是否已经安装了app,如果本地安 ...

  2. 给你的移动网站加点料:推荐下载App,如果本地安装则直接打开本地App(Android/IOS)

    纵观现在每家移动网站,打开首页的时候,都有各种各样的形式来提示你下载自身的移动App(Android/IOS),这是做移动客户端产品的一个很好地引流的手段.当然各家引流下载的交互和视觉各不相同,有的是 ...

  3. 推荐下载App,如果本地安装则直接打开本地App(Android/IOS)

    推荐下载App,如果本地安装则直接打开本地App(Android/IOS) - 纵观现在每家移动网站,打开首页的时候,都有各种各样的形式来提示你下载自身的移动App(Android/IOS),这是做移 ...

  4. 细说Web页面与本地电脑通讯

    话说在很久很久以前.Web页面与客户的本地电脑Localhost通讯,有两种方式: 1.Flash 2.ActiveX控件 由于Flash本人不是很了解,也给出不了什么示例代码, 对于ActiveX控 ...

  5. 京东在html5页面中打开本地app的解决方案

    转:https://blog.csdn.net/CameloHuang/article/details/64476385 从html5打开本地的app–如果本地没有app就跳转到下载页面,大家都会认为 ...

  6. 【问题记录】— web页面调用本地程序

    起因: 最近由于项目需要在web页面中调用本地部署的exe程序:进而对该功能实现做了对应了解:以及存在的问题进行记录. 要实现该功能就不得不说浏览器自定义协议:解决办法:那么它是什么呢? 浏览器自定义 ...

  7. 通过私有协议Chrome浏览器页面打开本地程序

    近期方有这样的要求:这两个系统,根据一组Chrome开展,根据一组IE开展,需要Chrome添加一个链接,然后进入IE该系统的开发.这,需要Chrome跳转到创建一个链接IE浏览器指定的页面.同时也实 ...

  8. 黄聪:保持web页面生成的app一直处于用户登录状态不退出

    用户登录了会员中心,怎么保持登录状态! 由于封壳的内核及组件肯定没有浏览器APP应用那么强大,所以目前暂时的解决方案是: jquery.cookie.js  本文转载至:https://www.cnb ...

  9. androidandroid中的通过网页链接打开本地app

    http://blog.csdn.net/zjlovety/article/details/54847980 <html> <head> <meta http-equiv ...

随机推荐

  1. 0506--Scrum项目1.0

    应用NABCD模型,分析你们初步选定的项目,充分说明你们选题的理由. 录制为演说视频,上传到视频网站,并把链接发到团队博客上. 团队项目选题  四则运算 NABCD 模型 1) N (Need 需求) ...

  2. ORM原型概念

    ORM[Object-Relation-Mapping]对象关系映射. 这个名词已经出来好几年了.已经不陌生.  以前在项目中针对相对复杂业务逻辑时一般采用领域模型驱动方式进行业务概述,分析和建模. ...

  3. RoseRT 建模学习

    目录: 一.RoseRT理论知识 二.一个完整模型的建立 三.TD-SCDMA(UE侧)RRC层建模的学习 四.LTE的RRC层建模(1.自主完成‘2.也可以是L2) 五.参考文献 一.RoseRT理 ...

  4. 探索javascript----有关数组的常用方法

    与字符串的转换: str.split(","):将一个字符串以为英文逗号分割,返回一个数组: arr.join(","):返回用指定分隔符间隔的含所有数组元素的 ...

  5. springmvc学习第一天

    一.helloworld的实现 1.加入jar包(加入无关的jar包可能会引起服务器的冲突) commons-logging-1.2.jarjstl.jarspring-aop-4.1.6.RELEA ...

  6. pads 扇出

    1 选择BGA器件 2.扇出设置 3 安全间距问题 4 可以区域扇出也可以多点扇出

  7. 2016 - 1 - 23 xml解析 -- 语法简介

    一: XML的概念 1. 一种可拓展标记语言 2. 与json一样,也是一种常用的数据交互格式 3. 一般也叫XML文档---XML Document 二: XML语法   1.一个完整的XML文档一 ...

  8. H.264 / MPEG-4 Part 10 White Paper-翻译

    1. Introduction Broadcast(广播) television and home entertainment(娱乐) have been revolutionised(彻底改变) b ...

  9. Cfree

    #include<stdio.h>int main(){ printf("Hello World!!!/n"); return 0;} #include<stdi ...

  10. C# 对List<T>取交集、连集及差集

    1. 取交集 List A :{1,5,9,3,7} List B:{1,6,8,5,3,2,9,4} var intersectedList = listA.Intersect(listB, new ...