又到週末了，咱們一塊兒來研究【瀏覽器如何檢測是否安裝app】吧

時間 2019-12-19

標籤又到週末咱們一塊兒研究瀏覽器如何檢測是否安裝app 欄目瀏覽器简体版

原文原文鏈接

前言

扯淡

這個月比較倒黴，我送了女友一臺筆記本電腦做爲生日禮物，結果15天一過電腦就壞了，悲劇的我還把電腦盒子給扔了！淘寶不給換更不給退javascript

因而被女友臭罵了一過星期後，今天原本在公司有任務的，可是去修了個電腦（換主板啊......），一蹉跎就快五點了，如今反正幹勁也不行，就寫篇博客吧css

需求

上週五的時候，確切說是週四晚上，老闆終於又遞上了一個神奇的需求html

瀏覽器檢測手機是否安裝app

尼瑪，反正在我看來，這個需求夠奇葩的，當時我還一致認爲不能完成，可是最後也竟然想出了（抄出了）一個辦法，因而這裏拿出來與各位分享下前端

在此以前，咱們繼續聊下上次遇到的tap點透問題java

tap「點透」再探索

http://www.cnblogs.com/yexiaochai/p/3377900.htmlweb

http://www.cnblogs.com/yexiaochai/p/3391015.html瀏覽器

看過上面兩篇博客的的朋友應該知道咱們爲何要使用tap事件替換click事件，而後大概知道tap會帶來哪些問題，以及我是如何解決這些問題的app

雖然完整解決方案由於公司財產問題未拿出來，可是基本思路是有了，其核心就是蒙版遮蓋！ide

話說還頭，這個蒙版其實仍是不太能讓人接受，這不我又請教了我一個同事，咱們同事提出了一個屬性：學習

pointer-events屬性值詳解

auto——效果和沒有定義pointer-events屬性相同，鼠標不會穿透當前層。在SVG中，該值和visiblePainted的效果相同。
none——元素再也不是鼠標事件的目標，鼠標再也不監聽當前層而去監聽下面的層中的元素。可是若是它的子元素設置了pointer-events爲其它值，好比auto，鼠標仍是會監聽這個子元素的。
其它屬性值爲SVG專用，這裏再也不多介紹了。

這個屬性，經過前端觀察/和張鑫旭的博客再深刻了解一番事後發現，這個傢伙能夠消除一個元素的鼠標事件呢！！！天然也包括touchstart了，因而老夫感興趣了，便有了今天這個插曲

是否繼承

咱們首先來看看這個屬性是否會被繼承：

http://sandbox.runjs.cn/show/teegz43u

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6     <meta content="telephone=no" name="format-detection" />
 7     <meta name="apple-mobile-web-app-capable" content="yes" />
 8     <style>
 9         div { display: block; border: 1px solid black;  margin: 10px; padding: 10px; }
10     </style>
11     <script id="others_zepto_10rc1" type="text/javascript" class="library" src="/js/sandbox/other/zepto.min.js"></script>
12     
13 </head>
14 <body>
15 
16     <div id="p1">
17         p1
18         <div id="p1-1">
19             p1-1
20             <div id="p1-1-1">
21                 p1-1-1
22             </div>
23              <div id="p1-1-2">
24                 p1-1-2
25             </div>
26         </div>
27     </div>
28 
29      <div id="p2">
30         p2
31         <div id="p2-1">
32             2-1
33             <div id="p2-1-1">
34                 p2-1-1
35             </div>
36              <div id="p2-1-2">
37                 p2-1-2
38             </div>
39         </div>
40     </div>
41 
42 </body>
43 <script type="text/javascript">
44     $('div').click(function () {
45         alert($(this).attr('id'))
46 
47     })
48 </script>
49 </html>

首先，如今鼠標點擊會有一個冒泡的過程，因此會一次彈出提示框，如今咱們將下面的p2的style加上咱們的pointer-events屬性試試點擊是否有效果

結果代表，設置了pointer-events: none; 後，該元素以及下面的元素的click事件所有沒有了

甚至是咱們的input框都不會獲取焦點了！！！，因此這個傢伙確實夠厲害，可是不會取消事件冒泡

有了這個結論，咱們上咱們的重量級代碼吧，這個代碼請各位用手機測試

屬性解決點透

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6     <meta content="telephone=no" name="format-detection" />
 7     <meta name="apple-mobile-web-app-capable" content="yes" />
 8     <style>
 9         #list { display: block; position: absolute; top: 100px; left: 10px; width: 200px; height: 100px; }
10         div { display: block; border: 1px solid black; height: 500px; width: 100%; }
11         #input { width: 80px; height: 200px; display: block; }
12     </style>
13     <script id="others_zepto_10rc1" type="text/javascript" class="library" src="/js/sandbox/other/zepto.min.js"></script>
14 </head>
15 <body>
16     <div id="list" style="background: gray;">
17     </div>
18     <div id="wrapper">
19         <div id="d">
20             <input type="text" id="input" />
21         </div>
22     </div>
23 </body>
24 <script type="text/javascript">
25     var list = $('#list');
26     var d = $('#d');
27     var input = $('#input');
28     input.tap(function (e) {
29         input.val(new Date().getTime());
30     });
31     list.tap(function (e) {
32         //        $('input').css("pointer-events", "none");
33         list.hide();
34         setTimeout(function () {
35             list.show();
36             //            $('input').css("pointer-events", "auto");
37         }, 1000);
38     });
39     d.tap(function () {
40         d.append($('<p>div tap</p>'));
41     });
42     
43 </script>
44 </html>

http://sandbox.runjs.cn/show/wub3i7fr

這裏各位請使用手機訪問試試，如今這個網頁有幾個問題：

我點擊灰色區域會將灰色區域隱藏，灰色區域消失，一秒後重現，因而可能發生兩個問題：

① 某些瀏覽器中後面的div tap事件會觸發

② input元素一定得到焦點

div事件有些時候咱們能夠經過阻止冒泡處理，可是input這個問題基本不可調和，由於其得到焦點彈出鍵盤十分惱火

元素咱們是經過一個蒙版解決，先咱們來看看是否能夠給咱們的容器wrapper加上一個css屬性解決呢？？？

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 6     <meta content="telephone=no" name="format-detection" />
 7     <meta name="apple-mobile-web-app-capable" content="yes" />
 8     <style>
 9         #list { display: block; position: absolute; top: 100px; left: 10px; width: 200px; height: 100px; }
10         div { display: block; border: 1px solid black; height: 500px; width: 100%; }
11         #input { width: 80px; height: 200px; display: block; }
12     </style>
13     <script id="others_zepto_10rc1" type="text/javascript" class="library" src="/js/sandbox/other/zepto.min.js"></script>
14 </head>
15 <body>
16     <div id="list" style="background: gray;">
17     </div>
18     <div id="wrapper">
19         <div id="d">
20             <input type="text" id="input" />
21         </div>
22     </div>
23 </body>
24 <script type="text/javascript">
25     var list = $('#list');
26     var d = $('#d');
27     var input = $('#input');
28     input.tap(function (e) {
29         input.val(new Date().getTime());
30     });
31     list.tap(function (e) {
32         $('#wrapper').css("pointer-events", "none");
33         list.hide();
34         setTimeout(function () {
35             $('#wrapper').css("pointer-events", "auto");
36         }, 350)
37         setTimeout(function () {
38             list.show();
39         }, 1000);
40     });
41     d.tap(function () {
42         d.append($('<p>div tap</p>'));
43     });
44     
45 </script>
46 </html>

http://sandbox.runjs.cn/show/1wldtigt

能夠看到，咱們解決了點透的問題，因此有我有這些厲害的同事是很幸運的，有了這個方案，咱們就能夠在zepto中封裝咱們的代碼了

在tap點擊後爲容器標籤設置該屬性，350ms後取消便可，這樣能夠最大程度的包裝代碼不會修改

可是這個方案不是沒有問題：

最重要的是他依然有個時間閥值，通過我測試時350ms，意思是我使用tap事件後會有350ms的事件某些區域徹底沒法點擊

那麼容器所佔區域小的話還可接受，若是所佔區域大的話就是噩夢，由於用戶的點擊明顯會出現阻力

而後，畢竟會點透的狀況不是多數，因此此方案仍有缺陷，最後仍是得動一些其它力氣

後續

此次tap的研究先到這裏，咱們咱們有機會再繼續，因此回到咱們今天的主題吧！！！

瀏覽器檢測手機是否安裝app

這個需求初次提出其實讓人感受很爲難，至少我是很爲難的，由於壓根就找不到辦法嘛，通過週四晚上的糾結，基本就放棄了

次日也給老大說搞不定，老大基本也仍爲搞不定，可是這個需求是最大的老大提出的，因此跟進力度很強，這不是，過了沒多久就來了個vip（表明級別高......）

哥來了就寄出了法寶，先是一個國外的網站，而後就是咱們傳說中的淘寶了

PS：說實話，雖然電腦的事情與淘寶無關，可是老夫如今對淘寶仍是比較怨念的！！！！

淘寶不愧是業內技術領先的技術團隊，咱們來看看他的網站：

其它沒必要關注，咱們就看這個「當即打開」！！！各位知道手機上這個當即打開幹了什麼嗎？

這個傢伙不得了，若是按照了app 的話點擊當即打開就會打開app，若是沒有按照的話竟然跳向了市場鏈接

在某些時候這個對等與他有一個a標籤會根據需求而得到不一樣的值！！！

可是，咱們知道打開app是安裝了app纔會打開的，否則就是個死連接，死連接必然打不開！因而帶着好奇帶着敬畏，咱們打開了淘寶的js庫

PS：淘寶壓縮混淆後js確實很小，並且沒有使用類庫哦

各位看官直接找到這個目錄吧，因而進去咱們一步步跟進去：

① 點擊點

雖然小生本領不行，可是讀代碼仍是入門的，因此國內一旦出了什麼心技術，基本很快就能普及，這就是國內的技術，不是作不出來，就是不知道作出了是什麼樣子

一旦你作出了，那麼我也能作出了，而且作的更好，因此咱們缺少創新啊......

咱們找到了入口，因而進入install方法

② install

這羣代碼一目瞭然，讀到這裏，其實能夠很輕易的猜想實現方案了！

③ 猜想實現方案

因而我就開始猜想，猜想的結果就是：

若是安裝app 的狀況下，打開連接會讓window失去焦點，因而清除了計時器
若是沒有安裝app計時器裏面的代碼會執行，因此跳向了app市場

固然，最後發現一個問題：手機上網頁沒法失去焦點，這只是我本身的判斷（沒法失去焦點），因此最後也放棄了這個猜想

④ 陷入僵局

因而思路再次陷入僵局，任務不能實現，可是將淘寶代碼搞下來，也沒法實現，最後就開始以各類漫無目的，垃圾的辦法搞，終於不注意成功了一次！！！

無心義的成功是由於將定時器設置的很大......

⑤ 解決方案

最後發現了方案，安裝app 的狀況下，網頁會進入後臺打開app！！！

網頁進入後臺後會掛起js 的執行，可是這個期間有600-1000ms的時間js仍然會執行

淘寶執行的閥值是600，咱們大概是900，因此一直在原地踏步了好久

這個網頁進入後臺卻成了解決問題的關鍵，因而新鮮代碼出來了:

 1 var log = function (msg) {
 2     $('body').before('<div class="log">' + msg + '</div>');
 3 };
 4 var timeout, t = 1000, hasApp = true;
 5 setTimeout(function () {
 6     if (hasApp) {
 7         log('安裝了app');
 8         $('#dl_app').hide();
 9 
10     } else {
11         log('未安裝app');
12         $('#dl_app').show();
13         log('開始強制下載');
14         forceDownload();
15     }
16 }, 2000)
17 function testApp() {
18     var t1 = Date.now();
19     var ifr = $('<iframe id="ifr"></iframe>')
20     ifr.attr('src', '您們app的協議');
21     $('body').append(ifr);
22     timeout = setTimeout(function () {
23         try_to_open_app(t1);
24     }, t);
25 }
26 function try_to_open_app(t1) {
27     var t2 = Date.now();
28     if (!t1 || t2 - t1 < t + 200) {
29         hasApp = false;
30     }
31 }
32 testApp();