chromiumoxide库iframe渲染异常：页面加载停滞问题求助

问题概述 #

开发基于Tauri的网页爬取应用时，使用chromiumoxide库访问包含iframe元素的页面会出现加载完全停滞的情况。DevTools显示iframe的src请求始终处于Pending状态，直至超时。尝试过拦截iframe请求临时解决，但因业务需要实际渲染iframe，该方案不可行。同时headless_chrome库无此问题，但查询小型表格td元素耗时约45秒，速度过慢无法替代。

最小复现代码 #

use chromiumoxide::{
    Browser, BrowserConfig, BrowserFetcher, BrowserFetcherOptions,
};
use futures::StreamExt;

#[tokio::main]
async fn main() -> Result<(), Box<dyn std::error::Error>> {
    let download_path = std::path::Path::new(".\\download");
    let _ = std::fs::create_dir_all(download_path);

    let fetcher_config = BrowserFetcherOptions::builder()
        .with_path(download_path)
        .build()?;

    let fetcher = BrowserFetcher::new(fetcher_config);

    let info = fetcher.fetch().await?;

    let config = BrowserConfig::builder()
        .chrome_executable(&info.executable_path)
        .user_data_dir("./data-dir")
        .with_head()
        .build()?;

    let (mut browser, mut handler) = Browser::launch(config).await.unwrap();

    let handle = tokio::spawn(async move {
        while let Some(h) = handler.next().await {
            if h.is_err() {
                break;
            }
        }
    });

    let page = browser.new_page("about:blank").await?;

    // Codepen may try to show you a captcha instead if you run this enough,
    // but since the captcha has an iframe, you will still see the problem happening
    page.goto("https://codepen.io/IanLintner/pen/DqGKQZ")
        .await?;

    // For you to be able to see the page loading
    tokio::time::sleep(std::time::Duration::from_secs(30)).await;
    _ = browser.close().await;
    _ = browser.wait().await;

    _ = handle.await;

    Ok(())
}

可行解决方案 #

1. 调整Chromium启动参数 #

Chromium的headless模式默认启用的站点隔离特性可能导致iframe加载阻塞，添加启动参数禁用相关限制：

let config = BrowserConfig::builder()
    .chrome_executable(&info.executable_path)
    .user_data_dir("./data-dir")
    .with_head()
    .arg("--disable-features=site-per-process") // 禁用站点隔离，解决iframe加载阻塞
    .arg("--disable-web-security") // 跨域场景下需启用，根据实际业务选择
    .arg("--allow-running-insecure-content") // 主站HTTPS、iframe HTTP时需启用
    .build()?;

• --disable-features=site-per-process：关闭Chromium的站点隔离机制，避免headless模式下iframe资源请求被拦截
• 后两个参数用于处理跨域场景，若目标页面无跨域iframe可省略

2. 拆分页面加载逻辑，单独处理iframe #

默认page.goto()会等待页面完全加载（NetworkIdle状态），可调整为等待DomContentLoaded后，手动等待iframe加载完成：

// 先等待主页面DOM加载完成，而非等待所有资源
page.goto("https://codepen.io/IanLintner/pen/DqGKQZ")
    .wait_for_load_state(chromiumoxide::page::LoadState::DomContentLoaded)
    .await?;

// 定位并等待iframe加载完成
if let Some(iframe_element) = page.find("iframe").await? {
    if let Some(frame) = iframe_element.content_frame().await? {
        frame.wait_for_load_state(chromiumoxide::page::LoadState::NetworkIdle).await?;
    }
}

这种方式避免主页面因iframe请求Pending而无限等待，拆分加载逻辑后可正常渲染iframe。

3. 指定兼容的Chromium版本 #

chromiumoxide对Chromium版本有严格兼容性要求，最新版本可能存在headless模式下的iframe bug，可指定稳定版本下载：

let fetcher_config = BrowserFetcherOptions::builder()
    .with_path(download_path)
    .with_version("114.0.5735.90") // 指定稳定兼容版本
    .build()?;

建议选择chromiumoxide文档推荐的对应版本，避免版本不匹配导致的加载异常。

内容的提问来源于stack exchange，提问作者André Luís de Andrade