html5页面中打开本地app,如果没有跳转下载页面的解决方案

技术实现

直接用window.location.href的方法解决,这个方法的前提条件是需要知道自己app对应的打开协议,如贴吧APP,协议为:com.baidu.tieba://(下边以百度贴吧为例)

1
2
3
4
5
6
7
8
9
10
<!-- a标签点击打开的动作,在click事件中注册 -->
<a href="javascript:;" id="openApp">贴吧客户端</a>
<script type="text/javascript">
document.getElementById('openApp').onclick = function(e){
window.location.href = "com.baidu.tieba://";
window.setTimeout(function(){
window.location.href = "https://itunes.apple.com/cn/app/id477927812";//打开app下载地址,由app开发人员提供
},2000)
};
</script>

因为Android和iOS的下载包和协议是不同的所以需要判断一下用户的系统类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>
<a href="javascript:;" id="openApp">贴吧客户端</a>
</body>

<script type="text/javascript">
document.getElementById('openApp').onclick = function(e){
if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i))
{
window.location.href = "com.baidu.tieba://";//ios app协议
window.setTimeout(function() {
window.location.href = "https://itunes.apple.com/cn/app/id477927812";
}, 2000)
}
if(navigator.userAgent.match(/android/i))
{
window.location.href = "com.baidu.tieba://app";//android app协议
window.setTimeout(function() {
window.location.href = "https://****.apk";//android 下载地址
}, 2000)
}
};
</script>

但是用window.location.href方法的话当手机中有目标应用时,应用打开,但是浏览器也会跳转到下载页面,而且微信浏览器不支持打开、下载第三方app,所以做微信活动页的coder们当遇到需要实现该需求时所考虑的就更多了。

京东针对于这个问题的解决方案。如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
(function(){
// 判断浏览器
var Navigator = navigator.userAgent;
var ifChrome = Navigator.match(/Chrome/i) != null && Navigator.match(/Version\/\d+\.\d+(\.\d+)?\sChrome\//i) == null ? true : false;
var ifAndroid = (Navigator.match(/(Android);?[\s\/]+([\d.]+)?/)) ? true : false;
var ifiPad = (Navigator.match(/(iPad).*OS\s([\d_]+)/)) ? true : false;
var ifiPhone = (!ifiPad && Navigator.match(/(iPhone\sOS)\s([\d_]+)/)) ? true : false;
var ifSafari = (ifiPhone || ifiPad) && Navigator.match(/Safari/);
var version = 0;
ifSafari && (version = Navigator.match(/Version\/([\d\.]+)/));

version = parseFloat(version[1], 10);
// 是否从微信打开
var ifWeixin = navigator.userAgent.indexOf("MicroMessenger") >= 0; // weixin
var j = false;
var iframe = "plugIn_downloadAppPlugIn_loadIframe";
var t = false;
var i = 0;
var B = {};
var b = {};
var selector = null;
var Hquery = {};
// 判断当前使用的js框架是zepto还是jquery
var Query = window.Zepto || window.jQuery ? true : false;
var g = [];
// 是否存在html5的localStorage 存储
var v = window.localStorage ? true : false;
var o = "mdownloadAppPlugInskip";
var p = null;

function m() { // 打印时间 例如:2016-5-18
var M = new Date();
var N = M.getFullYear();
var O = M.getMonth() + 1;
var L = M.getDate();
strDate = N + "-" + O + "-" + L;
return strDate
}
// 微信相关操作
function r() { // weixin api
WeixinJSBridge.invoke("getInstallState", {
packageName: "com.jingdong.app.mall",
packageUrl: "openApp.jdMobile://"
}, function(M) {
var N = M.err_msg,
L = 0;
if (N.indexOf("get_install_state:yes") > -1) {
j = true
}
})
}
// 根据是否存在js框架进行dom和时间的绑定
function bind(dom, event, fun) { // bind event
if (Query) {
selector("#" + dom).bind(event, fun)
} else {
selector("#" + dom).addEventListener(event, fun, !1)
}
}

function z(L) {
var M = (L || "mGen") + (++i);
return M
}
// 微信操作
if (ifWeixin) { // if navigitor is weixin
if (window.WeixinJSBridge && WeixinJSBridge.invoke) {
r()
} else {
document.addEventListener("WeixinJSBridgeReady", r, !1)
}
}

// 如果存在js框架
if (Query) {
selector = window.$;
Hquery = window.$
} else {
selector = function(obj) {
if (typeof obj == "object") {
return obj
}
return document.querySelector(obj);
};
if (!window.$) {
window.$ = Hquery = selector
} else {
Hquery = window.$
}
}
window.onblur = function() {
for (var L = 0; L < g.length; L++) {
clearTimeout(g[L])
}
};
// 设置cookie。
function e(N) {
var M = document.cookie.indexOf(N + "=");
if (M == -1) {
return ""
}
M = M + N.length + 1;
var L = document.cookie.indexOf(";", M);
if (L == -1) {
L = document.cookie.length
}
return document.cookie.substring(M, L)
}
// 设置cookie
function l(N, P, L, Q, O) {
var R = N + "=" + escape(P);
if (L != "") {
var M = new Date();
M.setTime(M.getTime() + L * 24 * 3600 * 1000);
R += ";expires=" + M.toGMTString()
}
if (Q != "") {
R += ";path=" + Q
}
if (O != "") {
R += ";domain=" + O
}
document.cookie = R
}

// 打开的链接集合
function F(L) {
var url = {
downAppURl: "http://h5.m.jd.com/active/download/download.html?channel=jd-m",
downAppIos: "http://union.m.jd.com/download/go.action?to=http%3A%2F%2Fitunes.apple.com%2Fcn%2Fapp%2Fid414245413&client=apple&unionId=12532&subunionId=m-top&key=e4dd45c0f480d8a08c4621b4fff5de74",
downWeixin: "http://a.app.qq.com/o/simple.jsp?pkgname=com.jingdong.app.mall&g_f=991850",
downIpad: "https://itunes.apple.com/cn/app/jing-dong-hd/id434374726?mt=8",
inteneUrl: "openApp.jdMobile://360buy?type=1",
inteneUrlParams: null,
openAppBtnId: "",
closePanelBtnId: "",
closePanelId: "",
closeCallblack: null,
closeCallblackSource: null,
cookieFlag: null,
noRecord: false,
sourceType: "JSHOP_SOURCE_TYPE",
sourceValue: "JSHOP_SOURCE_VALUE",
openAppEventId: "MDownLoadFloat_OpenNow",
closePanelEventId: "MDownLoadFloat_Close"
};
if (L) {
for (var M in L) {
if (M && L[M]) {
url[M] = L[M]
}
}
}
return url
}
// 敲黑板 重点内容。看京东是怎么解决兼容问题的。
function openApp(N, L) { // openApp
var R = h(N); //获取相对应的url
var O = null;
if (ifWeixin) { // 如果是微信端
var M = null;
if (j) {
M = R
} else {
M = N.downWeixin
}
location.href = M; // 直接使用location.href打开
return
}
if (ifiPad) { // 如果是ipad
O = N.downIpad
} else {
if (ifiPhone) { // 如果是iphone
O = N.downAppIos
} else {
O = N.downAppURl
}
}

if (ifChrome) { // 如果是chrome
if (ifAndroid) { //安卓浏览器
var Q = R;
R = y(Q);
// 延后50毫秒
setTimeout(function() {
window.location.href = R
}, 50)
}
}
if (ifSafari && version >= 9) { // 判断safari版本 如果大于9
setTimeout(function() { // 必须要使用settimeout
var S = document.createElement("a"); //创建a元素
S.setAttribute("href", R), S.style.display = "none", document.body.appendChild(S);
var T = document.createEvent("HTMLEvents"); // 返回新创建的 Event 对象,具有指定的类型。
T.initEvent("click", !1, !1)// 初始化新事件对象的属性, S.dispatchEvent(T) // 绑定事件
}, 0)
} else {
document.querySelector("#" + iframe).src = R // 将iframe增加src
}
var P = Date.now();
setTimeout(function() {
if (L) {
var S = setTimeout(function() {
x(P, O)
}, 1500);
g.push(S)
}
}, 100)
}
// x方法
function x(N, downUrl) {
var L = Date.now();
if (N && (L - N) < (1500 + 200)) {
window.location.href = downUrl
}
}

function h(N) {
var V = [];
var P = N.inteneUrlParams;
var T = {
category: "jump",
des: "productDetail"
};
if (N.sourceType && N.sourceValue) {
T.sourceType = N.sourceType;
T.sourceValue = N.sourceValue;
if (P && !P.sourceType && !P.sourceValue) {
P.sourceType = N.sourceType;
P.sourceValue = N.sourceValue
}
}
if (P) {
for (var U in P) {
if (U && P[U]) {
V.push('"' + U + '":"' + P[U] + '"')
}
}
} else {
for (var U in T) {
if (U && T[U]) {
V.push('"' + U + '":"' + T[U] + '"')
}
}
}
try {
var Q = MPing.EventSeries.getSeries();
if (Q) {
var W = JSON.parse(Q);
W.jdv = encodeURIComponent(e("__jdv"));
W.unpl = encodeURIComponent(e("unpl"));
W.mt_xid = encodeURIComponent(e("mt_xid"));
W.mt_subsite = encodeURIComponent(e("mt_subsite"))
}
var S = {
mt_subsite: encodeURIComponent(e("mt_subsite")),
__jdv: encodeURIComponent(e("__jdv")),
unpl: encodeURIComponent(e("unpl")),
__jda: encodeURIComponent(e("__jda"))
};
Q = JSON.stringify(W);
V.push('"m_param":' + Q);
V.push('"SE":' + JSON.stringify(S))
} catch (R) {
V.push('"m_param":null')
}
var M = "{" + V.join(",") + "}";
var O = N.inteneUrl.split("?");
var L = null;
if (O.length == 2) {
L = O[0] + "?" + O[1] + "¶ms=" + M
} else {
L = O[0] + "?params=" + M
}
return L
}

function y(L) {
return "intent://m.jd.com/#Intent;scheme=" + L + ";package=com.jingdong.app.mall;end"
}

function n(L) {
if (L.openAppBtnId) {
B[L.openAppBtnId] = L;
G(L.openAppBtnId, L.openAppEventId);
bind(L.openAppBtnId, "click", function() {
var P = this.getAttribute("id");
var M = B[P];
if (!t) {
var N = document.createElement("iframe");
N.id = iframe;
document.body.appendChild(N);
document.getElementById(iframe).style.display = "none";
document.getElementById(iframe).style.width = "0px";
document.getElementById(iframe).style.height = "0px";
t = true
}
var O = M.cookieFlag ? "downloadAppPlugIn_downCloseDate_" + M.cookieFlag : "downloadAppPlugIn_downCloseDate";
l(O, Date.now() + "_2592000000", 60, "/", "m.jd.com");
l(O, Date.now() + "_2592000000", 60, "/", "m.jd.hk");
openApp(M, true)
})
}
}

function D(M) {
if (M.closePanelBtnId && M.closePanelId) {
B[M.closePanelBtnId] = M;
G(M.closePanelBtnId, M.closePanelEventId);
var Q = M.cookieFlag ? "downloadAppPlugIn_downCloseDate_" + M.cookieFlag : "downloadAppPlugIn_downCloseDate";
var O = e(Q);
var P = null;
if (O) {
P = O.split("_");
if (P.length == 2) {
P[0] = parseInt(P[0], 10);
P[1] = parseInt(P[1], 10)
} else {
P = null
}
}
var L = Date.now();
if (Html5Plus() || (!M.noRecord && P && P.length == 2 && (L - P[0]) < P[1])) {
document.querySelector("#" + M.closePanelId).style.display = "none";
if (M.closeCallblack) {
var N = M.closeCallblackSource ? M.closeCallblackSource : null;
M.closeCallblack.call(N)
}
return
} else {
document.querySelector("#" + M.closePanelId).style.display = "block"
}
bind(M.closePanelBtnId, "click", function() {
var U = this.getAttribute("id");
var R = B[U];
var T = R.cookieFlag ? "downloadAppPlugIn_downCloseDate_" + R.cookieFlag : "downloadAppPlugIn_downCloseDate";
if (!R.noRecord) {
l(T, Date.now() + "_259200000", 60, "/", "m.jd.com");
l(T, Date.now() + "_259200000", 60, "/", "m.jd.hk")
}
document.querySelector("#" + R.closePanelId).style.display = "none";
if (R.closeCallblack) {
var S = R.closeCallblackSource ? R.closeCallblackSource : null;
R.closeCallblack.call(S)
}
})
}
}

function Html5Plus() { // htmlplus
if (Navigator.indexOf("Html5Plus") >= 0) {
return true
} else {
return false
}
}

function G(P, M) {
try {
var O = document.getElementById(P);
var L = O.className;
if (L) {
L = L + " J_ping"
} else {
L = "J_ping"
}
O.className = L;
O.setAttribute("report-eventid", M)
} catch (N) {}
}

function C(L) {
var M = F(L);
n(M);
D(M)
}
Hquery.downloadAppPlugIn = C;
Hquery.downloadAppPlugInOpenApp = function(L) {
var M = F(L);
openApp(M);
}
});

这个虽然看起来比较繁琐,而且得着实的理解一下,但是一个比较全面的解决办法