JavaScript在GitHub.io无法执行但本地正常的技术问题咨询

嘿，看来你的页面加载脚本没正常跑起来，我帮你梳理几个可能的原因和解决办法哈～

1. 先确认脚本是否真的被执行 #

第一步可以先加个调试日志，看看函数到底有没有被触发。修改你的代码：

<script>
// 当样式在_layouts/base.html中设置时，此代码无需启用
// document.body.style.visibility = 'hidden';
function makeBodyVisible() {
  console.log("哎，我被调用啦！"); // 加个调试日志
  document.body.style.visibility = 'visible';
}
if (window.addEventListener)
  window.addEventListener("load", makeBodyVisible, false);
else if (window.attachEvent)
  window.attachEvent("onload", makeBodyVisible);
else
  window.onload = makeBodyVisible;
</script>

然后打开浏览器控制台（按F12），刷新页面看看有没有打印那行日志。如果没看到，说明脚本根本没被加载或者执行到；如果看到了，那问题就出在修改body可见性的那行代码上。

2. 检查脚本的放置位置 #

如果你的脚本放在<head>标签里，虽然监听了load事件，但偶尔会因为资源加载阻塞或者浏览器执行顺序的小问题导致异常。更稳妥的方式是把脚本放到<body>标签的末尾（也就是</body>之前），这时候DOM已经完全解析完成，就算不依赖load事件也能正常访问document.body：

<body>
  <!-- 你的页面内容都在这里 -->
  
  <script>
    // 当样式在_layouts/base.html中设置时，此代码无需启用
    // document.body.style.visibility = 'hidden';
    function makeBodyVisible() {
      document.body.style.visibility = 'visible';
    }
    // 这里甚至可以直接调用函数，因为body已经存在了
    // makeBodyVisible();
    // 当然保留load事件监听也完全没问题
    window.addEventListener("load", makeBodyVisible, false);
  </script>
</body>

3. 初始样式的优先级冲突 #

去看看_layouts/base.html里的body样式，是不是加了!important或者用了更具体的选择器？比如如果base里的样式是：

body {
  visibility: hidden !important;
}

那你用document.body.style.visibility设置的行内样式优先级比不过带!important的样式，这时候得改成下面这样：

document.body.style.setProperty('visibility', 'visible', 'important');

或者干脆把base里的!important去掉，保证行内样式能正常覆盖。

4. 简化代码，减少兼容性风险 #

你的代码已经考虑了老IE的attachEvent，但现在几乎没人用IE了，其实可以简化成现代浏览器都支持的写法，反而能减少兼容性出错的可能：

window.addEventListener("load", function() {
  document.body.style.visibility = 'visible';
});

另外，别忘了检查浏览器控制台有没有报错信息——如果其他脚本报错，可能会导致你的脚本无法正常执行哦～

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