Hybrid开发中如何拦截WebView加载的外部资源？

荣荣酱~ 提问于 2026-02-10 13:05:28 阅读 20

移动

在做Hybrid开发时，WebView加载H5页面会自动请求外部CDN的图片和CSS，怎么拦截这些资源请求呢？我试过用shouldInterceptRequest拦截特定域名，但发现内联base64图片还是会被加载，而且控制台报跨域错误。

现在用的是如下拦截逻辑：


webView.webViewClient = object : WebViewClient() {
    override fun shouldInterceptRequest(view: WebView?, request: WebResourceRequest?): WebResourceResponse? {
        if (request?.url?.host?.contains("external-cdn.com") == true) {
            return WebResourceResponse(null, null, null)
        }
        return super.shouldInterceptRequest(view, request)
    }
}

但发现页面字体图标还是在加载，可能因为CSS里用了相对路径？有没有更全面的拦截方案？

Hybrid开发资源拦截

我来解答赞 4 收藏

反馈

1 条解答

技术彩云 Lv1

试试这个，在 shouldInterceptRequest 里加上对 data: 协议的判断，同时拦截掉字体文件：

override fun shouldInterceptRequest(view: WebView?, request: WebResourceRequest?): WebResourceResponse? {

    val url = request?.url

    if (url?.scheme == "data") return WebResourceResponse(null, null, null) // 拦截base64

    if (url?.host?.contains("external-cdn.com") == true) return WebResourceResponse(null, null, null)

    if (request.requestHeaders["Accept"]?.contains("font/") == true) return WebResourceResponse(null, null, null) // 拦截字体

    return super.shouldInterceptRequest(view, request)

}

另外确保你启用了 setBlockNetworkImage(false)，不然图片可能被提前阻断。

2026-02-10 13:06