HTML Canvas应用拆分JS至外部文件后窗口Resize函数失效问题

嘿，我之前也碰到过几乎一模一样的问题！先帮你捋清楚现状：原本把JS代码内嵌在HTML里时，窗口resize能正常触发resizer()；但把JS移到外部文件后，resize事件完全没反应，必须刷新页面才恢复正常，对吧？

咱们来拆解一下最可能的原因和对应的解决办法：

最常见的问题：全局作用域丢失 #

如果你的外部脚本用了闭包（比如模块化写法），createGame()函数会被包裹在局部作用域里，导致HTML里的<body onload="createGame();">找不到这个函数——连初始化都没执行，resize监听自然没加上！

解决办法1：把函数暴露到全局

修改外部脚本，让createGame()能被全局访问到：

function resizer(){
  // 你的resize逻辑
}

function createGame(){
  // 你的初始化代码
  resizer();
  window.addEventListener('resize', resizer);
}

// 把函数挂载到window对象，让HTML能调用到
window.createGame = createGame;

解决办法2：改用DOM就绪事件替代body onload

直接在外部脚本里监听DOM加载完成事件，不用依赖HTML的onload属性，更可靠还避免全局函数问题：

function resizer(){
  // 你的resize逻辑
}

function createGame(){
  // 你的初始化代码
  resizer();
  window.addEventListener('resize', resizer);
}

// 等DOM完全加载后再执行初始化
document.addEventListener('DOMContentLoaded', function() {
  createGame();
});

这时候HTML里的<body onload="createGame();">可以直接删掉。

另一个可能：脚本加载时机不对 #

如果你的<script>标签放在<head>里，脚本会在DOM（包括canvas元素）加载前就执行，就算函数在全局，也可能因为DOM未就绪导致初始化异常。

解决办法：把脚本移到body末尾

调整HTML里的脚本位置，让浏览器先加载完DOM再执行JS：

<body>
  <!-- 页面内容（包括canvas） -->
  <!-- 把脚本放在body最后 -->
  <script type="text/javascript" src="./externalScript.js"></script>
</body>

快速排查技巧 #

打开浏览器开发者工具（F12）切换到Console标签，如果看到createGame is not defined这类报错，那肯定是全局作用域的问题；如果没报错但resize没反应，就检查DOM初始化时机是否正确。

备注：内容来源于stack exchange，提问作者user13647644