基于JavaScript的实时HTML编辑器无法运行，请求排查问题原因

看起来你在构建实时HTML编辑器时遇到了几个关键问题，我来帮你一步步排查和修复：

核心问题分析 #

从你的代码片段来看，主要有几个问题导致功能失效：

• 目标元素类型错误：你尝试获取id="compiled"的元素并访问它的contentWindow.document，但这个属性是iframe独有的，如果compiled是textarea的话，这个属性根本不存在，这是最关键的错误。
• 事件绑定不合理：把keyup事件绑定到document.body会导致无关按键也触发编译逻辑，而且可能因为事件冒泡或元素焦点问题出现异常。
• DOM加载时机不对：如果你的JS代码在DOM元素加载完成前执行，getElementById会返回null，后续所有操作都会失效。
• 缺少close()调用：调用document.open()写入内容后，必须调用close()才能让浏览器完成渲染，否则内容不会显示。

修正后的完整实现 #

第一步：调整HTML结构 #

把预览用的textarea换成iframe（因为要渲染HTML，而不是显示源码）：

<!-- 输入HTML代码的textarea -->
<textarea id="pure" rows="10" cols="80" placeholder="输入HTML代码..."></textarea>
<!-- 实时预览的iframe -->
<iframe id="compiled" width="800" height="600" style="border:1px solid #ccc;"></iframe>

第二步：修正JavaScript代码 #

确保DOM加载完成后再执行逻辑，并且正确绑定事件和操作iframe的文档：

// 等待DOM完全加载后再执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取输入框和预览iframe
  const inputTextarea = document.getElementById('pure');
  const previewIframe = document.getElementById('compiled');
  const previewDocument = previewIframe.contentWindow.document;

  // 定义编译渲染函数
  function compileAndRender() {
    // 获取输入框的HTML内容
    const htmlContent = inputTextarea.value;
    // 打开iframe的文档、写入内容、关闭完成渲染
    previewDocument.open();
    previewDocument.write(htmlContent);
    previewDocument.close();
  }

  // 给输入框绑定keyup事件，实时触发渲染
  inputTextarea.addEventListener('keyup', compileAndRender);

  // 页面加载时先执行一次，避免预览区空白
  compileAndRender();
});

如果只是想同步显示源码（而非渲染HTML） #

如果你其实是想把第一个textarea的内容同步到第二个textarea（显示源码），那代码更简单，不需要用到open/writeln：

document.addEventListener('DOMContentLoaded', function() {
  const input = document.getElementById('pure');
  const output = document.getElementById('compiled');

  input.addEventListener('keyup', function() {
    output.value = input.value;
  });
});

额外注意事项 #

• 如果你在本地直接打开HTML文件（用file://协议），部分浏览器可能会限制iframe的文档操作，建议用本地服务器（比如Node.js的http-server）运行代码。
• 如果需要支持更流畅的实时预览，可以考虑使用input事件代替keyup，它能捕获粘贴、拖拽等非键盘输入的内容变化。

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