使用 puppeteer 加载 html 文件来运行 js 文件

这篇具有很好参考价值的文章主要介绍了使用 puppeteer 加载 html 文件来运行 js 文件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

遇到一个需求, 在浏览器环境下来运行 js sdk 文件, 这个 js 文件是不能运行在 nodejs 环境下的; 所以通过 puppeteer 无头浏览器来运行代码获取对应的结果。

首先是安装插件 puppeteer,然后创建一个项目, 我这里是express;
这里是主要的代码。

const puppeteer = require('puppeteer');
const path = require('path')
const htmlPath = path.join(__dirname, './index.html');

function runCodeInBrowser() {
  return new Promise(async (resolve, reject) => {
    try {
      const browser = await puppeteer.launch();
      const page = await browser.newPage();
      await page.goto(`file://${htmlPath}`)
      // 执行您自己的代码
      const result = await page.evaluate(() => {
        return test()
      });
      await browser.close();
      resolve(result);
    } catch (error) {
      reject(error)
    }
  })
}

module.exports = runCodeInBrowser

代码解释:
await page.goto(`file://${htmlPath}`)这里是加载本地html文件, 在html文件里面导入你的js文件<script src="./test.js"></script>, 然后就通过 page.evaluate(() => { return test() }); 这个函数来获取你testjs文件里面的函数了; 需要注意的是, testjs文件里面的函数需要是全局变量;

demo文章来源地址https://www.toymoban.com/news/detail-726815.html

到了这里,关于使用 puppeteer 加载 html 文件来运行 js 文件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 积木报表集成前端加载js文件404

    在集成积木报表和shiro时候: 集成积木报表,shrio,shrio是定义在另一个模块下的,供另一个启动类使用,积木报表集成shrio的时候,需要依赖存放shrio的核心包,该核心包除了存放shrio之外,还有swagger,mybatisPlus等 积木报表集成后,页面老是加载积木报表中的js,css文件404,查

    2024年02月13日
    浏览(24)
  • 纯前端--原生js将html页面变成pdf文件(html2canvas+jsPDF)

    1、将文档放在本地,用原生js进行引用和使用。 ① 新建一个名为 html2canvas.min.js 的文件,并且将线上的内容进行复制。 ② 引入 js 文件: 2、使用 npm 进行安装使用: 待续。。。 github 中文网站 CDN Jspdf.es.js:ES 2015 模块格式。 Jspdf.umd.js:UMD模块格式,用于 AMD 或脚本标签加载

    2024年02月08日
    浏览(44)
  • 【前端】关于如何将html、js、css等一个html网页打包成单一的exe可执行程序文件

    要将 HTML、JS、CSS 等一个 HTML 网页打包成单一的可执行程序文件(exe),通常需要使用一些工具和框架来实现的。 这里以Electron为例,详细说一下具体的打包过程 1.安装依赖: 确保已经安装了 Node.js。在命令行中进入你的项目目录,执行以下命令安装 Electron: 2.创建文件结构

    2024年02月11日
    浏览(45)
  • Qt|使用QWebEngineView控件加载HTML使用及问题

    前一段时间项目中用到了加载html的功能,也遇到了一些比较奇奇怪怪的问题。 我的开发版本以及环境:VS2017 + Qt5.14.2 遇到的问题如下: 1:加载自己写的本地的html页面时,为什么第一次会很慢? 2:在一些电脑上加载html时,为什么会出现黑屏现象? 针对上述两个问题,开展

    2024年02月05日
    浏览(32)
  • nginx部署前端项目 nginx部署无法加载js/css问题 Uncaught SyntaxError: Unexpected token ‘<‘

    注意:将多个html项目放在一个server中出现js,css加载不出来问题 可以将文件放在主项目同级目录下(暂时解决,可能是静态资源配置问题,不会弄)。 1.下载nginx,解压 2.将项目放入html目录下 3.修改nginx.conf文件 4.修改端口防止占用和添加新映射 5.普通html项目,部署会出现以下

    2024年02月04日
    浏览(40)
  • Puppeteer中使用Stealth.min.js库

    这里需要安装npm install puppeteer-extra puppeteer-extra-plugin-stealth,然后,在启动浏览器时,Puppeteer 会自动应用 Stealth.min.js 插件的功能。

    2024年02月10日
    浏览(24)
  • HTML - HTML中使用JS下载文本文件

    如果只希望将一些文本以文件形式保存到本地,则可以使用 a 标签 点我下载 拓展:字符串形式的DOM: 方法一中若要下载的文本中有引号,则转义起来比较麻烦。因此可以使用文件流来进行下载: 点我下载 在CSDN中可能因为无法执行JS等原因看不到效果,具体效果可以前往我

    2024年02月13日
    浏览(28)
  • 前端js下载zip文件异常问题解决

    目录 一,本文解决问题如下 二,原下载代码 1,ajax get 下载文件 2,下载异常图: 三,成功下载的 1, JQuery 实现文件下载xhr 2,图例 引言: 本人使用的ajax 下载,由于下载CSV,文本之类的没有问题,下载zip是出现各种问题。发现是设置responseType:\\\"blob\\\"没生效,项目中又没有

    2024年02月09日
    浏览(29)
  • html设置前端加载动画

    主体思路参考: 前端实现页面加载动画_边城仔的博客-CSDN博客 JS图片显示与隐藏案例_js控制图片显示隐藏-CSDN博客 (1)需要在按钮和图片元素设置两个id   (2) 绑定id进行事件绑定 注意:图片一开始是 不显示的 当点击按钮后才显示。 (3)编写js脚本 完成。

    2024年02月07日
    浏览(26)
  • 解决QT使用QWebEngineView加载不出网页问题和实现qt与html网页基础通信

            这次项目需要用到qt去调高德地图进行显示,查阅资料后知道了qt可以用QWebEngineView类打开html文件并进行显示但是途中遇到了地图加载不出来的问题。但将源代码发给其他人之后,发现别人可以打开,但时间略长大概需要十秒左右,怀疑是QT版本问题,我现在用的版

    2024年03月18日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包