WebView与JS的简单交互-优快云博客

本文链接：https://blog.youkuaiyun.com/dong_junshuai/article/details/53761811

本文介绍如何在Android应用中嵌入HTML页面，并实现JavaScript与原生Android代码之间的相互调用。通过具体的代码示例，展示了如何加载HTML文件、启用JavaScript支持、调用JS方法及JS如何回调Java方法。

如今App里嵌套JS界面已经很普遍，是时候来了解JS与Android源代码的交互了。

1.Html,现在main下新建assets包，然后把html文件放在里面：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html:charset=gb2312">
    <script type="text/javascript">
        <!--无参数的方法-->
        function javacalljs(){
	        document.getElementById("content").innerHTML =
         "<br\>JAVA调用了JS的无参函数";
        }
        <!--有参数的方法-->
        function javacalljswith(arg){
	        document.getElementById("content").innerHTML =
         ("<br\>"+arg);
        }
    </script>
</head>
<!--下面为body-->
<body>
红线下面的为WebView的内容<br/>
<h1><div id="content">显示内容（这个是一级标题）</div></h1>
<br/>
<input type="button" value="点击调用Java无参方法" onclick="window.android.startFunction()">
<br/>
<input type="button" value="点击调用Java有参方法" onclick="window.android.startFunction('这个是有参的方法')">
</body>

</html>

2.xml布局文件，这里布局很简单，直接上代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:padding="5dp"
    tools:context="visahall.cn.testjsandwebview.MainActivity">

    <Button
        android:id="@+id/btn1"
        android:text="点击调用JS无参方法"
        android:background="@color/colorAccent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <Button
        android:layout_marginTop="5dp"
        android:id="@+id/btn2"
        android:text="点击调用JS有参方法"
        android:background="@color/colorAccent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/btn1"/>


    <TextView
        android:id="@+id/textView"
        android:layout_below="@id/btn2"
        android:layout_marginTop="3dp"
        android:background="#FF0000"
        android:layout_width="match_parent"
        android:layout_height="2dp" />

    <WebView
        android:id="@+id/webView"
        android:layout_below="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></WebView>

</RelativeLayout>

3.MainActivity:

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    private Button btn1;
    private Button btn2;
    private WebView mWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        btn1 = (Button) findViewById(R.id.btn1);
        btn1.setOnClickListener(this);
        btn2 = (Button) findViewById(R.id.btn2);
        btn2.setOnClickListener(this);
        mWebView = (WebView) findViewById(R.id.webView);
        // 启用javascript
        mWebView.getSettings().setJavaScriptEnabled(true);
        // 从assets目录下面的加载html
        mWebView.loadUrl("file:///android_asset/index.html");
        mWebView.addJavascriptInterface(MainActivity.this,"android");

    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.btn1:
                mWebView.loadUrl("javascript:javacalljs()");
                break;
            case R.id.btn2:
                mWebView.loadUrl("javascript:javacalljswith('Java调用JS带参方法')");
                break;
        }
    }


    /**
     * JS调用java的方法
     */
    //由于安全原因 需要加 @JavascriptInterface
    //无参
    @JavascriptInterface
    public void startFunction(){
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                Toast.makeText(MainActivity.this,"hello",Toast.LENGTH_SHORT).show();
            }
        });
    }

    //带参方法
    @JavascriptInterface
    public void startFunction(final String text){
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                new AlertDialog.Builder(MainActivity.this).setMessage(text).show();
            }
        });
    }
}

其实很简单，就是一个方法的调用，只是调用的方法不同而已。

Demo下载