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;
}