将 Socket.IO 放在 html 头标签中答案

【问题标题】：Put Socket.IO in the html head tag将 Socket.IO 放在 html 头标签中
【发布时间】：2017-02-18 07:12:18
【问题描述】：

所以我一直在做socket.IO，我从聊天示例开始。我的聊天服务现在非常精细，但它基于原始教程。他们在教程中放了

<script src="/socket.io/socket.io.js"></script>
<script src="/script.js"></script>

在正文标签的末尾。出于组织原因，我想将脚本标签放在头部，但是当我这样做时，我的代码不再有效。我很好奇为什么会发生这种情况，即使没有可能的解决方案。

【问题讨论】：

我把它放在头脑中的项目工作正常。问题一定是您的代码所特有的。
你有没有在脑海中添加这个 - <script> var socket = io(); </script>
你应该记住他们把代码放在底部，所以内容在脚本之前加载。如果您首先加载脚本，则必须（通常）等到页面加载后再执行任何逻辑，使用类似 window.onload
@SamJudge 说得通，谢谢！
您为什么坚持遵循不良做法？

标签： javascript html node.js socket.io

【解决方案1】：

您可以将<script> 标签放在 HTML 中的任何位置（在合理范围内）。将<script> 标签放在<head> 中可能遇到的唯一问题是它们将首先加载。 HTML 的工作方式是按顺序遍历代码，这意味着如果您尝试从您的 JavaScript 引用代码中的某些内容 HTML 代码并且您的 JavaScript 先出现，您将收到一个错误，即找不到您所在的元素参考。

为了避免这种情况，JS 通常放在最后。如果由于某种原因您需要<head> 中的 JS，您有两种选择：

将代码放入按钮中。这是因为文档会加载所有内容，然后仅在按下按钮时运行引用 HTML 的 JavaScript。
如果您不希望用户必须按下按钮，或者某个按钮由于其他原因无法工作，您可以使用内置函数，例如<body onload="script();">。此示例将仅在主体加载后运行 script() 内的代码。如果这不起作用，您可以使用其他类似的功能，例如 document.onload = function ... 或 jQuery 的 $( document ).ready()

希望这会有所帮助！

【讨论】：