如何在Android WebView页面加载完成前注入JavaScript类

要让你的网站在WebView中正常运行，必须在页面脚本执行前注入MySuperClass类，具体实现步骤如下：

1. 准备JavaScript类代码 #

把Chrome扩展里的MySuperClass逻辑提取出来，整理成可注入的代码。可以直接写成字符串，或者放到assets/js/mysuperclass.js文件中（更便于维护）。

示例JS代码（类对象形式）：

var MySuperClass = {
    updateSomething: function() {
        // 原Chrome扩展中的方法实现
        console.log("updateSomething 被调用");
    },
    somethingElse: function(data) {
        // 原Chrome扩展中的方法实现
        console.log("somethingElse 被调用，参数：" + data);
    }
};

2. 修改Android代码注入JS #

在你的MainActivity中，添加JS注入逻辑，关键是在页面开始加载时注入，确保网站脚本执行前MySuperClass已存在。

方式一：直接用字符串注入

修改WebViewClient，重写onPageStarted方法：

public class MainActivity extends AppCompatActivity {

    // 定义要注入的JavaScript代码
    private static final String MY_SUPER_CLASS_JS = "var MySuperClass = {" +
            "updateSomething: function() {" +
            "   console.log('updateSomething 被调用');" +
            "   // 替换为你扩展中的实际逻辑" +
            "}, " +
            "somethingElse: function(data) {" +
            "   console.log('somethingElse 被调用，参数：' + data);" +
            "   // 替换为你扩展中的实际逻辑" +
            "}" +
            "};";

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

        WebView myWebView = findViewById(R.id.webview);
        WebSettings webSettings = myWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setDomStorageEnabled(true);
        webSettings.setSupportMultipleWindows(true);
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);

        myWebView.setWebViewClient(new WebViewClient() {
            @Override
            public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
                // 错误处理逻辑
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                Log.d("WebView", "页面加载完成：" + url);
                super.onPageFinished(view, url);
            }

            // 关键：页面开始加载时注入JS
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                // 根据API版本选择注入方式
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
                    view.evaluateJavascript(MY_SUPER_CLASS_JS, null);
                } else {
                    view.loadUrl("javascript:" + MY_SUPER_CLASS_JS);
                }
            }

            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                Log.d("WebView", "点击链接：" + url);
                return super.shouldOverrideUrlLoading(view, url);
            }
        });
        myWebView.loadUrl("https://mysiteurl.com/");
    }
}

方式二：从assets文件加载JS（推荐，代码量大时更易维护）

先在assets目录下创建js/mysuperclass.js文件，放入你的JS代码，然后添加读取方法：

private String loadJSFromAssets() {
    try {
        InputStream is = getAssets().open("js/mysuperclass.js");
        int size = is.available();
        byte[] buffer = new byte[size];
        is.read(buffer);
        is.close();
        return new String(buffer, StandardCharsets.UTF_8);
    } catch (IOException e) {
        e.printStackTrace();
        return "";
    }
}

然后在onPageStarted中替换为：

@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
    super.onPageStarted(view, url, favicon);
    String jsCode = loadJSFromAssets();
    if (!jsCode.isEmpty()) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            view.evaluateJavascript(jsCode, null);
        } else {
            view.loadUrl("javascript:" + jsCode);
        }
    }
}

3. 验证效果 #

开启WebView调试（你已添加WebView.setWebContentsDebuggingEnabled(true);），在电脑Chrome浏览器中打开chrome://inspect，找到你的WebView实例，打开DevTools后在控制台输入MySuperClass，确认对象存在，调用MySuperClass.updateSomething()测试是否正常执行。

内容的提问来源于stack exchange，提问作者Maco