当页面没有完全加载时，如何在JavaScript中刷新div内容？

lymnna71 于 2023-01-24 发布在 Java

关注(0)|答案(2)|浏览(171)

我有一个很小的网页，其中只有一个div，需要定期更新其内容，服务器发送JavaScript，其中包含div中需要更新的新数据，下面是服务器发送的代码的第一部分：

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

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

经过一段延迟（2秒）后，服务器将发送以下剩余代码：

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

</html>

问题是，我从来没有看到div显示“0”-浏览器等待，直到整个页面加载，并立即显示“1”在div中。我如何让div显示“0”在它，而服务器还没有发送整个页面？
我不想使用任何jQuery或 AJAX 代码-请限制您的答案只JavaScript。

JavaScript

来源：https://stackoverflow.com/questions/9899255/how-to-refresh-a-div-content-in-javascript-when-the-page-has-not-loaded-complete

2条答案

按热度按时间

y1aodyip1#

您不能使用onload-〉，它只有在整个页面完全加载后才被触发。
此外，您还必须向第一个响应添加更多的字节，因为大多数浏览器只有在接收到一定数量的数据后才开始增量呈现页面。
这应该行得通：

<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>

--延迟---

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

</html>

下面是node. 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);

它首先显示"0"，2秒后显示"1"

赞(0）回复(0）举报 2023-01-24

ktecyv1j2#

我不确定你尝试的方式是否可行。浏览器总是要等到页面完全加载，所以它总是要等到你发送第二批。
如果你不想使用 AJAX 或jQuery，你可以尝试一个hacky版本来得到你想要的。
您可以在页面上指定一个回调函数，用参数填充div，类似于

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

然后，在页面上设置一个超时，向服务器发送请求，动态加载调用该函数的javascript文件。

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

你加载的脚本可以是静态的，也可以是一些返回javascript文件的servlet/php文件，也就是说，它将其内容类型头设置为“text/javascript”。
在该脚本中，您将生成以下内容：

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

一旦加载了该div，它将调用前面声明的函数，并加载该div中的内容。
它实际上是 AJAX 的一种黑客形式，但不是AJAX。

赞(0）回复(0）举报 2023-01-24

我来回答

当页面没有完全加载时，如何在JavaScript中刷新div内容？

2条答案

相关问题

热门标签

最新问答