Android WebView通过JS调用@JavascriptInterface方法实现视频点击回调

嘿，你已经走对路子啦！我来帮你把整个实现流程梳理得更清晰，补充一些关键细节和注意事项，方便你或者其他有同样需求的开发者参考：

核心实现步骤 #

1. 配置WebView的基础设置 #

首先要确保WebView开启了JavaScript支持，这是JS和Java交互的前提，你已经做了这一步，这里补充一些常用的必要设置：

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_download);
    webView = findViewById(R.id.web_view_facebook);
    
    // 开启JavaScript支持（必须）
    webView.getSettings().setJavaScriptEnabled(true);
    // 开启DOM存储，部分网页的交互依赖这个
    webView.getSettings().setDomStorageEnabled(true);
    // 允许JS打开新窗口（如果网页有相关需求）
    webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
    // 启用缓存（可选，根据业务需求调整）
    webView.getSettings().setAppCacheEnabled(true);
}

2. 创建带@JavascriptInterface注解的Java方法 #

Android 4.2（API 17）之后，必须给要被JS调用的方法添加@JavascriptInterface注解，否则JS无法访问该方法。我们可以封装一个专门的交互类，也可以直接在Activity里实现（但封装类更清晰）：

public class VideoInteractionInterface {
    private Context mContext;
    private WebView mWebView;

    public VideoInteractionInterface(Context context, WebView webView) {
        mContext = context;
        mWebView = webView;
    }

    // 被JS调用的视频处理方法，必须加@JavascriptInterface
    @JavascriptInterface
    public void processVideo(String videoUrl) {
        // 这里写视频被点击后的逻辑：比如跳转播放器、下载视频、显示弹窗等
        // 注意：这个方法是在后台线程执行的，如果要更新UI，必须切换到主线程
        ((Activity) mContext).runOnUiThread(() -> {
            Toast.makeText(mContext, "视频被点击，链接：" + videoUrl, Toast.LENGTH_SHORT).show();
            // 示例：跳转到自定义播放器页面
            Intent intent = new Intent(mContext, VideoPlayerActivity.class);
            intent.putExtra("VIDEO_URL", videoUrl);
            mContext.startActivity(intent);
        });
    }
}

3. 将Java接口绑定到WebView #

在WebView配置完成后，把我们的交互类绑定到WebView上，同时指定一个JS端可以调用的对象名（比如AndroidVideoHandler）：

// 绑定接口到WebView，JS端将通过"AndroidVideoHandler"这个名称调用方法
webView.addJavascriptInterface(new VideoInteractionInterface(this, webView), "AndroidVideoHandler");

4. 网页端JavaScript实现点击回调 #

在网页中，给视频元素绑定点击事件，触发时调用我们绑定的Android方法即可：

// 假设网页中的视频标签是<video class="video-item" src="https://example.com/video.mp4"></video>
document.querySelectorAll('.video-item').forEach(video => {
    video.addEventListener('click', function() {
        // 调用Android端的processVideo方法，传入当前视频的链接
        AndroidVideoHandler.processVideo(this.getAttribute('src'));
    });
});

关键注意事项 #

• 线程问题：被@JavascriptInterface标注的方法是在后台线程执行的，如果需要更新UI（比如弹Toast、跳转页面），一定要用runOnUiThread切换到主线程，否则会崩溃。
• 安全问题：不要暴露不必要的方法给JS，避免被恶意网页利用；如果加载的是第三方网页，要对传入的参数（比如videoUrl）做合法性校验。
• 权限配置：如果需要加载远程网页，记得在AndroidManifest.xml中添加网络权限：

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

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