自动点击页面视频元素后，如何提取所有iframe的链接？

你的代码核心问题有两个：一是直接点击整个.list-box容器，没有逐个触发每个视频项的加载；二是用固定时长的setTimeout等待加载，可靠性差，而且没有跟踪已获取的链接，容易重复或遗漏。

解决思路 #

• 定位.list-box内的单个视频项（而非整个容器），逐个点击触发加载
• 用MutationObserver监听iframe的新增或src变化，替代固定等待时间，确保加载完成再提取链接
• 用Set存储已获取的链接，自动去重

修改后的代码 #

// 存储已获取的iframe链接，自动去重
const collectedIframeUrls = new Set();

// 获取.list-box内的所有视频子项（请根据实际页面结构调整选择器，比如.list-box > li.video-item）
const videoItems = document.querySelectorAll('.list-box > *');
if (videoItems.length === 0) {
    console.log('未找到任何视频项');
    return;
}

// 递归处理每个视频项
async function processVideoItem(index) {
    if (index >= videoItems.length) {
        console.log('所有视频链接提取完成');
        console.log('最终链接列表:', Array.from(collectedIframeUrls));
        return;
    }

    const currentItem = videoItems[index];
    // 点击当前视频项，触发动态加载
    currentItem.click();

    return new Promise((resolve) => {
        // 监听iframe的变化
        const observer = new MutationObserver((mutations) => {
            for (const mutation of mutations) {
                // 情况1：新增了iframe元素
                if (mutation.type === 'childList') {
                    const iframe = document.querySelector('iframe');
                    if (iframe?.src && !collectedIframeUrls.has(iframe.src)) {
                        collectedIframeUrls.add(iframe.src);
                        console.log(`提取到链接 ${collectedIframeUrls.size}: ${iframe.src}`);
                        observer.disconnect();
                        resolve(processVideoItem(index + 1));
                        break;
                    }
                }
                // 情况2：已有iframe的src属性更新
                else if (mutation.type === 'attributes' && mutation.attributeName === 'src') {
                    const iframe = mutation.target;
                    if (iframe.src && !collectedIframeUrls.has(iframe.src)) {
                        collectedIframeUrls.add(iframe.src);
                        console.log(`提取到链接 ${collectedIframeUrls.size}: ${iframe.src}`);
                        observer.disconnect();
                        resolve(processVideoItem(index + 1));
                        break;
                    }
                }
            }
        });

        // 监听页面内iframe的变化（可根据实际情况缩小监听范围，比如视频播放容器）
        observer.observe(document.body, {
            childList: true,
            subtree: true,
            attributes: true,
            attributeFilter: ['src']
        });

        // 超时兜底，防止某个视频加载失败卡住流程
        setTimeout(() => {
            observer.disconnect();
            console.log(`第${index+1}个视频加载超时，跳过`);
            resolve(processVideoItem(index + 1));
        }, 5000);
    });
}

// 启动提取流程
processVideoItem(0);

关键说明 #

1. 选择器调整：你需要根据页面实际结构修改.list-box > *，确保能选中每个独立的视频点击项（比如如果视频项是li标签，就改成.list-box > li）
2. MutationObserver：相比固定等待时间，它能精准捕捉iframe的加载状态，避免提前读取或等待过长
3. 递归处理：保证视频项逐个加载提取，不会因为并发点击导致混乱
4. 去重机制：用Set存储链接，自动过滤重复的iframe地址

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