JavaScript自动打开标签页执行操作后关闭的问题排查

这段代码意图从商品页每个条目获取对应图片，计划逐个打开标签页处理后关闭，但仅能处理第一个条目就停止，各部分单独运行正常，控制台有Promise相关提示。原代码如下：

async function main() {
    // Get all div elements with the class "product-list" in products pages
    var cursorPointerDivs = document.getElementsByClassName('product-list');

    // Iterate through the div elements with the class "cursor-pointer"
    for (var i = 0; i < cursorPointerDivs.length; i++) {
        await new Promise((resolve) => {
            setTimeout(async function () {
                var currentDiv = cursorPointerDivs[i];
                // Check if the div has a child with class "block cursor-pointer"
                var aChild = currentDiv.querySelector('a.block.cursor-pointer');
                if (aChild && aChild.href != null) {
                    // Print the src attribute of the img child
                    console.log('Found source:', aChild.href);
                    await dothejob(aChild.href, 1, i + 1);
                }
                resolve(); // Resolve the promise after the timeout
            }, 2500);
        });
    }
}

async function dothejob(pUrl, pgindex, prindex) {
    return new Promise((resolve) => {
        var linkUrl = pUrl;

        // Open a new tab and navigate to the specified URL
        var newTab = window.open(linkUrl, '_blank');

        // Wait for a specified duration (e.g., 3000 milliseconds or 3 seconds)
        setTimeout(async () => {
            // Access the content of the new tab
            var newTabDocument = newTab.document;

            // Get all div elements with the class "cursor-pointer"
            var cursorPointerDivs = newTabDocument.getElementsByClassName('cursor-pointer');

            // Iterate through the div elements with the class "cursor-pointer"
            for (var ii = 0; ii < cursorPointerDivs.length; ii++) {
                var currentDiv = cursorPointerDivs[ii];
                // Check if the div has an img child with class "w-full inline-block"
                var imgChild = currentDiv.querySelector('img.w-full.inline-block');
                if (imgChild && !imgChild.closest('picture') && imgChild.src.includes('statics-public')) {
                    // Print the src attribute of the img child
                    console.log('Image source:', imgChild.src);

                    // Resolve the promise
                    resolve();
                    return; // Exit the loop after finding the first match
                }
            }

            // Close the new tab
            newTab.close();

            // Resolve the promise even if no match was found
            resolve();
        }, 3000); // Adjust the delay as needed
    });
}

// Call the main function
main();

问题根源分析 #

1. 循环变量作用域错误：main函数中使用var i声明循环变量，var的函数作用域会导致setTimeout回调执行时，i已经变成了cursorPointerDivs.length，后续迭代无法获取到有效元素。
2. Promise resolve时机混乱：main函数中，resolve()没有等待dothejob执行完成就触发，导致循环提前进入下一轮；dothejob中找到图片后立即resolve并return，未执行标签页关闭逻辑，且存在多次调用resolve的风险。
3. 跨域访问限制：浏览器会阻止跨域页面的document访问，如果商品详情页和列表页域名不同，会直接抛出错误导致代码中断。

修复后的代码 #

async function main() {
    // 获取商品页所有product-list类的div元素
    const cursorPointerDivs = document.getElementsByClassName('product-list');

    // 用let保证每个循环迭代的i有独立作用域
    for (let i = 0; i < cursorPointerDivs.length; i++) {
        await new Promise((resolve) => {
            setTimeout(async function () {
                const currentDiv = cursorPointerDivs[i];
                // 查找子元素a标签
                const aChild = currentDiv.querySelector('a.block.cursor-pointer');
                if (aChild && aChild.href) {
                    console.log('Found source:', aChild.href);
                    // 等待dothejob完全执行完成后再继续
                    await dothejob(aChild.href, 1, i + 1);
                }
                resolve();
            }, 2500);
        });
    }
}

async function dothejob(pUrl, pgindex, prindex) {
    return new Promise((resolve) => {
        const linkUrl = pUrl;
        const newTab = window.open(linkUrl, '_blank');

        setTimeout(async () => {
            let foundImg = false;
            try {
                // 尝试访问新标签页内容，捕获跨域错误
                const newTabDocument = newTab.document;
                const cursorPointerDivs = newTabDocument.getElementsByClassName('cursor-pointer');

                for (let ii = 0; ii < cursorPointerDivs.length; ii++) {
                    const currentDiv = cursorPointerDivs[ii];
                    const imgChild = currentDiv.querySelector('img.w-full.inline-block');
                    if (imgChild && !imgChild.closest('picture') && imgChild.src.includes('statics-public')) {
                        console.log('Image source:', imgChild.src);
                        foundImg = true;
                        break; // 找到目标图片后退出循环
                    }
                }
            } catch (e) {
                console.error('无法访问新标签页内容（跨域限制）:', e);
            } finally {
                // 无论是否成功，都关闭标签页
                newTab.close();
                // 确保只resolve一次
                resolve();
            }
        }, 3000);
    });
}

// 调用主函数
main();

关键修改说明 #

• 替换var为let：循环中使用let声明索引变量，确保每个回调函数获取到当前迭代的索引值，避免作用域污染。
• 同步Promise执行顺序：main函数中等待dothejob执行完成后再resolve外层Promise，保证每个条目处理完成后才进入下一轮循环。
• 统一资源清理逻辑：用finally块确保无论是否出现错误，都会关闭新标签页，避免残留无效标签页。
• 错误捕获与处理：添加跨域访问的错误捕获，防止代码直接崩溃。

额外优化方案（规避跨域问题） #

如果遇到跨域无法访问新标签页的情况，可以改用fetch请求页面HTML并解析，无需打开标签页：

async function dothejob(pUrl) {
    try {
        const response = await fetch(pUrl);
        const html = await response.text();
        const parser = new DOMParser();
        const doc = parser.parseFromString(html, 'text/html');
        
        const cursorPointerDivs = doc.getElementsByClassName('cursor-pointer');
        for (let ii = 0; ii < cursorPointerDivs.length; ii++) {
            const currentDiv = cursorPointerDivs[ii];
            const imgChild = currentDiv.querySelector('img.w-full.inline-block');
            if (imgChild && !imgChild.closest('picture') && imgChild.src.includes('statics-public')) {
                // 处理相对路径，转换为绝对URL
                console.log('Image source:', new URL(imgChild.src, pUrl).href);
                break;
            }
        }
    } catch (e) {
        console.error('获取页面失败:', e);
    }
}

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