如何在安卓应用中调用外部JavaScript代码？

安卓调用外部JS

在Android开发中，有时需要与网页中的JavaScript进行交互，这通常通过WebView组件实现，以下是详细的步骤和代码示例：

一、准备工作

1、添加WebView依赖：确保在项目的build.gradle文件中添加了WebView的依赖。

dependencies {
    implementation 'androidx.webkit:webkit:1.4.0'
}

2、布局文件：在res/layout目录下创建一个布局文件（例如activity_main.xml），并添加一个WebView组件。

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

二、加载网页并启用JavaScript支持

在MainActivity.java中，加载网页并启用JavaScript支持。

package com.example.myapp;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class MainActivity extends AppCompatActivity {
    private WebView webView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = findViewById(R.id.webView);
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true); // 启用JavaScript
        webView.loadUrl("https://www.example.com");
        webView.setWebViewClient(new WebViewClient() {
            public void onPageFinished(WebView view, String url) {
                // 页面加载完成后可以执行一些操作，比如调用JS函数
                webView.loadUrl("javascript:alert('Hello from Android!')");
            }
        });
    }
}

三、从Android调用JavaScript函数

如何在安卓应用中调用外部JavaScript代码？

可以通过evaluateJavascript方法来调用JavaScript函数。

webView.evaluateJavascript("javascript:yourFunctionName();", new ValueCallback<String>() {
    @Override
    public void onReceiveValue(String value) {
        // 处理返回值
    }
});

四、从JavaScript调用Android方法

为了从JavaScript调用Android的方法，需要使用@JavascriptInterface注解。

public class WebAppInterface {
    private Context mContext;
    WebAppInterface(Context c) {
        mContext = c;
    }
    @JavascriptInterface
    public void showToast(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }
}

然后在MainActivity中添加这个接口：

webView.addJavascriptInterface(new WebAppInterface(this), "Android");

在HTML文件中，可以通过以下方式调用Android方法：

<button onclick="showAndroidToast('Hello Android')">Show Toast</button>
<script type="text/javascript">
    function showAndroidToast(toast) {
        Android.showToast(toast);
    }
</script>

五、完整示例代码

activity_main.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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

MainActivity.java

package com.example.myapp;
import android.content.Context;
import android.os.Bundle;
import android.webkit.ValueCallback;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
    private WebView webView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = findViewById(R.id.webView);
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true); // 启用JavaScript
        webView.loadUrl("file:///android_asset/index.html"); // 加载本地HTML文件
        webView.setWebViewClient(new WebViewClient() {
            public void onPageFinished(WebView view, String url) {
                // 页面加载完成后可以执行一些操作，比如调用JS函数
                webView.loadUrl("javascript:alert('Hello from Android!')");
            }
        });
        webView.setWebChromeClient(new WebChromeClient());
        webView.addJavascriptInterface(new WebAppInterface(this), "Android");
    }
    public class WebAppInterface {
        private Context mContext;
        WebAppInterface(Context c) {
            mContext = c;
        }
        @JavascriptInterface
        public void showToast(String toast) {
            Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
        }
    }
}

index.html (放在src/main/assets目录下)

如何在安卓应用中调用外部JavaScript代码？

<!DOCTYPE html>
<html>
<head>
    <title>My Web Page</title>
    <script type="text/javascript">
        function showAndroidToast(toast) {
            Android.showToast(toast);
        }
    </script>
</head>
<body>
    <button onclick="showAndroidToast('Hello Android')">Show Toast</button>
</body>
</html>