WebView与JS之间的交互

最新推荐文章于 2024-06-05 20:11:08 发布

ItVerySmallBug

最新推荐文章于 2024-06-05 20:11:08 发布

阅读量340

点赞数 1

分类专栏： android 文章标签： webview javascript

本文链接：https://blog.csdn.net/meizivskai/article/details/76407580

版权

android 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

WebView与JS之间的交互

WebView与JS之间的交互分几步：

1.初始化WebView，开启与JS的交互

2.加载html

3.双方定义接口函数，约定接口标签

4.互相调用

案例：

MainActivity.java

package com.meizivskai.haihang;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {


    private WebView mWebView;
    private TextView tvContent;
    private Button btnClick;

    @SuppressLint("JavascriptInterface")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWebView = (WebView) findViewById(R.id.web_view);

        //开启与JS之间的交互
        mWebView.getSettings().setJavaScriptEnabled(true);

        // 从assets目录下面的加载html
        mWebView.loadUrl("file:///android_asset/test.html");
        mWebView.addJavascriptInterface(this, "test");
        tvContent = (TextView) findViewById(R.id.tv_content);
        btnClick = (Button) findViewById(R.id.btn_click);

        btnClick.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                // 无参数调用
                mWebView.loadUrl("javascript:actionFromNative()");
                // 传递参数调用
                mWebView.loadUrl("javascript:actionFromNativeWithParam(" + "'come from Native'" + ")");
            }
        });
    }


    /**
     * 与JS之间定义的接口
     */
    @android.webkit.JavascriptInterface
    public void actionFromJs() {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                Toast.makeText(MainActivity.this, "js调用了Native函数", Toast.LENGTH_SHORT).show();
                String text = tvContent.getText() + "\njs调用了Native函数";
                tvContent.setText(text);
            }
        });
    }

    /**
     * 与JS之间定义的接口
     */
    @android.webkit.JavascriptInterface
    public void actionFromJsWithParam(final String str) {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                Toast.makeText(MainActivity.this, "js调用了Native函数传递参数：" + str, Toast.LENGTH_SHORT).show();
                String text = tvContent.getText() + "\njs调用了Native函数传递参数：" + str;
                tvContent.setText(text);
            }
        });

    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context="com.meizivskai.haihang.MainActivity">

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

    <TextView
        android:id="@+id/tv_content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <Button
        android:id="@+id/btn_click"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Native调用js函数" />

</LinearLayout>

assets目录下的test.html

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script type="text/javascript">
    function actionFromNative(){
         document.getElementById("log_msg").innerHTML +=
             "<br\>Native调用了js函数";
    }

    function actionFromNativeWithParam(arg){
         document.getElementById("log_msg").innerHTML +=
             ("<br\>Native调用了js函数并传递参数："+arg);
    }


    </script>
</head>
<body>
<p>WebView与Javascript交互</p>
<div>
    <button onClick="window.test.actionFromJs()">点击调用Native代码</button>
</div>
<br/>
<div>
    <button onClick="window.test.actionFromJsWithParam('come from Js')">点击调用Native代码并传递参数</button>
</div>
<br/>
<div id="log_msg">调用打印信息</div>
</body>
</html>

PS：希望可以帮助大家。。。