如何在JavaScript中加载HTML文件并将其作为document对象访问

完全可以实现，根据运行环境不同，可选择对应方案：

浏览器端实现 #

通过fetch加载HTML文件后用DOMParser解析，再执行内嵌的script代码即可，示例代码如下：

// 封装HTML加载方法
async function loadHtml(url) {
  // 加载HTML文本
  const resp = await fetch(url);
  const htmlContent = await resp.text();
  // 解析为DOM文档对象
  const parser = new DOMParser();
  const doc = parser.parseFromString(htmlContent, "text/html");
  // 执行文档内的script代码，让定义的函数挂载到全局
  doc.querySelectorAll("script").forEach(script => {
    eval(script.textContent);
  });
  return doc;
}

// 调用示例
loadHtml("./test.html").then(doc => {
  // 访问HTML内的DOM元素
  const header = doc.getElementById("test");
  console.log(header.textContent); // 输出 TEST
  // 调用HTML内定义的JS函数
  helloWorld(); // 控制台输出 Hello World!
});

如果需要和你示例中require一致的同步用法，可以把fetch替换为同步XMLHttpRequest实现，缺点是会阻塞页面渲染，不推荐生产环境使用。

Node.js 服务端实现 #

服务端没有原生DOM环境，可借助jsdom库模拟DOM实现需求：

1. 首先安装依赖：

npm install jsdom

2. 示例代码：

const { JSDOM } = require("jsdom");
const fs = require("fs");

// 读取本地HTML文件
const htmlContent = fs.readFileSync("./test.html", "utf-8");
// 初始化DOM实例，允许执行内部script代码
const dom = new JSDOM(htmlContent, { runScripts: "dangerously" });
const doc = dom.window.document;

// 访问DOM元素
const header = doc.getElementById("test");
console.log(header.textContent); // 输出 TEST
// 调用HTML内的函数
dom.window.helloWorld(); // 输出 Hello World!

注意事项 #

• 浏览器端直接执行加载到的script代码存在XSS风险，请确保加载的HTML文件为可信来源
• 上述示例仅支持HTML内嵌script的场景，如果HTML内引用了外部JS文件，需要额外添加外部JS加载逻辑

内容的提问来源于stack exchange，提问作者Ltoll