H5前端與Android&ios的Js交互

其實H5前端與Android&ios的Js交互非常簡單，有兩種方法可以實現：

第一種：網址拼接式

　　我們可以在網址后面拼接一個type，以獲取地址上的type值來判斷app端是安卓終端還是ios終端

　　type值：Android或ios

　　例如：http://www.ceshi.com/index.html?type=Android

　　我們先解析地址，下面是我經常用到的解析地址方法：

 

 // 解析地址
function parseUrl(){
    var url=location.href;
    var i=url.indexOf('?');
    if(i==-1)return;
    var querystr=url.substr(i+1);
    var arr1=querystr.split('&');
    var arr2=new Object();
    for  (i in arr1){
        var ta=arr1[i].split('=');
        arr2[ta[0]]=ta[1];
    }
    return arr2;
}

 

　　我們調用解析方法也非常簡單，下面重點來了

//js交互   無參數時
var type= parseUrl().type;
if(type==Android){
    window.unionCar.creat();
}else if(type==ios){
    window.open("creat()");  //方法名可以隨便取
}

//js交互   有參數時
var type= parseUrl().type;
var id=1;
if(type==Android){
　　window.unionCar.creat(id);
 }else if(type==ios){ 
   window.open("creat("+id+")");  //方法名可以隨便取
}

注意：交互有參數時，ios方法需要將參數與方法拼接；

　　第二種：JS判斷APP適配式

 

　　我們可以直接引用下面這段

 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, //蘋果、谷歌內核
            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐內核
            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否為移動終端
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios終端
            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android終端或uc瀏覽器
            iPhone: u.indexOf('iPhone') > -1 , //是否為iPhone或者QQHD瀏覽器
            iPad: u.indexOf('iPad') > -1, //是否iPad
            webApp: u.indexOf('Safari') == -1 //是否web應該程序，沒有頭部與底部
        };
    }(),
    language:(navigator.browserLanguage || navigator.language).toLowerCase()
}

　　調用第二種呢也非常簡單

    //交互無參數時
    var id=1;
    if(browser.versions.ios){
        window.open("gokhdetails()");//方法名可以隨便起   
    }else if(browser.versions.android){
        window.unionCar.gokhdetails();//方法名可以隨便起
    }

     //交互有參數時
    var id=1;
    if(browser.versions.ios){
        window.open("gokhdetails("+id+")");//方法名可以隨便起  注：ios這里參數依舊需要字符串拼接   
    }else if(browser.versions.android){
        window.unionCar.gokhdetails(id);//方法名可以隨便起
    }

　　好了，H5前端與Android&ios交互先記錄到這里了，有更簡單的方法后在追加！

　　其實，小晴我呢是喜歡第二種，簡單方便！！！強推第二種！！圈地自萌\(^o^)/~（ps：第一次寫博客，如果有寫錯的地方，請多指教！）