Android与WebView的js交互

2018-09-29

WebView调用调用Java方法

允许WebView加载js

1	webView.getSettings().setJavaScriptEnabled(true);

编写js接口类

给webview添加js接口

1	webView.addJavascriptInterface(obj,interfaceName);

Android 调用js方法

使用loadUrl方法调用javascript

1 2	//jsString是要调用的js代码的字符串 webView.loadUrl(javascript:jsString);

实例

新建一个工程WebViewDemo

layout_main.xml代码如下。分为上下两个部分，上部分为WebView，下部分为Native。两部分均有一个输入框和按钮，输入文字点击按钮，就会在对面的输入框显示。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="vertical"
        android:layout_weight="1">

        <TextView
            android:textColor="@android:color/black"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="20dp"
            android:textStyle="bold"
            android:textSize="30dp"
            android:text="Native"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />


        <EditText
            android:id="@+id/et"
            android:layout_marginTop="20dp"
            android:hint="请输入内容"
            android:layout_width="match_parent"
            android:layout_height="100px" />

        <Button
            android:id="@+id/send"
            android:text="发送到WebView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>
</LinearLayout>

MainActivity实例化控件，并且允许WebView加载js
编写js接口类LbzJsInterface

public class LbzJsInterface {

    public static final String TAG = "LbzJsInterface";

    private JSBridge jsBridge;

    public LbzJsInterface(JSBridge jsBridge){
        this.jsBridge =jsBridge;
    }

    //这个方法不在主线程中
    @JavascriptInterface
    public void setValue(String value) {
        jsBridge.setTextViewValue(value);
        Log.e(TAG, "value=" + value);
    }

}

public interface JSBridge {

    void setTextViewValue(String value);

}

给webview添加js接口

1 2	webView.addJavascriptInterface(new LbzJsInterface(this), "lbzLauncher");

MainActivity实现JSBridge

@Override
public void setTextViewValue(final String value) {
    mHandler.post(new Runnable() {
        @Override
        public void run() {
            et.setText(value);
        }
    });
}

WebView要加载index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebView</title>
    <style type="text/css">
        body{
        background: #7F7F7F;
        }

        .btn{
        line-height: 50px;
        margin: 20px;
        background: #cccccc;
        }


    </style>
</head>

<body>
<h2>WebView</h2>

<div><input type="text" id="input" placeholder="请输入内容"></div>
<br/>
<div id="btn"><button >发送到Native</button ></div>
<script type="text/javascript">
    var btnEle = document.getElementById("btn");
    var inputEle = document.getElementById("input");

    btnEle.addEventListener("click",function(){
      var str = inputEle.value;
      if (window.lbzLauncher) {
        lbzLauncher.setValue(str);
      }else {
        alert(str);
      }
    });

    var remote = function(str){
      inputEle.value = str
    }
</script>


</body>

</html>

加载html

1	webView.loadUrl("file:///android_asset/index.html");

添加Native的监听事件，在监听中Android 调用js方法

send.setOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               String str =et.getText().toString();
               String jsCode="if(window.remote){window.remote('"+str+"')}";
               webView.loadUrl("javascript:"+jsCode);
           }
       });

Demo的运行状态

最后附上项目地址