web-dev-qa-db-fra.com

Charger le HTML avant le Javascript

J'essaie de développer quelque chose en temps réel qui, dans ce cas, j'utilise socketio pour nodejs. Bien que tout fonctionne correctement, mon problème principal est que mon programme charge le javascript avant le HTML, ce qui signifie que la sortie au début est tout simplement vide.

Dans mon code, le javascript appelle tout le reste de la base de données et est concaténé par les balises dans lesquelles il est ensuite jeté dans le code HTML.

Voici mon code en 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>

Et voici le 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>';
  }
});

J'ai déjà effectué des recherches sur ce site en ligne, mais mon cas est différent puisque j'appelle le fichier javascript au format HTML, au lieu d'avoir tout le script avec le code HTML lui-même.

J'ai également lu que le fichier javascript était appelé après que le code HTML fonctionne, mais apparemment, je l'ai fait (comme le montrent mes codes) et toujours rien.

javascripthtmlnode.jssocket.io
4
DayIsGreen

Vous pouvez utiliser DOMContentLoaded :

L'événement DOMContentLoaded est déclenché lorsque le document HTML initial a été complètement chargé et analysé, sans attendre que le chargement se termine sur les feuilles de style, les images et les sous-images. Un chargement d'événements très différent ne devrait être utilisé que pour détecter une page entièrement chargée. C'est une erreur incroyablement courante d'utiliser load où DOMContentLoaded serait beaucoup plus approprié. Soyez donc prudent.

Enveloppez votre code JavaScript avec:

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

Après la réponse de Manums, vous pouvez envelopper votre code avec The DOMContentLoaded:

L'événement DOMContentLoaded est déclenché lorsque le document HTML initial a été complètement chargé et analysé, sans attendre le chargement du chargement des feuilles de style, des images et des sous-images. Un chargement d'événements très différent ne devrait être utilisé que pour détecter une page entièrement chargée. C'est une erreur incroyablement courante d'utiliser load où DOMContentLoaded serait beaucoup plus approprié. Soyez donc prudent. En savoir plus sur DOMContentLoaded - ici

Voici un extrait de code qui attend le chargement de la page, puis ouvre le fichier 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>

UPDATE: Vous pouvez charger le script dans le head tag et utiliser l'attribut defer

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

reporter

Cet attribut booléen est défini pour indiquer à un navigateur que le script est est censé être exécuté après l'analyse du document, mais avant DOMContentLoaded de déclenchement.

Cet attribut ne doit pas être utilisé si l'attribut src est absent (c'est-à-dire . Pour les scripts intégrés), dans ce cas, il n'aurait aucun effet.

Pour obtenir un effet similaire pour les scripts insérés dynamiquement, utilisez async = false à la place. Les scripts avec l'attribut defer s'exécuteront dans l'ordre dans lequel ils apparaissent dans le document.

Suite à la réponse de ici

0
Wojtek T

J'ai trouvé une réponse à mon problème ... Il semble que ce ne soit pas un problème de HTML ni un problème de javascript, mais plutôt un problème de socketio.

J'utilisais 'socket.broadcast.emit' au lieu de 'io.sockets.emit'

0
DayIsGreen

Cela pourrait fonctionner:

<body onload="script();">

ou

document.onload = function ...

ou même

window.onload = function ...

Dupliquer à partir de JavaScript qui s'exécute après le chargement de la page

0
Miaan