Android WebView与JS交互

222 阅读1分钟

java和js交互

java调JS

1.loadUrl

2.evaluateJavascript (>=anroid4.4)

JS调java

1.addJavascriptInterface

项目代码

html文件放在 /src/main/assets/testJs.html

<html>
<head>
    <title>js调用android原生代码</title>
    <meta http-equiv="Content-Type" content="text/html;charset=gb2312">
    <meta id="viewport" name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,minimal-ui">
    <script type="text/javascript">
        function javaCallJsNoParams(){
             document.getElementById("content").innerHTML +=
                 "<br\>java调js无参";
        }

        <!--这里取到的是 android端传过来的数据-->
        function javaCallJsWithParams(data){
             document.getElementById("content").innerHTML +=
                 ("<br\>java调js有参:"+data);
        }

    </script>
</head>
<body>
<br/><br/>
<li><a onClick="window.testCalljava.jsCallJavaNoParams()">点击调用java代码</a></li>
<!--可以将android端传过来的数据,处理后,放在这里再传给android端-->
<li><a onClick="window.testCalljava.jsCallJavaWithParams('我是网页传出来的数据')">点击调用java代码并传递参数</a></li>
<br/>
<div id="content">内容显示</div>
</body>
</html>

java代码

public class MainActivity extends Activity {
    private static final String TAG = "MainActivity";
    private WebView mWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mWebView = findViewById(R.id.my_webview);
        WebSettings webSettings = mWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        mWebView.loadUrl("file:///android_asset/testJs.html");
        mWebView.addJavascriptInterface(new JsCallJavaInterface(this), "testCalljava");
    }


    public void callJsNoParam(View view) {
        String jsString = "javascript:javaCallJsNoParams()";
//        mWebView.loadUrl(jsString);
        mWebView.evaluateJavascript(jsString, null);//4.4以上可用 evaluateJavascript 效率高
    }

    public void callJsWithParam(View view) {
        mWebView.loadUrl("javascript:javaCallJsWithParams('" + "来自Android的参数" + "')");
    }

    class JsCallJavaInterface {
        private Context mContext;

        public JsCallJavaInterface(Context mContext) {
            this.mContext = mContext;
        }

        @JavascriptInterface
        public void jsCallJavaNoParams() {
            Toast.makeText(mContext, "js调用Android无参", Toast.LENGTH_SHORT).show();
        }

        @JavascriptInterface
        public void jsCallJavaWithParams(String data) {
            Toast.makeText(mContext, "js调用Android传递:" + data, Toast.LENGTH_SHORT).show();
        }
    }
}

布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="#00ffff"
        android:gravity="center"
        android:text="网页测试"
        android:textColor="#ffffff"
        android:textSize="30sp" />

    <WebView
        android:id="@+id/my_webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="60dp" />

    <Button
        android:layout_width="80dp"
        android:layout_height="40dp"
        android:layout_alignParentBottom="true"
        android:onClick="callJsNoParam"
        android:text="调js无参" />

    <Button
        android:layout_width="80dp"
        android:layout_height="40dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:onClick="callJsWithParam"
        android:text="调js有参" />

</RelativeLayout>