Wie aktualisiert man einen Div-Inhalt in Javascript, wenn die Seite nicht vollständig geladen wurde?

Ich habe eine kleine Webseite mit einem einzelnen div, dessen Inhalt regelmäßig aktualisiert werden muss. Der Server sendet Javascript mit einer Funktion, die die neuen Daten enthält, die im div aktualisiert werden sollen. Hier ist der erste Teil des Codes, der Server sendet:Wie aktualisiert man einen Div-Inhalt in Javascript, wenn die Seite nicht vollständig geladen wurde?

<html> 
<head> 
<script> 
    function bar() { 
    document.getElementById("foo").innerHTML = "0"; 
    } 
</script> 
</head> 

<body onLoad="bar()"> 
<div id="foo"></div> 
</body>

Nach einer Verzögerung (2 Sekunden), sendet der Server in dem verbleibenden Code unten:

<script type="text/javascript"> 
    function bar() { 
    document.getElementById("foo").innerHTML = "1"; 
    } 
</script> 
</script> 

</html>

Das Problem ist, dass ich nie sehen div show "0" drin - der Browser wartet bis die ganze Seite geladen ist und zeigt sofort "1" im div an. Wie bekomme ich das div, um "0" darin anzuzeigen, während der Server die ganze Seite nicht gesendet hat?

Ich verwende keinen JQuery- oder AJAX-Code - bitte beschränken Sie Ihre Antworten nur auf JavaScript.

Quelle

2012-03-27 Specksynder

Warum Sie nicht den Inhalt von foo ohne Javascript zu 0, wenn der Server sendet die html gesetzt? Nachdem die Seite geladen wurde, können Sie innerHTML löschen und mit Javascript auf 1 setzen. –

Ich brauche den Inhalt des Div zu ändern, wie mehr JavaScript vom Server kommt. Das Hauptproblem bestand darin, dass der Browser die Seite erst wieder gerendert hat, wenn sie vollständig zurückgegeben wurde. Überprüfen Sie die akzeptierte Antwort unten für eine Erklärung. – Specksynder

Sie können nicht verwenden onload -> das wird nur ausgelöst, nachdem die ganze Seite vollständig geladen wurde.

Außerdem müssen Sie der ersten Antwort weitere Bytes hinzufügen, da die meisten Browser erst nach einer bestimmten Anzahl empfangener Daten mit dem inkrementellen Rendern der Seite beginnen.

sollte diese Arbeit:

<html> 
<head> 
<script> 
    function bar(x) { 
    document.getElementById("foo").innerHTML = x; 
    } 
</script> 
</head> 

<body> 
<!-- AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA --> 
<div id="foo"></div> 
<script type="text/javascript"> 
    bar(0); 
</script> 
</body>

--- --- DELAY ist

<script type="text/javascript"> 
    bar(1); 
</script> 
</script> 

</html>

Hier ist ein funktionierendes Beispiel in Knoten.js:

var http=require('http'); 

var server=http.createServer(function(req,res){ 
    res.write('<html><head> <script> function bar(x) { document.getElementById("foo").innerHTML = x; }</script> </head> <body><!-- AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA --> <div id="foo"></div><script>bar(0);</script> </body>'); 
    setTimeout(function(){ 
     res.end('<script type="text/javascript"> bar(1); </script></html>'); 
    },2000); 
}); 

server.listen(8080);

es zeigt zuerst "0", dann nach 2 Sekunden "1"

Quelle

2012-03-28 00:26:38 stewe

Danke, das hat gut funktioniert! – Specksynder

Ich bin mir nicht sicher, ob es möglich ist, es so zu machen, wie Sie es versuchen. Der Browser wird immer warten, bis die Seite vollständig geladen ist. Daher wird immer gewartet, bis Sie den zweiten Stapel senden.

Wenn Sie nicht AJAX oder jQuery verwenden möchten, können Sie eine Hacky-Version versuchen, um zu bekommen, was Sie wollen.

Was können Sie tun, ist eine Callback-Funktion auf Ihrer Seite geben Sie den div mit einem Parameter zu füllen, so etwas wie

callback = function(data) { 
    document.getElementById('foo').innerHTML = data; 
}

Anschließend legen Sie ein Timeout auf Ihrer Seite eine Anfrage an den Server senden um eine JavaScript-Datei dynamisch zu laden, die diese Funktion aufruft. Also noch einmal:

myTimeout = function() { 
    var script = document.createElement('script'); 
    script.src = "http://myserver.com/mydynamicscript"; 
    document.getElementByTagName('head').appendChild(script); 
} 
setTimeout(myTimeout, 2000);

Das Skript, das Sie laden entweder statisch sein kann, oder eine Servlet/php-Datei, die eine JavaScript-Datei zurückgibt, das heißt, sie setzt es Content-Type-Header „text/javascript“.

In diesem Skript, würden Sie dann diese erzeugen:

callback("whatever I want to put in my div...");

Sobald das geladen ist, wird die vorherige Funktion aufrufen, die Sie zuvor erklärt, und in diesem div den Inhalt laden.

Es ist effektiv eine hacky Form von AJAX, aber nicht AJAX.

Quelle

2012-03-27 23:49:37

Danke für die Antwort, aber ich werde mit der unten vorgeschlagenen Antwort gehen, da es besser zu meinem Anwendungsfall passt. – Specksynder

Wie aktualisiert man einen Div-Inhalt in Javascript, wenn die Seite nicht vollständig geladen wurde?

Antwort

Verwandte Themen