Angular 8调用Android @JavascriptInterface方法失败的解决咨询

我帮你梳理下问题所在，主要是Android端的配置细节和Angular端的调用方式需要调整：

一、先确认Android端WebView的完整配置 #

你已经注册了Javascript接口，但还需要确保WebView开启了JavaScript支持，这是调用的基础。在初始化WebView时补充以下代码：

WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
// 如果你的Angular应用是HTTPS协议，而WebView加载的是HTTP资源，需要允许混合内容
// webSettings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);

另外检查JavascriptSupport类的上下文传递是否正确，确保Toast能正常获取到Activity实例：

public class JavascriptSupport {
    private Context context;

    public JavascriptSupport(Context context) {
        this.context = context;
    }

    @JavascriptInterface
    public void toast(String message) {
        Toast.makeText(context, message, Toast.LENGTH_SHORT).show();
    }
}

二、Angular端的正确调用方式 #

你当前的问题核心是没有正确获取到WebView挂载在全局window对象上的jsinterface实例，TypeScript默认不识别这个全局属性，调整方式如下：

1. 声明全局window类型（可选，更规范） #

在项目根目录新建src/typings.d.ts文件，添加类型声明让TypeScript识别window上的jsinterface：

interface Window {
  jsinterface: {
    toast(message: string): void;
  };
}

2. 在组件中正确调用方法 #

不要直接声明jsinterface变量，而是通过window对象获取，同时增加存在性判断（避免在浏览器开发环境报错）：

showtoast() {
  // 先判断环境，确保jsinterface存在再调用
  if (window.jsinterface) {
    window.jsinterface.toast("Hello");
  } else {
    console.log("jsinterface仅在Android WebView环境中可用");
  }
}

3. 确保调用时机正确 #

必须等WebView完全加载Angular应用后再调用，比如放在用户交互事件（如按钮点击）中，或者组件的ngAfterViewInit生命周期钩子中，避免页面未加载完成导致对象不存在。

三、额外排查步骤 #

如果还是失败，可以尝试：

• 在Angular中执行console.log(window.jsinterface)，查看模拟器控制台是否能打印出该对象；
• 确认Android端的@JavascriptInterface注解没有遗漏，这个注解是WebView识别方法的关键；
• 检查Angular应用的URL是否被WebView正确加载，确保没有跨域拦截问题（本地页面或同域资源默认允许调用）。

按以上步骤调整后，应该就能正常调用Android端的Toast方法了。

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