「俗話說不會寫文章的程序媛不是一個好的公衆號小編」前端
通常公司都有本身的app,而app是須要不斷有新用戶涌入才能持續運營,達到不錯的收入。就須要使用這種方式進行引入新的用戶到native app中。ios
一些內容在網頁端體驗很差,或者一些功能須要app內才能實現,以及能留住用戶,就須要將用戶引入app中。 點擊網頁按鈕打開app並自動跳到相應頁面。瀏覽器
首先,這個方法僅適用於移動端h5頁面,通常的智能機都是可使用的。這裏使用的是es5的代碼模式,容易理解。app
用漫畫的形式爲你們介紹這個小知識但願你們能夠更好理解。dom
網頁端經過訪問app協議打開,其實利用的是app的url scheme方式。url
若是有安裝app,那麼協議請求便會被app檢測到。app打開期間,app界面會覆蓋h5網頁。因此訪問打開app地址放在下載後面延遲執行,用戶就看不到下載的跳轉了。es5
若是未安裝app,那協議請求就不會有任何效果。便會繼續執行,直到跳轉頁面下載。3d
首先要經過UA判斷當前瀏覽器UA 並轉大寫。用來分別針對安卓和ios機型作2種不同的處理。orm
根據UA判斷的安卓仍是ios機型,分別作處理。cdn
安卓設備:
經過隱藏iframe方式實現。iframe中請求協議啓動地址,建立iframe須要時間,延遲一點時間,將iframe加入dom,產生請求。
若是app已安裝,瀏覽器就會彈出一個提示框,問用戶是否啓動app。
若是未安裝,瀏覽器等待一秒後就會去下載。
之因此使用iframe,爲了防止location跳轉後,js請求中斷,跳入空白頁。
代碼中的Data.now()-t < 1200,只因此是1200,其實也是一個估計值,爲了大部分解決一些已經安裝的app,1秒後仍是會跳轉下載。由於打開app的瞬間,瀏覽器界面被app界面覆蓋。但js未中止執行,延遲後仍是會在後臺打開下載頁,只是被遮擋了。
IOS設備:
首先,ios瀏覽器已經不支持再使用iframe了,因此上面的方式不適合用在ios上。
所以,這裏只能採用location的方式。
若是安裝了app,ios瀏覽器打開app協議前就會彈出個框,提示是否打開。
若是沒有安裝,就不會彈出這個提示。
歡迎你們關注咱們的公衆號:Web前端Talk