如何用JavaScript无需用户点击按钮，将HTML文件即时加载到textarea？

嘿，这个需求我刚好折腾过，实现起来其实挺顺手的——不用按钮触发的核心就是让代码在页面加载完成后自动执行，分两种常见场景给你拆解：

场景1：把当前页面的HTML直接加载到textarea #

这是最简单的情况，我们只需要等页面DOM结构加载完毕，直接把当前页面的完整HTML内容塞到textarea里就行。

先写你的HTML结构：

<textarea id="htmlViewer" rows="20" cols="80"></textarea>

然后加一段JavaScript，利用DOMContentLoaded事件确保DOM都准备好了再执行：

document.addEventListener('DOMContentLoaded', function() {
  // 获取当前页面的全部HTML代码（包括doctype、html标签这些）
  const currentPageHtml = document.documentElement.outerHTML;
  // 找到我们的textarea元素
  const htmlTextarea = document.getElementById('htmlViewer');
  // 把HTML内容赋值进去
  htmlTextarea.value = currentPageHtml;
});

打开页面你就能看到textarea里已经自动填充了当前页面的HTML，完全不用点任何按钮。

如果你的代码是放在<body>标签的最后面，甚至连事件监听都可以省掉——因为这时候textarea已经被渲染出来了，直接写就行：

<body>
  <textarea id="htmlViewer" rows="20" cols="80"></textarea>
  <script>
    const currentPageHtml = document.documentElement.outerHTML;
    document.getElementById('htmlViewer').value = currentPageHtml;
  </script>
</body>

场景2：加载外部HTML文件到textarea #

如果是要加载同域下的另一个HTML文件（比如about.html），那就用Fetch API来异步获取文件内容，同样在页面加载时自动触发：

HTML结构还是一样：

<textarea id="htmlViewer" rows="20" cols="80"></textarea>

JavaScript部分用async/await写更清晰，还加了错误处理避免加载失败时一片空白：

document.addEventListener('DOMContentLoaded', async function() {
  const htmlTextarea = document.getElementById('htmlViewer');
  try {
    // 发起请求获取外部HTML文件，注意必须是同域，或者目标服务器允许跨域
    const response = await fetch('about.html');
    if (!response.ok) {
      throw new Error(`加载失败！状态码：${response.status}`);
    }
    // 把获取到的文本内容赋值给textarea
    const externalHtml = await response.text();
    htmlTextarea.value = externalHtml;
  } catch (err) {
    // 加载出错时给用户提示
    htmlTextarea.value = `哎呀，加载HTML文件遇到问题了：${err.message}`;
  }
});

这里要注意：如果是跨域的HTML文件，目标服务器必须配置CORS权限，不然浏览器会直接拦截请求，这是浏览器的同源策略限制哦。

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