WebView提前触发加载完成事件，iframe未加载完毕如何解决？

这确实是Android WebView里一个挺头疼的常见问题——WebView的原生回调（比如OnPageFinished、OnProgressChanged）只会监听主HTML文档的加载完成，完全不会管内嵌iframe里的内容加载状态。所以当你加载带YouTube iframe的页面时，主文档很快就加载完了，回调触发，但iframe里的视频资源还在后台加载，就出现了你遇到的情况。

下面给你两个靠谱的解决方案，亲测有效：

方案一：注入JavaScript监听iframe的onload事件（推荐） #

这是最准确的方式，通过给iframe绑定onload事件，当iframe内所有资源（包括YouTube视频的预加载内容）加载完成后，主动通知Android端。

步骤1：创建JS回调接口类 #

先写一个供JavaScript调用的Android类，注意要加上@JavascriptInterface注解：

public class IframeLoadCallback {
    @JavascriptInterface
    public void onIframeLoadedSuccess() {
        // 这里就是iframe加载完成的回调逻辑
        Log.Info("101029", "YouTube iframe 加载完成！");
        // 可以在这里做你需要的操作，比如隐藏加载动画
    }

    @JavascriptInterface
    public void onIframeLoadFailed() {
        // 可选：处理iframe加载失败的情况
        Log.Info("101029", "YouTube iframe 加载失败！");
    }
}

步骤2：给WebView配置JS接口并开启JavaScript #

在初始化WebView的时候，添加这个接口并开启JS支持：

WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
// 添加JS回调接口，命名为"AndroidIframeCallback"，要和后面JS里调用的名称一致
webView.addJavascriptInterface(new IframeLoadCallback(), "AndroidIframeCallback");

步骤3：修改iframe代码，添加加载监听 #

把你原来的iframe代码修改一下，加上onload和onerror事件：

<iframe 
    src="https://www.youtube.com/embed/你的视频ID" 
    width="640" 
    height="360" 
    frameborder="0" 
    allowfullscreen
    onload="AndroidIframeCallback.onIframeLoadedSuccess()"
    onerror="AndroidIframeCallback.onIframeLoadFailed()"
></iframe>

然后用这个修改后的iframe字符串传入LoadDataWithBaseURL即可。

方案二：定期检查iframe的readyState（备选） #

如果因为某些原因无法修改iframe代码（比如iframe内容是第三方返回的），可以通过evaluateJavascript定期检查iframe的加载状态：

// 页面加载完成后开始检查
webView.SetWebViewClient(new WebViewClientClass() {
    @Override
    public void OnPageFinished(WebView view, string url) {
        super.OnPageFinished(view, url);
        checkIframeLoadState(view);
    }
});

private void checkIframeLoadState(final WebView webView) {
    webView.evaluateJavascript(
        "document.getElementsByTagName('iframe')[0].readyState",
        new ValueCallback<String>() {
            @Override
            public void onReceiveValue(String value) {
                // readyState返回的是字符串，注意要去掉引号
                if ("\"complete\"".equals(value) || "\"interactive\"".equals(value)) {
                    Log.Info("101029", "YouTube iframe 加载完成！");
                } else {
                    // 每隔500ms检查一次，直到加载完成
                    webView.postDelayed(new Runnable() {
                        @Override
                        public void run() {
                            checkIframeLoadState(webView);
                        }
                    }, 500);
                }
            }
        }
    );
}

不过这个方法的准确性稍差，因为readyState变成interactive的时候，可能视频还没完全加载好，所以优先推荐方案一。

注意事项 #

• 如果你用的是Android 11及以上版本，需要在AndroidManifest.xml里添加android:usesCleartextTraffic="true"，或者给YouTube的域名配置网络安全策略，否则iframe可能加载失败。
• 确保你的WebView没有禁用JavaScript，否则所有JS相关的方案都无效。

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