自动刷新特定的 div 博客 javascript答案

【问题标题】：Auto refresh a specific div blogger javascript自动刷新特定的 div 博客 javascript
【发布时间】：2013-05-13 21:25:10
【问题描述】：

我在 blogspot 上使用 Javascript 小部件。它包括一个带有一些 javascripts 的 div，这些 javascripts 从服务器获取一些“非静态”字符串并将它们打印在页面上。直到这里一切正常，问题是我想每隔几秒钟更新一次这个 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>

【问题讨论】：

startTime() 正在执行，但 document.getElementById('info').innerHTML = document.getElementById('info').innerHTML 这没有任何效果。尝试在 startTime 中添加console.log("startTime()"); 看看它是否正在运行。
感谢您的快速回复，是的，函数 startTime() 已正确执行，我已尝试将代码替换为其他代码，它工作正常。问题显然出在 document.getElementById('info').innerHTML = document.getElementById('info').innerHTML;代码错误。
那么，您需要代码来从服务器获取文本。查看 jQuery 和 $.get()。
很抱歉没有把我的问题说清楚。我从服务器获取文本，它正确显示在屏幕上。我的问题是我想每 5 秒更新一次此操作。
用javascript“从服务器获取文本”？

标签： javascript html refresh reload blogger

【解决方案1】：

最后更新

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

仅仅从函数返回一个值不会以任何方式将该值放入 HTML 元素中。可以使用document.write（不推荐），或者通过其id访问元素并通过.innerHTML=…写入所需的元素内容

解释一下。

如果你要在页面上显示它，首先创建一个 id 为“消息”的元素（你可以写任何你想要的东西，但请记住，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（检查元素）中发现了这个错误。

解决方案在Stackoverflow 或首选blog。

我的软件是 Kubuntu (KDE + Ubuntu)，我不知道要更改 value 的注册表。

解决方案：

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

【讨论】：

我只是在寻找一种方法来重新加载一段代码，而不是重新加载整个页面。另外，这是一个 blogspot JS 小部件，我在使用 JS 以外的其他东西时有很多限制
歌曲：未知 - 70 s 8o s 90 s MEGAMIX Classic Project 1 by Nicolas Escobar 听众：0 服务器状态：这个，总是每 5 秒在网站上打印一次（在我的电脑上） )
感谢您的帮助，但这不起作用。不允许进入博客 Javascript 小部件，我尝试将代码添加到模板的中，但没有运气。我想通知我，我无权访问提供信息的服务器。你说你的电脑上总是有相同的字符串，这就是问题所在，服务器会在一段时间后更改字符串，如果你现在按刷新，会有不同的字符串。这就是我要“自动刷新”这个特定小部件的意思。
现在我了解您的情况以及您与某些电台的合作了吗？
是的，没错，米尔科。我在 blogspot 上托管广播页面，并从广播服务器收集有关歌曲标题、听众等的信息……但是 blogspot 在实现小部件代码方面有太多限制。我不想刷新整个页面，因为广播流也会刷新，所以听众会每 5 秒听到一次间隙。

【解决方案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

【讨论】：

这是一个 blogspot JS 小部件，使用 JS 以外的东西我有很多限制
我会从 w3 ajax 教程开始，严格来说是 javascript，因为我没有提到其他库
感谢您的帮助，但重点不是学习一些Javascript命令或语法（此外我知道上面的代码行是错误的，这就是为什么我发布它，以表达研究对象）。关键是要确定是否有能力每隔几秒钟通过 Javascript 在 blogspot 小部件（或至少整个小部件）上重新加载特定代码。