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);//方法名能夠隨便起
    }