js判断移动端是否安装某软软件，安装直接打开相应的链接，否则跳转到下载商店方法
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 提示是否安装，仅ios支持-->
<meta data-react-helmet="true" name="apple-itunes-app" content="app-id=432274380, app-argument=zhihu://questions/20053940" data-reactid="10"/>
<title>this‘s a demo</title>
</head>
<body>
<a href="javascript:;" id="openApp">知乎客户端</a>
<input type="text" name="ee" autocomplete="on">
<div style="float: width:100%;height: 34px;">
<div style="float: left;width: 140px;height: 34px; background: blue"></div>
<div style="float: right;width: 80px;height: 34px;background: red"></div>
<div style="display: block;overflow: hidden;background: green;height: 34px;"></div> </div> </body>
</html>
<script type="text/javascript">
/**
一、https://blog.html5funny.com/2015/06/19/open-app-from-mobile-web-browser-or-webview/
二、http://web.jobbole.com/86706/ 浏览器中唤起 native app，否则跳转到应用商城下载
三、https://developer.apple.com/library/content/documentation/General/Conceptual/AppSearch/UniversalLinks.html apple官网对 universal links 的文档
四、http://strivingboy.github.io/blog/2015/09/27/ios9/ iOS9 Universal Links （通用链接）
五、http://www.cocoachina.com/ios/20150902/13321.html iOS 9学习系列：打通 iOS 9 的通用链接（Universal Links）
六、http://www.jianshu.com/p/16374288c976 Universal Links通用链接应用跳转总结以及坑
七、universal link调研结果：
适合场景：
1.发短信和iMessage里面包含链接，如果安装应用跳转应用，否则打开web页面。
2.可以自定义“下载x应用”和“打开x应。用”应用界面，这样的好处点击打开应用如果安装直接打开，如果没有安装去下载界面。
3.某一个通过搜索进入的较大的二级域名的服务可以部署打开应用，风险：可能会伤害我们的seo排名 hack场景：
1.可以某一天通过web页面访问且安装的用户全部启动app，但是这样会伤害用户（用户不知道为什么启动了应用，可能因此卸载应用），如果我们以后有特殊原因需要使用可以开发备用。
【hack方式是在一个二级域名里面尝试访问另一个二级域名触发打开应用行为，如果成功则打开，失败则跳到二级页面—>302—>回到本页面】 注意事项：
1.当前域名不能和跳转域名一致
2.不支持302跳转
3.访问域名后不支持本域名的universal link跳转
4.二级域名可以跳转其他域名
5.ios9以上可以使用 universal link的坑
1.配置证书需要是https，但页面载体可以是http的页面
2.需要制定路径来区分跳转 需要更近一测试多路径
3.当前页面如果已经加在好，则虽然是触发url，但是不会触发universal link
4.二级域名的测试是否有兼容问题 八、市面上h5唤起app（不论微信还是普通浏览器） 有三种方式
1 第三方 (魔窗,linkedME)
2 与腾讯深度合作的app 比如(keep) 在微信的白名单里 通过 jssdk 的 launch3rdApp 唤起
3 universal link **/
//
//判断系统
// var n = {
// Edge: /Edge/i,
// Wechat: /MicroMessenger/,
// Weibo: /Weibo/,
// QQ: /\sQQ\//,
// Mobile: /Mobile/,
// Android: /Android/,
// iOS: /iPhone|iPad|iPod/,
// isAppleDevice: /iPad|iPhone|iPod|Mac OS X/,
// Zhihu: /Zhihu|osee2unifiedRelease|Futureve/,
// isBot: /Baiduspider|Sogou\s\w+\sspider|Yisouspider|Googlebot|Bingbot|360Spider/
// };
// function n() {
// o.iOS = /iPad|iPhone/.test(i), o.ANDROID = /Android/.test(i), o.WECHAT = /MicroMessenger/.test(i), o.WEIBO = /Weibo/.test(i), o.UC = /UCBrowser/.test(i), o.MOBILE_CHROME = /Mobile/.test(i) && /CriOS/.test(i), "undefined" != typeof window && (o.WKWebView = o.iOS && Boolean(window.indexedDB))
// }
// var i = navigator.userAgent.indexOf("Windows Phone") >= 0,
// a = navigator.userAgent.indexOf("Android") > 0 && !i,
// u = /iP(ad|hone|od)/.test(navigator.userAgent) && !i,
// c = u && /OS 4_\d(_\d)?/.test(navigator.userAgent),
// s = u && /OS [6-7]_\d/.test(navigator.userAgent),
// l = navigator.userAgent.indexOf("BB10") > 0; var timeout; //安卓和ios以及微信和qq的打开app协议和跳转到下载app市场的协议可能不同
document.getElementById('openApp').onclick = function(e){
var locationHref = window.location; if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)){
// 我们还需要知道的一点是，微信里屏蔽了schema协议。除非你是微信的合作伙伴之类的，他们专门给你配置进白名单，否则我们就没办法通过这个协议在微信中直接唤起app。 // 因此我们会判断页面场景是否在微信中，如果在微信中，则会提示用户在浏览器中打开。
// 如何判断本地是否安装了app
var ifr = document.createElement("iframe");
ifr.src = "zhihu://"; /***打开app的协议，有ios同事提供 itms-apps://itunes.apple.com/app/apple-store/id432274380***/
ifr.style.display = "none";
document.body.appendChild(ifr);
timeout = setTimeout(function(){
document.body.removeChild(ifr);
window.location.href = "https://oia.zhihu.com/articles/27494849"; /***下载app的地址***/
},500)
}else if(navigator.userAgent.match(/android/i)){
//在安卓下有弹层提示是否进去下载应用商店，并且如果已经安装进去app后返回 浏览器进去浏览器进入下载页面并且刷新页面时又进如app，知乎appye
var ifr = document.createElement('iframe');
ifr.src = 'zhihu://articles/27494849'; // shoule configure at AndroidManifest.xml
ifr.style.display = 'none';
document.body.appendChild(ifr); // var t ="zhihu://articles/27494849";
// t += "backupurl=" + encodeURIComponent("mstore://details?package_name=com.zhihu.android&source_apkname=com.zhihu.android&source_info=zhihu")
timeout = setTimeout(function() {
document.body.removeChild(ifr);
window.location = "https://oia.zhihu.com/articles/27494849";//android 下载地址 安卓的下载地址和ios不同,安卓的下载地址最好不要跳转到另外一页，最好在当前页面，不然安卓下不管是否安装该app总是先跳转到该下载页面并且跳转app后再回来的时候浏览器停留在下载页面，因为有时候网络慢或者打开app的时间过长就会导致跳转到了下载页面，即使也打开了app，但是在回到浏览器就跳转到了下载页面，所以安卓下最好下载地址不要重新定义一个页面
//安卓或者直接下载app e.Wechat || e.Weibo ? s(t) : e.QQ || (window.location = 'https://api.zhihu.com/client/download/apk/latest')
}, 800);
if (document.addEventListener) {
document.addEventListener("webkitvisibilitychange", clean);
document.addEventListener("visibilitychange", clean);
document.addEventListener("pagehide", clean);
} else if (document.attachEvent) {
//document.attachEvent("onclick", myFunction);
}
}else{
window.location.href = "https://oia.zhihu.com/articles/27494849";
}
}
function clean() {
clearTimeout(timeout);
window.location.href = locationHref;
}
</script>
js判断移动端是否安装某软软件，安装直接打开相应的链接，否则跳转到下载商店方法的更多相关文章
- js判断移动端是否安装某款app的多种方法
本文实例讲解了js判断移动端是否安装某款app的多种方法,分享给大家供大家参考,具体内容如下 第一种方法: 一:判断是那种设备 ? || u.indexOf(; //android终端或者uc浏览器 ...
- js 判断pc端或手机端
<script> (function () { var navUA = navigator.userAgent; var defIncludeStr = "iPhone|Andr ...
- JS 判断移动端与PC端
js判断移动端与pc端 这里介绍下使用device.js插件来判断移动端设备 地址:https://github.com/matthewhudson/device.js 示例: 1 2 3 4 5 ...
- JS判断移动端还是PC端(改造自腾讯网) 仅用于宣传动画,下载页等
JS判断移动端还是PC端(改造自腾讯网 http://www.qq.com/) 本脚本仅用于宣传动画,下载页( ipad 也算pc端)等, ionic 用 ionic.platform 即可( io ...
- JS判断登陆端是PC还是手机
前些天朋友问我怎么判断登陆端是PC还是手机...自己也是很困惑,然后自己查了资料,这些东西都藏在USER-AGENT里面,查了他的一些属性,写了一个简单的验证页面大家共同学习. 读取navigator ...
- JS判断移动端访问设备并加载对应CSS样式
JS判断不同web访问环境,主要针对移动设备,提供相对应的解析方案(判断设备代码直接copy腾讯网的) // 判断是否为移动端运行环境 if(/AppleWebKit.*Mobile/i.test(n ...
- js判断移动端和PC端跳转不同页面
方法一: /* * * 判断PC端与WAP端 */ var mobile_bs = { versions: function() { var u = navigator.userAgent; retu ...
- js判断PC端与移动端跳转
在网上看到很多这样类似的代码,但是有的很复杂,或者有的没有判断完全,上次经理去见完客户回来讲,使用苹果浏览打开pc端(pc已经做了识别跳转)会自动跳转到移动端的网页去,后来经测试才发现 documen ...
- js判断苹果端，安卓端
<script type="text/javascript"> var browser = { versions : function() { var u = navi ...
随机推荐
- XamarinEssentials教程设置首选项Preferences的值
XamarinEssentials教程设置首选项Preferences的值 如果要对首选项的某一项的值进行设置时,可以通过Preferences类的Set()方法实现,该方法可以对指定键的值进行设置. ...
- Serializers 序列化组件
Serializers 序列化组件 为什么要用序列化组件 当我们做前后端分离的项目~~我们前后端交互一般都选择JSON数据格式,JSON是一个轻量级的数据交互格式. 那么我们给前端数据的时候都要转 ...
- 简单分析Java中审批业务流程业务原理
- 186. [USACO Oct08] 牧场旅行
186. [USACO Oct08] 牧场旅行(点击转到COGS) 输入文件:pwalk.in 输出文件:pwalk.out 时间限制:1 s 内存限制:128 MB 描述 n个被自然地编号为 ...
- 4535 ACM 礼尚往来 数学排列组合
题目:http://acm.hdu.edu.cn/showproblem.php?pid=4535 题意:每个礼物都不相同的组合个数 数学规律: 将每个女友排序为1···n,对应的女友送男友的礼物排序 ...
- Python3从零开始爬取今日头条的新闻【二、首页热点新闻抓取】
Python3从零开始爬取今日头条的新闻[一.开发环境搭建] Python3从零开始爬取今日头条的新闻[二.首页热点新闻抓取] Python3从零开始爬取今日头条的新闻[三.滚动到底自动加载] Pyt ...
- ae:org.apache.shiro.authc.AuthenticationException: Authentication token of type [class org.apache.shiro.authc.UsernamePasswordToken] could not be authenticated by any configured realms. Please ensure
看问题是说要保证有一个realm正确,但是之前运行就一直成功,后来就不行了.有可能是:以为自己输入了正确的用户名和密码,结果是因为用户名前面添加了空格导致了这个错误发生. 实质问题是:你输入的用户名和 ...
- 浏览器JS报错Uncaught RangeError Maximum call stack size exceeded
JavaScript错误:Uncaught RangeError: Maximum call stack size exceeded 堆栈溢出 原因:有小类到大类的递归查询导致溢出 解决方法思想: A ...
- hibernate 的第一个工程
一.什么是Hibernate? Hibernate 是一个开放源代码的对象关系映射框架,它对JDBC进行了非常轻量级的对象封装,它将POJO与数据库表建立映射关系,是一个全自动的orm框架,hiber ...
- 28、初识socket（subprocess模块）
经过近一个半月的学习我们已经度过了python基础的阶段,今天我们开始学习python网络编程,没有难以理解的逻辑,更注重的是记忆. 本篇导航: 客户端/服务器架构 scoket与网络协议 套接字 基 ...