如何让JavaScript脚本标签等待加载完成，这样才能截取截图？
如何让JavaScript脚本标签等待加载完成，这样才能截取截图？
提问于 2022-08-02 03:28:10
我试图从本地HTML文件中截图一个iframe，使用Puppeteer库。它的工作方式是在下面的HTML文件中使用一些脚本标记：
<script src="http://www.marinetraffic.com/js/embed.js" type="text/javascript"></script>但是，屏幕截图结果是空白的，或者有一个灰色或蓝色的矩形来代替呈现正确的iframe (我已经在下面附上了一张图片)。我怎样才能让iframe完成加载，然后制作木偶来拍摄截图？
这是截图的结果：
我的代码如下：
const puppeteer = require('puppeteer');
const process = require('process');
const fs = require('fs');
const htmlWithParameters = () => {
return (
`
<script src="http://www.marinetraffic.com/js/embed.js" type="text/javascript"></script>
`
)
}
const createMapWithHTML = async () => {
var html = htmlWithParameters()
var stream = fs.createWriteStream("progressionofshiptraffic.html");
stream.once('open', function(fd) {
stream.write(html);
stream.end();
});
}
(async () => {
await createMapWithHTML()
const browser = await puppeteer.launch();
const page = await browser.newPage()
await page.setUserAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3703.0 Safari/537.36')
await page.goto("file://" + process.cwd() + "/" + "shiptrafficprogression.html")
//await page.waitForNavigation({waitUntil: 'networkidle0'})
await page.screenshot({path: "image.png"})
await browser.close(
})();回答 2
Stack Overflow用户
发布于 2022-08-02 03:34:36
一个很好的解决方案是在got调用中添加waitUntill选项。我可以看到您尝试在waitForNavigation中使用它，但是它可能应该在goto()中而不是
您可以使用以下内容：
await page.goto(url, { waitUntil: "domcontentloaded" });如果您导航到另一个页面，并且需要等待加载，则可以使用waitForNavigation函数和“等待直到”选项。
如果需要等待元素可见，可以使用page.waitForSelector()
await page.waitForSelector('#example', {
visible: true,
});Stack Overflow用户
发布于 2022-10-04 06:29:41
您应该使用await page.waitForResponse，请参阅https://pptr.dev/api/puppeteer.page.waitforresponse
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73201675
复制相关文章
相似问题
腾讯云开发者
