• Webview 与h5的交互


    步骤:H5代码
     
    <html>
     
    <head>
     
    <meta charset="UTF-8">
     
    <title>交互Demo</title>
     
    <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport">
     
    </head>
     
     
     
    <body>
     
    getUserinfo:<br>
     
     
     
    <input value="立即报名" type="button" onClick="baoming();" /><br>
    <input value="详细信息" type="button" onClick="baoming1();" /><br>
    <input value="你好" type="button" onClick="baoming2();" /><br>
     
     
     
    <script>
     
    /*var rs=window.om.getUserinfo();
     
    document.getElementById('userinfo').innerHTML=rs;*/
     
    var rs=window.demo.getUserinfo();
     
    var obj = eval ("(" + rs + ")");
     
    if(obj.status){
     
    document.getElementById('userinfo').innerHTML=obj.data.nickname;
     
    }
     
     
    function baoming(){
     
    if(window.demo.needLogin()){
     
    location.href='http://www.cnblogs.com/greatverve/archive/2012/03/08/android-assets.html';
     
    }
     
    }
     
    function baoming1(){
     
    if(window.demo.getUserinfo()){
     
    location.href='http://www.cnblogs.com/greatverve/archive/2012/03/08/android-assets.html';
     
    }
    }
    function baoming2(){
     
    if(window.demo.getData("红红火火")){
     
    location.href='http://www.cnblogs.com/greatverve/archive/2012/03/08/android-assets.html';
     
    }
     
    }
     
    </script>
     
    </body>
     
    </html>
     
    android 端需要写的代码
     
    1:在XML 布局声明一个WebView
    2:通过 loadUrl 加载本地文件或者网络文件
    3:设置可以使用JavaScript,代码如下:
    web_main.getSettings().setJavaScriptEnabled(true); //加上这句话才能使用javascript方法
    具体安卓调用H5 的格式是: web_main.loadurl("javaScript:方法名");(方法名来自于H5 的方法名)
    注意:安卓调用H5必须在主线程进行.
     
    H5 调用安卓的方法::web_main.addJavascriptInterface(new PayJavaScriptInterface(), "demo");
    后面有个参数:第一个是自定义类的实例化,第二个参数是自定义的名字(名字随便起),这个字段是为了让H5调用安卓的时候用的,//H5 调用Android 的格式 Window.第二个参数.方法名
    4:定义一个类,类名叫PayJavaScriptInterface,里面有三个方法:分别是:getUserinfo,needLogin,getData,代码如下:
     
    final class PayJavaScriptInterface {
     
     
    PayJavaScriptInterface() {
     
    }
     
    @JavascriptInterface
     
    public String getUserinfo() {
     
     
    Toast.makeText(getApplicationContext(),"报名",Toast.LENGTH_LONG).show();
     
    return "dd";
    }
     
    @JavascriptInterface
    public boolean needLogin() {
     
    Toast.makeText(getApplicationContext(),"登陆",Toast.LENGTH_LONG).show();
     
    return false;
    }
     
    @JavascriptInterface
    public void getData(String name){
     
    Toast.makeText(getApplicationContext(),name,Toast.LENGTH_LONG).show();
    }
     
    }
     
    //注意 自定义类,类名自己起,类里面的方法要与H5里面调用的方法名一致(可以和H5商量着起)
    5:通过web_main.addJavascriptInterface让H5调用Android的方法,其中的两个参数的意思分别是:
    第一个参数:定义类的实例化
    第二个参数:自定义名字,让H5来调用安卓的方法
    代码如下:web_main.addJavascriptInterface(new PayJavaScriptInterface(), "demo");
     
    在H5中调用安卓的方法是:window.第二个参数(自定义名字).方法名
    案例如下:
    window.demo.needLogin()
     
    Android 调用H5的方法:
    格式如下:控件名.loadUrl("javascript:方法名")
    代码如下:web_main.loadUrl("javascript:getData()");
     
    声明:Android 调用H5 必须在主线程中调用,
     
    方法1:
    使用Handler代码如下:
     
    //主线程
    Handler handler = new Handler(){
     
    @Override
    public void handleMessage(Message msg) {
    super.handleMessage(msg);
     
    switch (msg.what){
     
    case 1:
    web_main.loadUrl("javascript:baoming3()"); //aa是js的函数test()的参数
    break;
    }
    }
    };
     
    //发送消息到主线程的方法
     
    Message msg = handler.obtainMessage();
    msg.what = 1;
    handler.sendMessage(msg);
    方法2:控件名.post(实例化线程)
    web_main.post(new Runnable() {
    @Override
    public void run() {
    web_main.loadUrl("javascript:baoming3()"); //aa是js的函数test()的参数
    }
    });
     
  • 相关阅读:
    $("*")选取所有的元素
    $("p") 选取多有的元素
    $(".test")选取所有class为test的元素
    $("#test")选取id为test的元素
    数据分析工具的深度对比:FineBI vs PowerBI
    Kafka是如何处理Netflix每天2万亿条消息的?
    新补丁更新(RU和RUR),新的版本(Release 18和19)
    Cinder 的 I/O QoS
    Web前端绘制0.5像素的几种方法
    Web前端绘制0.5像素的几种方法
  • 原文地址:https://www.cnblogs.com/lizhanqi/p/6020642.html
Copyright © 2020-2023  润新知