H5與安卓、IOS的交互，判斷微信、移動設備、安卓、ios

一、通過用戶代理可以判斷網頁當前所在的環境

var browser={
    versions:function(){
        var u = navigator.userAgent, app = navigator.appVersion;
        return {
            trident: u.indexOf('Trident') > -1, //IE
            presto: u.indexOf('Presto') > -1, //opera
            webKit: u.indexOf('AppleWebKit') > -1, //webkit
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //firefox
            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //mobile
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios
            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android or uc
            iPhone: u.indexOf('iPhone') > -1 , //iPhone QQHD
            iPad: u.indexOf('iPad') > -1, //iPad
            webApp: u.indexOf('Safari') == -1
        };
    }(),
    language:(navigator.browserLanguage || navigator.language).toLowerCase()
}
function iOS7() {
    if (/iP(hone|od|ad)/.test(navigator.platform)) {
        var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
        var vers = [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
        if(vers[0] >=7)
            return true;
        return false;
    }
    return false;
}

　H5與IOS的交互（javascriptBrige）　

if(browser.versions.ios){
    //js必寫
    var connectWebViewJavascriptBridge = function(callback){
        if (window.WebViewJavascriptBridge) {
            callback(WebViewJavascriptBridge)
        } else {
            document.addEventListener('WebViewJavascriptBridgeReady', function() {
                callback(WebViewJavascriptBridge)
            }, false)
        }

        if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
        window.WVJBCallbacks = [callback];
        var WVJBIframe = document.createElement('iframe');
        WVJBIframe.style.display = 'none';
        WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
        document.documentElement.appendChild(WVJBIframe);
        setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)

    };
    connectWebViewJavascriptBridge(function(bridge){
        bridge.registerHandler("ToAppPayCallback", function(data, responseCallback) {
            //  alert("原生返回結果"+data.appPayResult);
            $(".loading").css("display","none");
            if(data.appPayResult){
                window.location.href="./V1/pay/index.html?orderID="+orderID;
            }else{
                makeToast("支付失敗");
            }
            //alert("H5注冊的方法，原生執行");
            //alert("原生返回的結果為"+data.appPayResult);
            //alert(data);
            //alert(responseCallback);
        });
        submitOrder();
    })
    function submitOrder(){
        if(appPay){
            var params = {orderID:orderID,payWay:payWay};
            // Log.log("try to call ios native to add image");
            if (window.WebViewJavascriptBridge) {
                WebViewJavascriptBridge.callHandler('ToAppPay', params, function (response) {
                    //  Log.log("call native to upload image");
                    // alert(response);

                    /* if(response)*/
                });
            }
        }
    }
}　

　　H5與安卓做交互(通過攔吐司事件完成交互)

if(browser.versions.android ){
    //安卓的回調
    //var params = {orderID:orderID,payWay:payWay};
     var androidPayWay=$(".payWay").find("input:radio:checked").val();
    // alert(androidPayWay);
    if(androidPayWay==1){
         mAndroid.showToastWithParams(1,orderID);  //通過定義安卓的吐司傳給安卓兩個或者多個值
    }else if(androidPayWay==2){
        mAndroid.showToastWithParams(2,orderID);
    }
 }

　

//安卓的回調（安卓通過攔截，監聽到事件之后，可以執行js在全局下定義的函數）
function getAndroidResult(result,curOrderId){  //傳入的兩個值，為安卓的返回
    if(result==1){
       // window.location.href="./V1/pay/index.html?orderID="+curOrderId;
       window.location.href="./mySignUp.html";
    }else if(result==2){
        makeToast("支付失敗");
       // $(".payWayBtns").css("display","none");
        window.location.reload();

    }
}

名詞解釋

Navigator對象主要是包含有關客戶端瀏覽器的一些信息，Navigator對象是由JavaScript runtime engine自動創建的,但是目前沒有針對於navigator對象的公開標

准，不過目前所有瀏覽器都支持該對象。

Navigator目前主要用於區分安卓、ios、微信等

userAgent屬性是一個只讀的字符串，申明瀏覽器用於HTPP請求的用戶代理頭的值，簡單點說其實就是通過UserAgent可以取得瀏覽器類別、版本，客戶端操作系統等信息

//判斷瀏覽器的版本 判斷是否是微信瀏覽器
function is_weixin(){
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i)=="micromessenger") {
        return true;
    } else {
        return false;
    }
}

//判斷是否為移動設備
function isMobile(){
    if(/android/i.test(navigator.userAgent)){
        //document.write("This is Android'browser.");//這是Android平台下瀏覽器
        return true;
    }
    if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)){
        //document.write("This is iOS'browser.");//這是iOS平台下瀏覽器
        return true;
    }
    if(/Linux/i.test(navigator.userAgent)){
        //document.write("This is Linux'browser.");//這是Linux平台下瀏覽器
        return true;
    }
    if(/Linux/i.test(navigator.platform)){
        //document.write("This is Linux operating system.");//這是Linux操作系統平台
        return true;
    }
    if(/MicroMessenger/i.test(navigator.userAgent)){
        //document.write("This is MicroMessenger'browser.");//這是微信平台下瀏覽器
        return true;
    }
    return false;
}