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

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

首先是安装插件 puppeteer,然后创建一个项目, 我这里是express;

这里是主要的代码。

js 复制代码
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

相关推荐
前端那点事5 分钟前
Vue3+TS动态路由终极方案|后端权限、刷新不丢、按钮权限、解决所有404BUG
前端·vue.js
前端那点事8 分钟前
Vue3+TS手写不定高虚拟列表Hooks,彻底解决长列表卡顿,生产直接复用
前端·vue.js
ZC跨境爬虫9 分钟前
跟着 MDN 学 HTML day_61:(构建反馈表单的结构化挑战)
前端·javascript·ui·html·音视频
卷帘依旧11 分钟前
Vue2中defineProperty缺陷
前端
长安第一美人32 分钟前
工业级实时监控系统开发:PHP+ZMQ+JS 前后端分离架构全解析
前端·嵌入式硬件·架构·交互·rk3588·zmq后端
ricardo197336 分钟前
资源加载提速四件套:dns-prefetch / preconnect / preload / prefetch 实战
前端·面试
豹哥学前端36 分钟前
JavaScript 异步编程完全指南:从回调地狱到 async/await,一次通关
前端·javascript·面试
kyriewen39 分钟前
面试官让我手写Promise,我打开Cursor三秒生成,他愣了两秒说“你过了”
前端·javascript·面试
Bacon1 小时前
RAG 从入门到入土:Agent 时代,你的检索增强生成到底行不行?
前端·人工智能
软件开发技术深度爱好者1 小时前
HTML实现DOCX文档版题库图文考试系统(修订)
前端·javascript·html