JAVA高级面试进阶训练营视频教程

admin

转：https://blog.csdn.net/CameloHuang/article/details/64476385

 

从html5打开本地的app–如果本地没有app就跳转到下载页面，大家都会认为这是一项很简单的操作。网上的教程也很多，但是可行性都不高。因为手机系统和浏览器型号各不相同，所以兼容性会是让各个前端工程师头疼的问题。我们不妨看一下京东是如何解决的。京东的原代码已经混淆过了，我只能一点点反混淆并注释。

网上的文章千篇一律 都是采用window.location.href的方式打开的，但是这种方法的兼容性非常的渣。在ios的safari浏览器中无法使用，会出现还未打开app就自动跳转到下载页面的情况，影响用户的使用。那么我们来看一下京东是如何解决兼容性的问题。 
下面附上我的代码翻译和注释。 
京东打开app的js代码链接

 

  1 (function(){
  2     // 判断浏览器
  3             var Navigator = navigator.userAgent;
  4         var ifChrome = Navigator.match(/Chrome/i) != null && Navigator.match(/Version\/\d+\.\d+(\.\d+)?\sChrome\//i) == null ? true : false;  
  5         var ifAndroid = (Navigator.match(/(Android);?[\s\/]+([\d.]+)?/)) ? true : false;
  6         var ifiPad = (Navigator.match(/(iPad).*OS\s([\d_]+)/)) ? true : false;
  7         var ifiPhone = (!ifiPad && Navigator.match(/(iPhone\sOS)\s([\d_]+)/)) ? true : false;
  8         var ifSafari = (ifiPhone || ifiPad) && Navigator.match(/Safari/);
  9         var version = 0;
 10         ifSafari && (version = Navigator.match(/Version\/([\d\.]+)/));
 11 
 12             version = parseFloat(version[1], 10);
 13             // 是否从微信打开
 14         var ifWeixin = navigator.userAgent.indexOf("MicroMessenger") >= 0; // weixin
 15         var j = false;
 16         var iframe = "plugIn_downloadAppPlugIn_loadIframe";
 17         var t = false;
 18         var i = 0;
 19         var B = {};
 20         var b = {};
 21         var selector = null;
 22         var Hquery = {};
 23             // 判断当前使用的js框架是zepto还是jquery
 24         var Query = window.Zepto || window.jQuery ? true : false;
 25         var g = [];
 26             // 是否存在html5的localStorage 存储
 27         var v = window.localStorage ? true : false;
 28         var o = "mdownloadAppPlugInskip";
 29         var p = null;
 30 
 31         function m() { // 打印时间 例如:2016-5-18
 32             var M = new Date();
 33             var N = M.getFullYear();
 34             var O = M.getMonth() + 1;
 35             var L = M.getDate();
 36             strDate = N + "-" + O + "-" + L;
 37             return strDate
 38         }
 39             // 微信相关操作
 40         function r() { // weixin api
 41             WeixinJSBridge.invoke("getInstallState", {
 42                 packageName: "com.jingdong.app.mall",
 43                 packageUrl: "openApp.jdMobile://"
 44             }, function(M) {
 45                 var N = M.err_msg,
 46                     L = 0;
 47                 if (N.indexOf("get_install_state:yes") > -1) {
 48                     j = true
 49                 }
 50             })
 51         }
 52            // 根据是否存在js框架进行dom和时间的绑定
 53         function bind(dom, event, fun) { // bind event
 54             if (Query) {
 55                 selector("#" + dom).bind(event, fun)
 56             } else {
 57                 selector("#" + dom).addEventListener(event, fun, !1)
 58             }
 59         }
 60 
 61         function z(L) {
 62             var M = (L || "mGen") + (++i);
 63             return M
 64         }
 65             // 微信操作
 66         if (ifWeixin) { // if navigitor is weixin 
 67             if (window.WeixinJSBridge && WeixinJSBridge.invoke) {
 68                 r()
 69             } else {
 70                 document.addEventListener("WeixinJSBridgeReady", r, !1)
 71             }
 72         }
 73 
 74             // 如果存在js框架
 75         if (Query) {
 76             selector = window.$;
 77             Hquery = window.$
 78         } else {
 79             selector = function(obj) {
 80                 if (typeof obj == "object") {
 81                     return obj
 82                 }
 83                 return document.querySelector(obj);
 84             };
 85             if (!window.$) {
 86                 window.$ = Hquery = selector
 87             } else {
 88                 Hquery = window.$ 
 89             }
 90         }
 91         window.onblur = function() {
 92             for (var L = 0; L < g.length; L++) {
 93                 clearTimeout(g[L])
 94             }
 95         };
 96              // 设置cookie。
 97         function e(N) {
 98             var M = document.cookie.indexOf(N + "=");
 99             if (M == -1) {
100                 return ""
101             }
102             M = M + N.length + 1;
103             var L = document.cookie.indexOf(";", M);
104             if (L == -1) {
105                 L = document.cookie.length
106             }
107             return document.cookie.substring(M, L)
108         }
109             // 设置cookie
110         function l(N, P, L, Q, O) { 
111             var R = N + "=" + escape(P);
112             if (L != "") {
113                 var M = new Date();
114                 M.setTime(M.getTime() + L * 24 * 3600 * 1000);
115                 R += ";expires=" + M.toGMTString()
116             }
117             if (Q != "") {
118                 R += ";path=" + Q
119             }
120             if (O != "") {
121                 R += ";domain=" + O
122             }
123             document.cookie = R
124         }
125 
126             // 打开的链接集合
127         function F(L) {
128             var url = {
129                 downAppURl: "http://h5.m.jd.com/active/download/download.html?channel=jd-m",
130                 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",
131                 downWeixin: "http://a.app.qq.com/o/simple.jsp?pkgname=com.jingdong.app.mall&g_f=991850",
132                 downIpad: "https://itunes.apple.com/cn/app/jing-dong-hd/id434374726?mt=8",
133                 inteneUrl: "openApp.jdMobile://360buy?type=1",
134                 inteneUrlParams: null,
135                 openAppBtnId: "",
136                 closePanelBtnId: "",
137                 closePanelId: "",
138                 closeCallblack: null,
139                 closeCallblackSource: null,
140                 cookieFlag: null,
141                 noRecord: false,
142                 sourceType: "JSHOP_SOURCE_TYPE",
143                 sourceValue: "JSHOP_SOURCE_VALUE",
144                 openAppEventId: "MDownLoadFloat_OpenNow",
145                 closePanelEventId: "MDownLoadFloat_Close"
146             };
147             if (L) {
148                 for (var M in L) {
149                     if (M && L[M]) {
150                         url[M] = L[M]
151                     }
152                 }
153             }
154             return url
155         }
156             // 敲黑板 重点内容。看京东是怎么解决兼容问题的。
157         function openApp(N, L) { // openApp
158             var R = h(N); //获取相对应的url
159             var O = null;
160             if (ifWeixin) { // 如果是微信端
161                 var M = null;
162                 if (j) {
163                     M = R
164                 } else {
165                     M = N.downWeixin
166                 }
167                 location.href = M; // 直接使用location.href打开
168                 return
169             }
170             if (ifiPad) { // 如果是ipad
171                 O = N.downIpad
172             } else { 
173                 if (ifiPhone) { // 如果是iphone
174                     O = N.downAppIos
175                 } else {
176                     O = N.downAppURl
177                 }
178             }
179 
180             if (ifChrome) { // 如果是chrome
181                 if (ifAndroid) { //安卓浏览器
182                     var Q = R;
183                     R = y(Q);
184                                     // 延后50毫秒
185                     setTimeout(function() {
186                         window.location.href = R 
187                     }, 50)
188                 }
189             }
190             if (ifSafari && version >= 9) { // 判断safari版本 如果大于9
191                 setTimeout(function() {  // 必须要使用settimeout
192                     var S = document.createElement("a"); //创建a元素
193                     S.setAttribute("href", R), S.style.display = "none", document.body.appendChild(S);
194                     var T = document.createEvent("HTMLEvents"); // 返回新创建的 Event 对象，具有指定的类型。
195                     T.initEvent("click", !1, !1)// 初始化新事件对象的属性,   S.dispatchEvent(T)  // 绑定事件
196                 }, 0)
197             } else {
198                 document.querySelector("#" + iframe).src = R // 将iframe增加src
199             }
200             var P = Date.now();
201             setTimeout(function() {
202                 if (L) {
203                     var S = setTimeout(function() {
204                         x(P, O)
205                     }, 1500);
206                     g.push(S)
207                 }
208             }, 100)
209         }
210             // x方法
211         function x(N, downUrl) {
212             var L = Date.now();
213             if (N && (L - N) < (1500 + 200)) {
214                 window.location.href = downUrl
215             }
216         }
217 
218         function h(N) {
219             var V = [];
220             var P = N.inteneUrlParams;
221             var T = {
222                 category: "jump",
223                 des: "productDetail"
224             };
225             if (N.sourceType && N.sourceValue) {
226                 T.sourceType = N.sourceType;
227                 T.sourceValue = N.sourceValue;
228                 if (P && !P.sourceType && !P.sourceValue) {
229                     P.sourceType = N.sourceType;
230                     P.sourceValue = N.sourceValue
231                 }
232             }
233             if (P) {
234                 for (var U in P) {
235                     if (U && P[U]) {
236                         V.push('"' + U + '":"' + P[U] + '"')
237                     }
238                 }
239             } else {
240                 for (var U in T) {
241                     if (U && T[U]) {
242                         V.push('"' + U + '":"' + T[U] + '"')
243                     }
244                 }
245             }
246             try {
247                 var Q = MPing.EventSeries.getSeries();
248                 if (Q) {
249                     var W = JSON.parse(Q);
250                     W.jdv = encodeURIComponent(e("__jdv"));
251                     W.unpl = encodeURIComponent(e("unpl"));
252                     W.mt_xid = encodeURIComponent(e("mt_xid"));
253                     W.mt_subsite = encodeURIComponent(e("mt_subsite"))
254                 }
255                 var S = {
256                     mt_subsite: encodeURIComponent(e("mt_subsite")),
257                     __jdv: encodeURIComponent(e("__jdv")),
258                     unpl: encodeURIComponent(e("unpl")),
259                     __jda: encodeURIComponent(e("__jda"))
260                 };
261                 Q = JSON.stringify(W);
262                 V.push('"m_param":' + Q);
263                 V.push('"SE":' + JSON.stringify(S))
264             } catch (R) {
265                 V.push('"m_param":null')
266             }
267             var M = "{" + V.join(",") + "}";
268             var O = N.inteneUrl.split("?");
269             var L = null;
270             if (O.length == 2) {
271                 L = O[0] + "?" + O[1] + "&params=" + M
272             } else {
273                 L = O[0] + "?params=" + M
274             }
275             return L
276         }
277 
278         function y(L) {
279             return "intent://m.jd.com/#Intent;scheme=" + L + ";package=com.jingdong.app.mall;end"
280         }
281 
282         function n(L) {
283             if (L.openAppBtnId) {
284                 B[L.openAppBtnId] = L;
285                 G(L.openAppBtnId, L.openAppEventId);
286                 bind(L.openAppBtnId, "click", function() {
287                     var P = this.getAttribute("id");
288                     var M = B[P];
289                     if (!t) {
290                         var N = document.createElement("iframe");
291                         N.id = iframe;
292                         document.body.appendChild(N);
293                         document.getElementById(iframe).style.display = "none";
294                         document.getElementById(iframe).style.width = "0px";
295                         document.getElementById(iframe).style.height = "0px";
296                         t = true
297                     }
298                     var O = M.cookieFlag ? "downloadAppPlugIn_downCloseDate_" + M.cookieFlag : "downloadAppPlugIn_downCloseDate";
299                     l(O, Date.now() + "_2592000000", 60, "/", "m.jd.com");
300                     l(O, Date.now() + "_2592000000", 60, "/", "m.jd.hk");
301                     openApp(M, true)
302                 })
303             }
304         }
305 
306         function D(M) {
307             if (M.closePanelBtnId && M.closePanelId) {
308                 B[M.closePanelBtnId] = M;
309                 G(M.closePanelBtnId, M.closePanelEventId);
310                 var Q = M.cookieFlag ? "downloadAppPlugIn_downCloseDate_" + M.cookieFlag : "downloadAppPlugIn_downCloseDate";
311                 var O = e(Q);
312                 var P = null;
313                 if (O) {
314                     P = O.split("_");
315                     if (P.length == 2) {
316                         P[0] = parseInt(P[0], 10);
317                         P[1] = parseInt(P[1], 10)
318                     } else {
319                         P = null
320                     }
321                 }
322                 var L = Date.now();
323                 if (Html5Plus() || (!M.noRecord && P && P.length == 2 && (L - P[0]) < P[1])) {
324                     document.querySelector("#" + M.closePanelId).style.display = "none";
325                     if (M.closeCallblack) {
326                         var N = M.closeCallblackSource ? M.closeCallblackSource : null;
327                         M.closeCallblack.call(N)
328                     }
329                     return
330                 } else {
331                     document.querySelector("#" + M.closePanelId).style.display = "block"
332                 }
333                 bind(M.closePanelBtnId, "click", function() {
334                     var U = this.getAttribute("id");
335                     var R = B[U];
336                     var T = R.cookieFlag ? "downloadAppPlugIn_downCloseDate_" + R.cookieFlag : "downloadAppPlugIn_downCloseDate";
337                     if (!R.noRecord) {
338                         l(T, Date.now() + "_259200000", 60, "/", "m.jd.com");
339                         l(T, Date.now() + "_259200000", 60, "/", "m.jd.hk")
340                     }
341                     document.querySelector("#" + R.closePanelId).style.display = "none";
342                     if (R.closeCallblack) {
343                         var S = R.closeCallblackSource ? R.closeCallblackSource : null;
344                         R.closeCallblack.call(S)
345                     }
346                 })
347             }
348         }
349 
350         function Html5Plus() { // htmlplus
351             if (Navigator.indexOf("Html5Plus") >= 0) {
352                 return true
353             } else {
354                 return false
355             }
356         }
357 
358         function G(P, M) {
359             try {
360                 var O = document.getElementById(P);
361                 var L = O.className;
362                 if (L) {
363                     L = L + " J_ping"
364                 } else {
365                     L = "J_ping"
366                 }
367                 O.className = L;
368                 O.setAttribute("report-eventid", M)
369             } catch (N) {}
370         }
371 
372         function C(L) {
373             var M = F(L);
374             n(M);
375             D(M)
376         }
377         Hquery.downloadAppPlugIn = C;
378         Hquery.downloadAppPlugInOpenApp = function(L) {
379             var M = F(L);
380             openApp(M);
381         }
382     });