Question

我正在尝试实时开发某些东西，在这种情况下，我正在将socketio用于nodejs。尽管其他一切工作正常，但我现在的主要问题是我的程序首先在HTML之前加载了javascript，因此这意味着开始时的输出为空。

在我的代码中，javascript调用了数据库中的所有其他内容，并由标签串联起来，随后在其中将其引发到html中。

这是我的html代码：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <table>
    <tr>
      <td>
        <table id="output" border=1>
          <thead id="headers">
            <th>Name</th>
            <th>Address</th>
            <th>Number</th>
          </thead>
          <tbody id="online">
          </tbody>
        </table>
      </td>
      <td>
        <table id="output" border=1>
          <thead id="headers">
            <th>Name</th>
            <th>Address</th>
            <th>Number</th>
          </thead>
          <tbody id="offline">
          </tbody>
        </table>
      </td>
    </tr>
  </table>
  <script src="/chat.js"></script>
</body>
</html>

这是JavaScript：

var online = document.getElementById('online'),
  offline = document.getElementById('offline');

socket.on('user joined', function(data) {
  online.innerHTML = "";
  for (var ctr = 0; ctr < data.length; ctr++) {
    online.innerHTML += '<td>' + data[ctr].name + '</td>' +
      '<td>' + data[ctr].address + '</td>' +
      '<td>' + data[ctr].number + '</td>';
  }
});

socket.on('user left', function(data) {
  offline.innerHTML = "";
  for (var ctr = 0; ctr < data.length; ctr++) {
    offline.innerHTML += '<td>' + data[ctr].name + '</td>' +
      '<td>' + data[ctr].address + '</td>' +
      '<td>' + data[ctr].number + '</td>';
  }
});

我已经在线搜索过此内容，但是我的情况有所不同，因为我在html中调用javascript文件，而不是将所有脚本都包含在html本身中。

我还阅读了在html工作之后调用javascript文件的方法，但是显然，我已经做到了（如我的代码所示），仍然没有任何作用。

Answer 1

您可以使用DOMContentLoaded：

当初始HTML文档已完全加载和解析而没有等待样式表，图像和子帧完成加载时，将引发DOMContentLoaded事件。完全不同的事件加载应仅用于检测页面已满。在DOMContentLoaded更合适的地方使用负载是一个非常常见的错误，所以要谨慎。

使用以下代码包装您的JavaScript代码：

document.addEventListener("DOMContentLoaded", function(event) { 
  // your code here
});

Answer 2

这可能有效：

<body onload="script();">

或

document.onload = function ...

甚至

window.onload = function ...

与JavaScript that executes after page load重复

Answer 3

以下Manums回答，您可以使用 DOMContentLoaded：

包装代码

当初始HTML文档已完全加载和解析而没有等待样式表，图像和子帧完成加载时，将引发DOMContentLoaded事件。完全不同的事件加载应仅用于检测页面已满。在DOMContentLoaded更合适的地方使用负载是一个非常常见的错误，因此请务必谨慎。有关DOMContentLoaded的更多信息- here

这是一个代码段，等待页面加载，然后打开chat.js文件。

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <table>
    <tr>
      <td>
        <table id="output" border=1>
          <thead id="headers">
            <th>Name</th>
            <th>Address</th>
            <th>Number</th>
          </thead>
          <tbody id="online">
          </tbody>
        </table>
      </td>
      <td>
        <table id="output" border=1>
          <thead id="headers">
            <th>Name</th>
            <th>Address</th>
            <th>Number</th>
          </thead>
          <tbody id="offline">
          </tbody>
        </table>
      </td>
    </tr>
  </table>
  <script type="text/javascript">
  function downloadJSAtOnload() {
      var element = document.createElement("script");
      element.src = "/chat.js";
      document.body.appendChild(element);
  }

  if (window.addEventListener)
      window.addEventListener("load", downloadJSAtOnload, false);
  else if (window.attachEvent)
      window.attachEvent("onload", downloadJSAtOnload);
  else window.onload = downloadJSAtOnload;
</script>
</body>
</html>

更新：您可以在head tag中加载脚本并使用defer属性

<script src="/chat.js" defer></script>

推迟

此布尔属性设置为向浏览器指示该脚本   是指在文档解析后但在   触发DOMContentLoaded。

如果不存在src属性，则不得使用此属性（即   对于内联脚本），在这种情况下将无效。

要获得与动态插入脚本类似的效果，请使用   改为async = false。具有defer属性的脚本将在以下位置执行   它们在文档中出现的顺序。

按照here的回答

Answer 4

我已经找到问题的答案。看来这不是html问题也不是javascript问题，而是socketio问题。

我使用的是'socket.broadcast.emit'，而不是'io.sockets.emit'

Answer 5

这是一个常见问题，可以通过将JavaScript代码包装在其中来轻松解决

window.setTimeout(function() {

// your js code goes here

}, 500);

在Javascript之前先加载HTML

5 个答案: