ele.me在IOS瀏覽器端啓動APP的技巧分析

ele.me在IOS瀏覽器端啓動APP的技巧分析

1. 巧妙利用後臺重定向，在schemes啓動時提示用戶打開，啓動不了APP時可以及時跳轉至下載頁面。
2. 避免報錯頁面的出現以及用戶還沒來的及選擇就跳轉到下載頁面。
3. 在沒有universal link時，此種方法是一種很好的解決方案。

---

附上ele源碼

<script type="text/javascript">
    "use strict";
    window.onload = function() {
        //嘗試schemes碼打開app
        location.href = "eleme://";  
        //判斷andriod仍是ios仍是微信
        var e = window.navigator.userAgent,
        i = "",
        n = (new UParams).from;
        if(/iphone|iPad/i.test(e) && /micromessenger/i.test(e))
            return void(location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=me.ele");
        if(/Android/i.test(e) && /micromessenger/i.test(e))
            return void document.write('\n      <div class="wechat-warning">\n        <img src="//static11.elemecdn.com/eleme/activities/dist/download/tip.0ccdda.png" alt="下載應用請點擊右上角按鈕選擇［在瀏覽器中打開］">\n        <div>下載應用請點擊右上角按鈕<br/>選擇［在瀏覽器中打開］</div>\n      </div>\n    ');
        if(!/iPhone|iPad/.test(navigator.userAgent))
            return void(location.href = "//uxmgnt.ele.me/download/" + (n ? n : "eleme"));
        //後臺重定向處理（關鍵步驟）
        i = "//uxmgnt.ele.me/download/eleme"; 
        //ajax請求，懷疑是統計下載量
        var o = new XMLHttpRequest; //
        o.open("POST", location.origin.replace(/h\./, "mainsite-restapi.") + "/ugc/download/channels/ios"),
        o.withCredentials = !0;
        var t = {
            source: n || "",
            is_web: !0
        };
        o.onload = o.onerror = function() {
        //觸發後臺重定向
            i && (location.href = i)
        },
        o.send(JSON.stringify(t))
    };
    
//  withCredentials解惑
//  若是須要讀取讀取cookie：
//  須要配置參數：Access-Control-Allow-Credentials:true
//  同時在xhr發起請求的時候設置參數withCredentials爲true：
//  var xhr = new XMLHttpRequest(); ; 
//  xhr.open('GET', 'http: //b.com/cros/ajax.php', true);
//  xhr.withCredentials = true;
//  xhr.onload = function () {          
//    alert(xhr.response);//reposHTML;
//  };  
//  xhr.onerror = function () {
//   alert('error making the request.');
//  };
//  xhr.send();
//  如：Access-Control-Allow-Origin:http://a.com表示容許a.com下的域名跨域訪問；
</script>

---

原文來至：http://www.cnblogs.com/chunlei36/articles/6287148.html