← Android WebView JavaScript 交互 Android 4.4 后 WebView 的改变 →

WebView APP 调用 JavaScript 方法

Android WebView APP 调用 HTML 中的 JavaScript 方法很简单，只要调用方法 evaluateJavascript()

ms_webview.evaluateJavascript()(script, new ValueCallback<String>() {
    @Override
     public void onReceiveValue(String value) {
        // code here
    }
});

注意

Android API 19+ 也就是 Android 4.4+ 以上版本才支持

一定要添加下面这句

ms_webview.setWebChromeClient(new WebChromeClient());

不然按钮等无法点击

Android WebView APP 调用 JavaScript 方法

创建一个空的 Android 项目 cn.twle.android.WebViewCall

修改 AndroidManifest.xml 添加网络权限

<uses-permission android:name="android.permission.INTERNET" />

在 app 上点右键，然后选择 Folder - Assets Folder 创建 assets 目录，并在该名录下创建一个 HTML 文件 demo_h.html

<!DOCTYPE html>
<meta charset="utf-8" />
<title>APP 调用 JavaScript 代码</title>
<script>
    function goto_home()
    {
        if(confirm("访问简单教程?"))
        {location.href = "https://www.twle.cn";}
        else alert("取消访问!");
    }
</script>
<title>APP 调用 JavaScript 代码</title>
<p>点击按钮，将会跳转到 https://www.twle.cn</p>
<pre>
function goto_home()
{
    if(confirm("访问简单教程?"))
    {location.href = "https://www.twle.cn";}
    else alert("取消访问!");
}
</pre>

或者直接使用我们的网址 https://www.twle.cn/static/i/android/demo_h.html

修改 activity_main.xml 添加一个 WebView

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:padding="5dp"
    android:layout_width="match_parent"    
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button 
        android:id="@+id/btn_call"
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:text="调用 HTML 中的方法"/>

    <WebView
        android:id="@+id/ms_webview"
        android:layout_width="match_parent" 
        android:layout_height="match_parent" />
</LinearLayout>

修改 MainActivity.java 通过 evaluateJavascript() 调用 HTML 中的 JavaScript 方法

package cn.twle.android.webviewcall;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.webkit.ValueCallback;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    private WebView ms_webview;

    //private static final String SITE_URL = "file:///android_asset/demo_h.html"
    private static final String SITE_URL = "https://www.twle.cn/static/i/android/demo_h.html";

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

        ms_webview = (WebView) findViewById(R.id.ms_webview);

        Button btn_call = (Button) findViewById(R.id.btn_call);

        btn_call.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View view ) {
                ms_webview.evaluateJavascript("goto_home()",new ValueCallback<String>() {
                    @Override
                    public void onReceiveValue(String value) { }
                });
            }
        });

        WebSettings webSettings = ms_webview.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setDefaultTextEncodingName("UTF-8");

        ms_webview.setWebChromeClient(new WebChromeClient());
        ms_webview.loadUrl(SITE_URL);
    }
}

← Android WebView JavaScript 交互 Android 4.4 后 WebView 的改变 →

WebView APP 调用 JavaScript 方法

注意

Android WebView APP 调用 JavaScript 方法

Android 基础教程