如何在.js文件中调用HTML中定义的JavaScript函数？

嘿，当然有可行的实现方式啦！作为新手，你只需要注意函数的加载顺序和作用域这两个关键点就行，下面给你一步步讲清楚：

先搞懂原理 #

你在HTML的<script>标签里定义的customAlert函数，默认是挂载在全局的window对象上的——也就是说，只要这个函数已经被浏览器解析过，任何地方的JS代码都能访问到它。

方案1：调整脚本加载顺序（最简单！） #

直接把定义customAlert的<script>放在你的外部JS文件之前加载，这样浏览器解析到外部JS时，customAlert已经存在了。

你的HTML结构可以改成这样：

<!-- 先定义全局函数 -->
<script>
function customAlert(msg,duration) {
  var styler = document.createElement("div");
  time = duration * 1000;
  styler.setAttribute("style","border: solid 3px Blue;width:auto;height:auto;top:50%;left:40%;background-color:#444;color:Silver;position:fixed;");
  // 加个position:fixed，避免弹窗跑到页面底部
  styler.innerHTML = "<h1>"+msg+"</h1>";
  setTimeout(function() {
    styler.parentNode.removeChild(styler);
  }, time);
  document.body.appendChild(styler);
}
</script>

<!-- 再加载你的外部JS文件 -->
<script src="你的外部脚本文件.js"></script>

这样你外部JS里的这段代码就能直接正常工作：

io.on("disconnect", function() {
  // 注意：原函数里duration是秒数，传2就是2秒后关闭弹窗
  customAlert(userLeftmessage, 2);
});

方案2：等页面完全加载后再绑定事件 #

如果没办法调整脚本加载顺序，那可以把你的socket监听代码放在DOMContentLoaded事件里，确保页面所有脚本都加载完毕后再执行：

你的外部JS文件代码改成：

document.addEventListener('DOMContentLoaded', function() {
  // 等页面所有资源加载完成后再绑定disconnect事件
  io.on("disconnect", function() {
    customAlert(userLeftmessage, 2);
  });
});

给你提个小bug修复！ #

你原函数里写了time=duration*1000，这意味着duration是秒数，不是毫秒数！如果你传2000的话，弹窗会显示2000秒（超过30分钟），这肯定不是你想要的效果。想让弹窗显示2秒的话，直接传数字2就好啦。

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