使用 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

相关推荐
我爱学习_zwj几秒前
动态HTTP服务器实战:解析请求与Mock数据
开发语言·前端·javascript
NMBG221 分钟前
外卖综合项目
java·前端·spring boot
小白阿龙2 分钟前
样式不生效/被覆盖(CSS优先级陷阱)
前端·css
flashlight_hi4 分钟前
LeetCode 分类刷题:110. 平衡二叉树
javascript·算法·leetcode
Beginner x_u5 分钟前
Vue 事件机制全面解析:原生事件、自定义事件与 DOM 冒泡完全讲透
前端·javascript·vue.js·dom
Emma_Maria6 分钟前
关于vant-ui-vue 的datepicker 时间选择错乱问题的处理
前端·vue.js·ui
Dabei11 分钟前
Android 语音助手简单实现与语音助手“执行任务”交流
android·前端
dongczlu13 分钟前
iOS 循环引用篇 菜鸟都能看懂
前端
Alsn8615 分钟前
26.IDEA 专业版中创建简单的 Web 项目并打包部署到本地Tomcat 9
前端·tomcat·intellij-idea
霍理迪16 分钟前
HTML行内块标签——img、表单、音视频标签
前端·html