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

Question

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

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

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

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

Run Code Online (Sandbox Code Playgroud)

(page.evaluateOnNewDocument看起来它会很有用,但它似乎是在页面内容可用之前执行的 - 在它运行的时候,页面是空白的.)

Answer 1

Eve*_*tss 6

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

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

例

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

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();
})();

Run Code Online (Sandbox Code Playgroud)

这段代码产生:

所以删除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();
})();

Run Code Online (Sandbox Code Playgroud)

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

Answer 2

小智 0

您可以将脚本标签移至正文而不是头部。然后使用文档 onload 事件您可以执行脚本。根据 MDN，该事件在对象加载时触发。下面是示例代码

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	7 年，10 月前
查看次数：	1173 次
最近记录：	7 年，10 月前