zoukankan      html  css  js  c++  java
  • 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);//方法名可以随便起
        }
  • 相关阅读:
    CentOS6.5安装Scrapy
    CentOS6.5安装pip
    CentOS6.5 安装openssl
    curl不能支持https问题
    pip安装时遇到的问题集锦,持续更新!
    CentOS6.5安装python3.7
    IntelliJ IDEA 17 本地LicenseServer激活
    omnidb数据库web管理工具安装
    CentOS7安装Kubernetes1.18.1并使用flannel
    Portainer中文汉化
  • 原文地址:https://www.cnblogs.com/jdsm/p/10078881.html
Copyright © 2011-2022 走看看