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 ...
随机推荐
- 解决在VUE中绑定WebSocket事件无法传值的问题
this.webSocket.onerror =(env)=>{ this.onError(env) }; https://jsfiddle.net/dko6g9a4/1/
- BZOJ.3351.[IOI2009]Regions(根号分治 差分)
BZOJ 表示非常爽2333 \(Description\) 给定一棵\(n\)个点的树,每个点有一个属性\(1\leq r_i\leq R\). \(Q\)次询问,每次询问给定\(r1,r2\),求 ...
- BZOJ.1095.[ZJOI2007]捉迷藏(线段树 括号序列)
BZOJ 洛谷 对树DFS得到括号序列.比如这样一个括号序列:[A[B[E][F[H][I]]][C][D[G]]]. 那比如\(D,E\)间的最短距离,就是将\(D,E\)间的括号序列取出:][[] ...
- BZOJ.3551.[ONTAK2010]Peaks加强版(Kruskal重构树 主席树)
题目链接 \(Description\) 有n个座山,其高度为hi.有m条带权双向边连接某些山.多次询问,每次询问从v出发 只经过边权<=x的边 所能到达的山中,第K高的是多少. 强制在线. \ ...
- wget用法汇总
wget是在Linux下开发的开放源代码的软件,作者是Hrvoje Niksic,后来被移植到包括Windows在内的各个平台上.它有以下功能和特点: (1)支持断点下传功能:这一点,也是网络蚂蚁和F ...
- 测试中，重现偶发的BUG问题。
1.严格按用例执行: 2.如果是作随机测试时,把测试步骤的点进行速记; 3.偶发BUG一般都是严重的,保留现场,让开发人员一起分析留下的现场(如数据的变化,界面窗口的变化等,找出问题的引子,那怕是千丝 ...
- [HDU1693]Eat the Trees
Description: 给出n*m的方格,有些格子不能铺线,其它格子必须铺,可以形成多个闭合回路.问有多少种铺法? Hint: \(n,m<=12\) Solution: 与原来单回路那题转移 ...
- [Vijos1763]Wormhole (贪心/模拟?)
已经是NOIP考前的最后一天了 现在在杭州的宾馆里 因为自己没带电脑 因此用ADMAN的电脑 题目描述 一维的世界就是一个数轴.这个世界的狭小我们几乎无法想象. 在这个数轴上,有N个点.从左到右依次标 ...
- 编程菜鸟的日记-初学尝试编程-C++ Primer Plus 第5章编程练习2
#include <iostream>using namespace std;const int MAXSIZE=100;int main(){ int a[MAXSIZE]; int s ...
- HDU 2002 计算球体积
题目链接:HDU 2002 Description 根据输入的半径值,计算球的体积. Input 输入数据有多组,每组占一行,每行包括一个实数,表示球的半径. Output 输出对应的球的体积,对于每 ...