如何解决手机浏览器打开客户端APP的问题？？
###问题背景：###
如果用户没有安装客户端，第一次进入H5页面，就直接下载客户端或者到跳转到APP Store；如果用户手机安装了客户端，就直接打开响应的客户端，不再继续下载或者到下载页面；
###问题难点：###
前端不能判断用户是否安装了客户端！
如果用户有安装客户端，会出现打开客户端成功后，浏览器那边依旧在下载客户端，非常损伤用户体验、浪费用户的流量。(IOS会提示“在APP Store中打开链接吗？”的Confirm提示框)
###目前解决方案：###
```javascript
var appInfo = {
iosUrl: "",//打开IOS客户端链接
androidUrl: "",//打开ANdroid客户端的链接
downloadUrl: ""//下载客户端或者去App Store的链接
};
var t1 = new Date().getTime();
iframe2open();
jump2download();
//利用iframe打开客户端
function iframe2open(){
var src = $.os.ios ? appInfo.iosUrl : appInfo.androidUrl,
iframe = document.createElement("iframe");
iframe.src = src;
iframe.style.display = &#34;non<爱尬聊_创建词条>e&#34;;
document.body.appendChild(iframe);
}
//跳转下载页面
function jump2download(){
var _timer = null;
clearTimeout(_timer);
_timer = setTimeout(function(){
var t2 = new Date().getTime();
if (t2 - t1 .< ）
###求一台给力的终极解决方案！
奉天承运老子诏 20小时前 对于一个完备的互联网产品而言需要有app端与web端两个不同前端，对于产品而言很多都希望能够将wap页上的用户引向native app上这就要求前端工程师们为网页提供各种入口去打开app，今天我们就聊一聊app的打开方式（有错误的地方还请高手指正）。常规打开对于app打开而言最常规的打开就是通过url scheme的方式去打开你的app，如下的myapp://myapp://openmyapp://type=1&id=2sdeo223lwe这些抛出都是以url的方式进行抛出，app捕捉到这些抛出去做相应的处理，本文对app的处理不做详细描述，app开发请自行谷歌百度。对于前端而言抛出的方式也有很多，而最理想的方式是通过iframe的src对其进行链抛出，来！说的在多都没有代码来的清晰，请看下面。首先我们需要有一个iframe：//实际上就是新建一个iframe的生成器varcreateIframe=(function(){var iframe; return function(){ if(iframe){ return iframe; }else{ iframe = document.createElement(&#39;iframe&#39;); iframe.style.display = &#39;none&#39;; document.body.appendChild(iframe); return iframe; } }})()之后我们还需要一个url scheme://生成一个url scheme,假设我们约定的scheme是myApp://type=1&id=iewo212j32这种形式的var baseScheme = &#34;myApp://&#34;var createScheme=function(options){ var urlScheme=baseScheme; for(var item in options){ urlScheme=urlScheme+item + &#39;=&#39; + encodeURIComponent(options[item]) + &#34;&&#34;; } 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 = &#34;你的下载页面&#34;; } }, 25); }else if(isAndroid()){ //判断是否是android，具体的判断函数自行百度 if (isChrome()) { //chrome浏览器用iframe打不开得直接去打开，算一个坑 window.location.href = localUrl; } else { //抛出你的scheme openIframe.src = localUrl; } setTimeout(function () { window.location.href = &#34;你的下载页面&#34;; }, 500); }else{ //主要是给winphone的用户准备的,实际都没测过，现在winphone不好找啊 openIframe.src = localUrl; setTimeout(function () { window.location.href = &#34;你的下载页面&#34;; }, 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中实现通用链接：而我们要做的真的很简单，实际上我们只需要抛出链接就好了（实际上博主只是来骗经验的）。在此之前请准备好与主站不同的域名，比如主站http://www.xxxx.com，你们可以准备好http://open.xxxx.com的域名作为重定向用。好吧！实际上通用链接有一个很坑的属性，必须是异域打开，而且如果你提交的是你主站的链接，你打开你的主站你会发现网站上方会挂着一个难看的灰条转向appstore中你们的app，没错，就是ios系统干的这个事，具体的其他注意事项可以参考这篇文章IOS9通用链接（universal link）。那么接下来我们的代码得做好更改//增加通用链接的生成,var baseScheme = &#34;myApp://&#34;, baseLink=&#34;http://m.xxxx.com?&#34;;var createScheme=function(options,isLink){ var urlScheme=isLink?baseLink:baseScheme; for(var item in options){ urlScheme=urlScheme+item + &#39;=&#39; + encodeURIComponent(options[item]) + &#34;&&#34;; } urlScheme = urlScheme.substring(0, urlScheme.length - 1); return isLink?urlScheme:encodeURIComponent(urlScheme);}然后对抛出做var openApp=function(){ //生成你的scheme你也可以选择外部传入 var localUrl=createScheme({type:1,id:&#34;sdsdewe2122&#34;}); var openIframe=createIframe(); if(isIos()){ //判断是否是ios,具体的判断函数自行百度 if(isGreaterThan9()){ //判断是否为ios9以上的版本,跟其他判断一样navigator.userAgent判断,ios会有带版本号 localUrl=createScheme({type:1,id:&#34;sdsdewe2122&#34;},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 = &#34;你的下载页面&#34;; } }, 25); }else if(isAndroid()){ //判断是否是android，具体的判断函数自行百度 if (isChrome()) { //chrome浏览器用iframe打不开得直接去打开，算一个坑 window.location.href = localUrl; } else { //抛出你的scheme openIframe.src = localUrl; } setTimeout(function () { window.location.href = &#34;你的下载页面&#34;; }, 500); }else{ //主要是给winphone的用户准备的,实际都没测过，现在winphone不好找啊 openIframe.src = localUrl; setTimeout(function () { window.location.href = &#34;你的下载页面&#34;; }, 500); }}实际上就只需要更改这么点，最重要的是app端接入通用链接，注意抛出的链接不要跟主站同域即可，之后就是不断的调试，自己去踩坑吧，记得绑定域名，这个对域名具有一定的依赖性。微信中打开至此只有微信是打不开的，实际上腾讯系的产品都是打不开的，包括qq浏览器。对于微信中有两种方式：一种简单的方式就是弹窗告诉用户让他去浏览器中打开——在技术之外的办法还有一种方式就是应用宝是的如果是微信就去打开你的app对应的应用宝，应用宝会去检测你的app是否存在有则去打开，但只是去打开。实际上腾讯的应用宝对于开发者在功能上做的比想象中的要强大，你在应用宝的微下载中配置申请你的applink（目前能申请不能用）与app store的链接,之后你只要在你的链接参数中带上android_schema=&#34;myApp://&#34;就在应用宝中打开app中的特定功能，如果忽略应用宝的页面跟自己scheme打开没有太大区别，具体的操作可以查看应用宝的说明。简而言之，腾讯的产品中都去借助应用宝这个平台去执行你需要的操作。在此就不贴代码了，只要判断浏览器如果是微信或者是qq就去跳你的应用宝链接就行。以上答案来自我厂牟金涛老师的博文《wap页中唤醒APP》更多网易技术、产品、运营经验分享敬请关注网易社区知乎机构号：网易云 - 知乎
xinpai 20小时前 if (isAndroid) { //安卓设备：原理：判断是否认识这个协议，认识则直接跳转，不认识就在这里下载app /***打开app的协议，有安卓同事提供？？？***/ setTimeout(function () { window.location.href = &#34;app下载地址&#34;; document.body.removeChild(ifr); }, 2000) var ifr = document.createElement(&#34;iframe&#34;); ifr.setAttribute(&#39;src&#39;, &#39;当前访问的地址&#39;); ifr.setAttribute(&#39;style&#39;, &#39;display:none&#39;); document.body.appendChild(ifr); }
明月松间行离弦的歌离弦的歌 20小时前 前端不能判断用户是否安装了客户端，但是可以给两个按钮让用户自己选，他是要安装客户端还是要下载app。
一笔一画续写前缘回忆凄美了谁等 20小时前 手机浏览器下怎么打开app应用 CSDN很多攻略
如果用户没有安装客户端，第一次进入H5页面，就直接下载客户端或者到跳转到APP Store；如果用户手机安装了客户端，就直接打开响应的客户端，不再继续下载或者到下载页面；
###问题难点：###
前端不能判断用户是否安装了客户端！
如果用户有安装客户端，会出现打开客户端成功后，浏览器那边依旧在下载客户端，非常损伤用户体验、浪费用户的流量。(IOS会提示“在APP Store中打开链接吗？”的Confirm提示框)
###目前解决方案：###
```javascript
var appInfo = {
iosUrl: &#34;&#34;,//打开IOS客户端链接
androidUrl: &#34;&#34;,//打开ANdroid客户端的链接
downloadUrl: &#34;&#34;//下载客户端或者去App Store的链接
};
var t1 = new Date().getTime();
iframe2open();
jump2download();
//利用iframe打开客户端
function iframe2open(){
var src = $.os.ios ? appInfo.iosUrl : appInfo.androidUrl,
iframe = document.createElement(&#34;iframe&#34;);
iframe.src = src;
iframe.style.display = &#34;non<爱尬聊_创建词条>e&#34;;
document.body.appendChild(iframe);
}
//跳转下载页面
function jump2download(){
var _timer = null;
clearTimeout(_timer);
_timer = setTimeout(function(){
var t2 = new Date().getTime();
if (t2 - t1 .< ）
###求一台给力的终极解决方案！
奉天承运老子诏 20小时前 对于一个完备的互联网产品而言需要有app端与web端两个不同前端，对于产品而言很多都希望能够将wap页上的用户引向native app上这就要求前端工程师们为网页提供各种入口去打开app，今天我们就聊一聊app的打开方式（有错误的地方还请高手指正）。常规打开对于app打开而言最常规的打开就是通过url scheme的方式去打开你的app，如下的myapp://myapp://openmyapp://type=1&id=2sdeo223lwe这些抛出都是以url的方式进行抛出，app捕捉到这些抛出去做相应的处理，本文对app的处理不做详细描述，app开发请自行谷歌百度。对于前端而言抛出的方式也有很多，而最理想的方式是通过iframe的src对其进行链抛出，来！说的在多都没有代码来的清晰，请看下面。首先我们需要有一个iframe：//实际上就是新建一个iframe的生成器varcreateIframe=(function(){var iframe; return function(){ if(iframe){ return iframe; }else{ iframe = document.createElement(&#39;iframe&#39;); iframe.style.display = &#39;none&#39;; document.body.appendChild(iframe); return iframe; } }})()之后我们还需要一个url scheme://生成一个url scheme,假设我们约定的scheme是myApp://type=1&id=iewo212j32这种形式的var baseScheme = &#34;myApp://&#34;var createScheme=function(options){ var urlScheme=baseScheme; for(var item in options){ urlScheme=urlScheme+item + &#39;=&#39; + encodeURIComponent(options[item]) + &#34;&&#34;; } 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 = &#34;你的下载页面&#34;; } }, 25); }else if(isAndroid()){ //判断是否是android，具体的判断函数自行百度 if (isChrome()) { //chrome浏览器用iframe打不开得直接去打开，算一个坑 window.location.href = localUrl; } else { //抛出你的scheme openIframe.src = localUrl; } setTimeout(function () { window.location.href = &#34;你的下载页面&#34;; }, 500); }else{ //主要是给winphone的用户准备的,实际都没测过，现在winphone不好找啊 openIframe.src = localUrl; setTimeout(function () { window.location.href = &#34;你的下载页面&#34;; }, 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中实现通用链接：而我们要做的真的很简单，实际上我们只需要抛出链接就好了（实际上博主只是来骗经验的）。在此之前请准备好与主站不同的域名，比如主站http://www.xxxx.com，你们可以准备好http://open.xxxx.com的域名作为重定向用。好吧！实际上通用链接有一个很坑的属性，必须是异域打开，而且如果你提交的是你主站的链接，你打开你的主站你会发现网站上方会挂着一个难看的灰条转向appstore中你们的app，没错，就是ios系统干的这个事，具体的其他注意事项可以参考这篇文章IOS9通用链接（universal link）。那么接下来我们的代码得做好更改//增加通用链接的生成,var baseScheme = &#34;myApp://&#34;, baseLink=&#34;http://m.xxxx.com?&#34;;var createScheme=function(options,isLink){ var urlScheme=isLink?baseLink:baseScheme; for(var item in options){ urlScheme=urlScheme+item + &#39;=&#39; + encodeURIComponent(options[item]) + &#34;&&#34;; } urlScheme = urlScheme.substring(0, urlScheme.length - 1); return isLink?urlScheme:encodeURIComponent(urlScheme);}然后对抛出做var openApp=function(){ //生成你的scheme你也可以选择外部传入 var localUrl=createScheme({type:1,id:&#34;sdsdewe2122&#34;}); var openIframe=createIframe(); if(isIos()){ //判断是否是ios,具体的判断函数自行百度 if(isGreaterThan9()){ //判断是否为ios9以上的版本,跟其他判断一样navigator.userAgent判断,ios会有带版本号 localUrl=createScheme({type:1,id:&#34;sdsdewe2122&#34;},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 = &#34;你的下载页面&#34;; } }, 25); }else if(isAndroid()){ //判断是否是android，具体的判断函数自行百度 if (isChrome()) { //chrome浏览器用iframe打不开得直接去打开，算一个坑 window.location.href = localUrl; } else { //抛出你的scheme openIframe.src = localUrl; } setTimeout(function () { window.location.href = &#34;你的下载页面&#34;; }, 500); }else{ //主要是给winphone的用户准备的,实际都没测过，现在winphone不好找啊 openIframe.src = localUrl; setTimeout(function () { window.location.href = &#34;你的下载页面&#34;; }, 500); }}实际上就只需要更改这么点，最重要的是app端接入通用链接，注意抛出的链接不要跟主站同域即可，之后就是不断的调试，自己去踩坑吧，记得绑定域名，这个对域名具有一定的依赖性。微信中打开至此只有微信是打不开的，实际上腾讯系的产品都是打不开的，包括qq浏览器。对于微信中有两种方式：一种简单的方式就是弹窗告诉用户让他去浏览器中打开——在技术之外的办法还有一种方式就是应用宝是的如果是微信就去打开你的app对应的应用宝，应用宝会去检测你的app是否存在有则去打开，但只是去打开。实际上腾讯的应用宝对于开发者在功能上做的比想象中的要强大，你在应用宝的微下载中配置申请你的applink（目前能申请不能用）与app store的链接,之后你只要在你的链接参数中带上android_schema=&#34;myApp://&#34;就在应用宝中打开app中的特定功能，如果忽略应用宝的页面跟自己scheme打开没有太大区别，具体的操作可以查看应用宝的说明。简而言之，腾讯的产品中都去借助应用宝这个平台去执行你需要的操作。在此就不贴代码了，只要判断浏览器如果是微信或者是qq就去跳你的应用宝链接就行。以上答案来自我厂牟金涛老师的博文《wap页中唤醒APP》更多网易技术、产品、运营经验分享敬请关注网易社区知乎机构号：网易云 - 知乎
xinpai 20小时前 if (isAndroid) { //安卓设备：原理：判断是否认识这个协议，认识则直接跳转，不认识就在这里下载app /***打开app的协议，有安卓同事提供？？？***/ setTimeout(function () { window.location.href = &#34;app下载地址&#34;; document.body.removeChild(ifr); }, 2000) var ifr = document.createElement(&#34;iframe&#34;); ifr.setAttribute(&#39;src&#39;, &#39;当前访问的地址&#39;); ifr.setAttribute(&#39;style&#39;, &#39;display:none&#39;); document.body.appendChild(ifr); }
明月松间行离弦的歌离弦的歌 20小时前 前端不能判断用户是否安装了客户端，但是可以给两个按钮让用户自己选，他是要安装客户端还是要下载app。
一笔一画续写前缘回忆凄美了谁等 20小时前 手机浏览器下怎么打开app应用 CSDN很多攻略
