使用include()加载脚本时DOM引用失败的Google Apps Script问题

问题根源 #

你遇到的报错本质是外部JS文件执行时，页面DOM还没完全渲染完毕，导致代码找不到目标元素。直接把JS嵌入HTML里时，脚本通常放在DOM元素之后，或者浏览器会按顺序解析执行，自然能拿到DOM引用；但用include()加载外部JS时，脚本可能在DOM渲染前就执行了，所以抛出Cannot read properties of null错误。

可行解决方案 #

1. 用DOMContentLoaded事件包裹DOM操作逻辑

这是最稳妥的方式，等浏览器完成DOM解析后再执行JS代码，不用等图片、样式等资源加载完成，比window.onload更高效，完全适配表单场景。

把外部JS文件里的所有DOM操作代码，都包裹在这个事件监听里：

document.addEventListener('DOMContentLoaded', function() {
  // 这里写你的DOM操作和表单逻辑
  const inputValue = document.getElementById('yourInputId').value;
  // 比如绑定表单提交事件
  document.getElementById('yourFormId').addEventListener('submit', function(e) {
    e.preventDefault();
    // 处理表单提交逻辑
  });
});

2. 把外部JS的include()放在HTML的</body>标签末尾

调整HTML结构，让DOM元素先渲染完成，再加载执行外部JS：

<!DOCTYPE html>
<html>
  <head>
    <!-- 加载样式文件 -->
    <?!= include('styles'); ?>
  </head>
  <body>
    <!-- 你的表单和所有DOM元素 -->
    <form id="myForm">
      <input type="text" id="username" placeholder="输入用户名">
      <button type="submit">提交</button>
    </form>

    <!-- 最后加载外部JS -->
    <?!= include('script'); ?>
  </body>
</html>

这种情况下，外部JS里可以直接写DOM操作代码，不用额外包裹事件，因为此时DOM已经完全渲染。

3. 关于window.onload的适用性

window.onload确实也能解决问题，但它会等到页面所有资源（图片、样式表、iframe等）加载完成后才执行代码，比DOMContentLoaded触发时机晚。如果你的表单不需要依赖这些外部资源，用DOMContentLoaded更合适；但如果表单逻辑需要依赖图片等资源加载完成，window.onload也完全可用，不存在适配问题。

确认include()函数的正确性 #

确保你的include()函数是标准写法，能正确读取外部文件内容：

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

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