如何在执行页内脚本之前操作DOM？

Question

使用Puppeteer ，在执行页内JS之前，如何在页面上下文中运行完整DOM的脚本？

例如，在运行任何页面JS之前，如何运行以下脚本从img元素中删除alt属性？

document.querySelectorAll('img[alt]').forEach(
  e => e.removeAttribute('alt')
)

（ page.evaluateOnNewDocument看起来很有用，但它似乎是在页面内容可用之前执行的 - 在它运行的时候，页面是空白的。）

Answer 1

我认为实现目标的方法是执行：

set page.setJavaScriptEnabled(false)
进入页面
在没有脚本的情况下提取所有脚本和HTML
set page.setJavaScriptEnabled(true)
使用步骤3中的HTML输入page.goto(`data:text/html,${HTMLWithoutScript}`)
执行你的脚本
从步骤3中提取原始提取的脚本page.addScriptTag({ content: script })

例

以下是您的问题示例的可视化：

const puppeteer = require('puppeteer');

const html = `
<html>
    <head></head>
    <body>
        <img src="https://picsum.photos/200/300?image=1062" alt="dog ">
        <img src="https://picsum.photos/200/300?image=1072" alt="car ">
        <div class="alts">List of alts: </div>
        <script>
            const images = document.querySelectorAll('img');
            const altsContainer = document.querySelector('.alts');
            images.forEach(image => {
                const alt = image.getAttribute('alt') || 'missing alt ';
                altsContainer.insertAdjacentHTML('beforeend', alt);
            })
        </script>
    </body>
</html>`;

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto(`data:text/html,${html}`);
    await page.evaluate(() => {
        document.querySelectorAll('img[alt]').forEach(
            e => e.removeAttribute('alt')
        )
    });
    await page.screenshot({ path: 'image.png' });
    await browser.close();
})();

这段代码产生：

所以删除alts在这里不起作用。

解

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    await page.setJavaScriptEnabled(false);
    await page.goto(`data:text/html,${html}`);
    const { script, HTMLWithoutScript } = await page.evaluate(() => {
        const script = document.querySelector('script').innerHTML;
        document.querySelector('script').innerHTML = '';
        const HTMLWithoutScript = document.body.innerHTML;
        return { script, HTMLWithoutScript }
    });

    await page.setJavaScriptEnabled(true);
    await page.goto(`data:text/html,${HTMLWithoutScript}`);
    await page.evaluate(() => {
        document.querySelectorAll('img[alt]').forEach(
            e => e.removeAttribute('alt')
        )
    });
    await page.addScriptTag({ content: script });
    await page.screenshot({ path: 'image.png' });
    await browser.close();
})();

这将产生您在问题中所期望的结果：

Answer 2

您可以将脚本标记移动到body而不是head。 然后使用document onload事件，您可以执行脚本。 根据MDN，此事件在加载对象时触发。 下面是示例代码

 function removeAlt(){ document.querySelectorAll('img[alt]').forEach((e)=>{ e.removeAttribute('alt'); }); }

 <body onload="removeAlt()"> <img src="http://placehold.it/64x64" alt="1"> <img src="http://placehold.it/64x64" alt="2"> </body>

让我知道这是否符合您的要求，我测试和功能是从图像中删除alt标签

如何在执行页内脚本之前操作DOM？

问题描述

2 个解决方案

解决方案1
6 2018-02-09 13:22:19

例

解

解决方案2
0 2018-02-05 10:47:58

如何在执行页内脚本之前操作DOM？

问题描述

2 个解决方案

解决方案1 6 2018-02-09 13:22:19

例

解

解决方案2 0 2018-02-05 10:47:58

解决方案1
6 2018-02-09 13:22:19

解决方案2
0 2018-02-05 10:47:58