Question

我在blogspot上使用Javascript小部件。它包含一个带有一些javascripts的div，它从服务器获取一些“非静态”字符串并在页面上打印它们。直到这里一切正常，问题是我想每隔几秒更新一次div的执行，以便更新字符串，而不刷新整个页面，只是特定的小部件（div）。我添加了另一个尝试刷新特定div的脚本，但我没有运气。请参阅以下代码

<div id="info">
<b>Song:</b>
<script type="text/javascript" src="xxxx">
You appear to have javascript turned off.
</script>
<br />
<b>Listeners:</b>
<script type="text/javascript" src="xxxx">
You appear to have javascript turned off.
</script>
<br />
<b>Server Status:</b> 
<img src="xxxxx.gif" alt="Stream status" width="17" height="17" align="absmiddle" />
</div>

刷新脚本：

  <script type="text/javascript">
    window.onload = startInterval;
    function startInterval()
    {
        setInterval("startTime();",5000);
    }

    function startTime()
    {
        document.getElementById('info').innerHTML = ??? // reload div    
    }
  </script>

此外可以使用类似的东西，但这种方法重新加载整个页面，而不是特定的div。

<script>
setInterval(function() {
    parent.location.reload(true);
}, 5000); 
</script>

Answer 1

上次更新

我尝试使用Ajax和创建的元素。使用此技术，加载脚本的包含但document.write()不起作用。因为此write()需要refresh page()!!

仅从函数返回值不会以任何方式将该值放入HTML元素中。可以使用document.write（不推荐），也可以通过其ID访问元素，并通过.innerHTML=…

写出所需的元素内容

解释

如果你要在页面上显示它，首先要创建一个带有id“message”的元素（你可以写任何你想要的东西，但要记住，id必须在页面上是唯一的），比如

<div id="message"></div>

然后使用

document.getElementById("message").innerHTML = "New title";

或者如果您使用的是jQuery：

$("#message").html("New title");

或者如果您使用的是支持控制台的浏览器（Firefox，Chrome等）

console.log("New title");

而不是

document.write("New title");

然后 document.write仅限于页面加载时间。

您必须更改脚本并替换document.write()

我将我的代码放在createElement上，并在评论中看到我的工作。

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.js"></script>

    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
</head>
<body onload="JavaScript:timedRefresh(5000);">
<div id="info">
<b>Song:</b>
<script type="text/javascript" src="http://shoutcast.mixstream.net/js/song/uk23-free:5106">You appear to have javascript turned off.</script>
<br />
<b>Listeners:</b>
<script type="text/javascript" src="http://shoutcast.mixstream.net/js/listeners/uk23-free:5106">
You appear to have javascript turned off.
</script>
<br />
<b>Server Status:</b> 
<img src="http://shoutcast.mixstream.net/status/uk23-free:5106.gif" alt="Stream status" width="17" height="17" align="absmiddle" />
</div>


      <script type="text/javascript">
      function timedRefresh(timeoutPeriod) {

var myVar=setInterval(function(){myTimer()},timeoutPeriod);

function myTimer()
{

          document.getElementById("info").innerHTML="";
          var b=document.createElement('B');
          b.appendChild( document.createTextNode("Song") );
          document.getElementById("info").appendChild(b);
// span.innerHTML="";
// span.appendChild( document.createTextNode("hello") );
// document.getElementById('myspan').innerHTML = 'newtext';



           var src1 = 'http://shoutcast.mixstream.net/js/song/uk23-free:5106',
                script1 = document.createElement('SCRIPT');
                script1.type="text/javascript";
           script1.src = src1;
           document.getElementById("info").appendChild(script1);

           var br= document.createElement('BR');
           document.getElementById("info").appendChild(br);
           document.getElementById("info").appendChild(br);
           var b=document.createElement('B');
           b.appendChild( document.createTextNode("Listeners") );
           document.getElementById("info").appendChild(b);
           var src2 = 'http://shoutcast.mixstream.net/js/listeners/uk23-free:5106',
                script2 = document.createElement('SCRIPT');
                script2.type="text/javascript";
           script2.src = src2;
           document.getElementById("info").appendChild(script2);

           document.getElementById("info").appendChild(br);

           var b=document.createElement('B');
           b.appendChild( document.createTextNode("Server Status") );
           document.getElementById("info").appendChild(b);

              var src3 = 'http://shoutcast.mixstream.net/js/song/uk23-free:5106',
                script3 = document.createElement('IMG');

           script3.src = src3;
           script3.alt="Stream status";
           script3.width="17";
           script3.height="17";
           script3.align="absmiddle";
           document.getElementById("info").appendChild(script3);
//              
//              document.body.appendChild(script);
//              
//              document.body.info.appendChild(b);
//            document.getElementsByTagName('b')[1].appendChild( document.createTextNode("Listeners") );
//             document.body.info.appendChild(script2);
//            var br= document.createElement('BR');
//            
//            document.body.info.appendChild(br);
}   
//    // create an object of the head element of current page
//   var hdEl = document.getElementsByTagName("song");
// 
//   //check for previously appended child 
//   //(it ensures that each time the button is pressed it
//   // removes the previously loaded script element)
//   if (hdEl.childNodes.length > 1) {
//    hdEl.removeChild(hdEl.lastChild);
//   }
// 
//   // Now add this new element to the head tag
//   
//   
//     //Create a 'script' element  
//   var scrptE = document.createElement("script");
// 
//   // Set it's 'type' attribute   
//   scrptE.setAttribute("type", "text/javascript");
// 
//   // Set it's 'language' attribute
//   scrptE.setAttribute("language", "JavaScript");
// 
//   // Set it's 'src' attribute
//   scrptE.setAttribute("src", "http://shoutcast.mixstream.net/js/song/uk23-free:5106");
// 
//   // Now add this new element to the head tag
//   hdEl.appendChild(scrptE);
// //   document.getElementsByTagName("song").appendChild(scrptE);
//     //This is a old:
//    setTimeout("alert("ojk");",timeoutPeriod);
//     //  This function!!!
//  setTimeout("document.getElementById('info').innerHTML = document.getElementById('info').innerHTML;",timeoutPeriod);
// var oHead = document.getElementsByTagName('HEAD').item(0);
// var oScript= document.createElement("script");
// oScript.type = "text/javascript";
// oScript.src="other.js";
// oHead.appendChild( oScript);

}
  </script>
</body>
</html>

<强>更新

，然后...

我改变你的网站，现在功能!!! 在我的电脑上，这个网站每5秒刷新一次！你总是有两个特殊的错误。

这项工作适合您，但您有特殊错误。 Resource interpreted as Script but transferred with MIME type text/html: "http://xxxx"。第13号句子以及第18号句子。

http://xxxx

我使用工具的chrome（Inspect元素）找到此错误。

解决方案位于Stackoverflow或更早blog。

我的软件是Kubuntu（KDE + Ubuntu），我不知道更改值的注册表。

<强>解决方案：

<html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> <link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body onload="JavaScript:timedRefresh(5000);"> <div id="info"> <b>Song:</b> <script type="text/javascript" src="xxxx">You appear to have javascript turned off.</script> <br /> <b>Listeners:</b> <script type="text/javascript" src="xxxx"> You appear to have javascript turned off. </script> <br /> <b>Server Status:</b> <img src="xxxx.gif" alt="Stream status" width="17" height="17" align="absmiddle" /> </div> <script type="text/javascript"> function timedRefresh(timeoutPeriod) { //This is a old: //setTimeout("location.reload(true);",timeoutPeriod); // This function!!! setTimeout("document.getElementById('info').innerHTML = document.getElementById('info').innerHTML;",timeoutPeriod); } </script> </body> </html>

或其他解决方案：

<html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> <link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body > <div id="info"> <b>Song:</b> <script type="text/javascript" src="xxxx">You appear to have javascript turned off.</script> <br /> <b>Listeners:</b> <script type="text/javascript" src="xxxxx"> You appear to have javascript turned off. </script> <br /> <b>Server Status:</b> <img src="xxxxx.gif" alt="Stream status" width="17" height="17" align="absmiddle" /> </div> <script type="text/javascript"> // function timedRefresh(timeoutPeriod) { // setTimeout("document.getElementById('info').innerHTML = document.getElementById('info').innerHTML;",timeoutPeriod); // document.getElementById("info").innerHTML=document.getElementById("info").innerHTML // } window.setInterval("refreshDiv()", 5000); function refreshDiv(){ document.getElementById("info").innerHTML = document.getElementById("info").innerHTML; } </script> </body> </html>

这是一个旧网站，但不刷新网站。

<html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> <link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/> </head> <body> <div id="info"> <b>Song:</b> <script type="text/javascript" src="xxxx">You appear to have javascript turned off.</script> <br /> <b>Listeners:</b> <script type="text/javascript" src="xxxx"> You appear to have javascript turned off. </script> <br /> <b>Server Status:</b> <img src="xxxx.gif" alt="Stream status" width="17" height="17" align="absmiddle" /> </div> <script type="text/javascript"> setInterval(function(){ document.getElementById('info').innerHTML = document.getElementById('info').innerHTML; }, 5000); </script> </body> </html>

Answer 2

这是一个小提琴工作示例，说明我通常如何声明我的设置间隔函数...

这个将我的#info div的内部html设置为时间戳，这样你就可以看到它是有用的了。

fiddle here with set interval 但我认为这个过程还有另一个缺陷......

在这里看起来你正在将div的内容更新为与之前完全相同的html：

    document.getElementById('info').innerHTML = document.getElementById('info').innerHTML;

这可能是您的问题，您使用的外部脚本可能正在编写html，而您只是复制它而不是再次运行这些脚本。你想要做的是运行某种AJAX调用来重新运行这些脚本。

如果您对该路线感兴趣，可以使用jquery库更轻松地完成此操作。或者维护严格的javascript我会建议从这里开始：

w3 ajax tutorial

自动刷新特定div博客javascript

2 个答案: