Android与WebView的js交互

WebView调用调用Java方法

1. 允许WebView加载js

webView.getSettings().setJavaScriptEnabled(true);

2. 编写js接口类

3. 给webview添加js接口

webView.addJavascriptInterface(obj,interfaceName);

Android 调用js方法

使用loadUrl方法调用javascript

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

实例

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

3. MainActivity实例化控件，并且允许WebView加载js
4. 编写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);

}

5. 给webview添加js接口

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

6. MainActivity实现JSBridge

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

7. WebView要加载index.html

    
    
    



WebView




发送到Native

8. 加载html

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

9. 添加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);
            }
        });

10. Demo的运行状态

image

11. 最后附上项目地址