自动刷新特定 div 博主 javascript

Question

提问by Doctor_E

I use a Javascript widget on a blogspot. It include a div with some javascripts that get some "non-statical" strings from a server and print them on the page. Until here everything works fine, the problem is that I would like to update the execution of this div every few seconds in order to have updated strings, without refreshing the whole page, but just the specific widget (div). I have added another script that tries to refresh the specific div, but I had no luck. Please see the code below

我在 blogspot 上使用 Javascript 小部件。它包括一个带有一些 javascript 的 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 for refreshing:

刷新脚本：

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

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

Additionally something like this could be used, but this method reload the whole page and not the specific div.

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

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

Answer 1

回答by Mirko Cianfarani

Last Update

最后更新

I try with Ajax and with created element. With this technique, load the contains of the scripts but the document.write()not function. Because this write()need the refresh page()!!

我尝试使用 Ajax 和创建的元素。使用这种技术，加载脚本的包含而document.write()不是函数。因为这write()需要refresh page()!!

Just returning a value from a function does not place that value into an HTML element in any way. One could either use document.write(not recommended), or access the element via its id and write the desired element content via .innerHTML=…

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

Explain.

解释。

If you will be displaying it on page, first create an element with an id "message" (you can write anything you want, but remember, id's have to be unique on the page) like

如果您要在页面上显示它，首先创建一个带有 id 为“message”的元素（您可以编写任何您想要的内容，但请记住，id 在页面上必须是唯一的），例如

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

and then use

然后使用

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

or if you are using jQuery:

或者如果您使用的是 jQuery：

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

or if you are using a console enabled browser (Firefox, Chrome etc.)

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

console.log("New title");

instead of

代替

document.write("New title");

THENdocument.writeonly for page loading time.

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

You have to change the scripts and replace document.write()

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

I put the my code with createElementand on the comment you look the my work.

我把我的代码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>

UPDATE:

更新：

THEN....

然后....

I change your site and now function!!! And on the my pc this site is refresh every 5 second!!! You have always the two particular errors.

我更改了您的网站，现在可以运行了！！！在我的电脑上，这个网站每 5 秒刷新一次！！！你总是有两个特定的错误。

This work for you but you have the particular error. Resource interpreted as Script but transferred with MIME type text/html: "http://xxxx". on the sentence n° 13 and also for sentence n°18.

这对你有用，但你有特定的错误。 Resource interpreted as Script but transferred with MIME type text/html: "http://xxxx". 在第 n° 13 句和第 n° 18 句中。

http://xxxx

This error I find with the tool's chrome (Inspect element).

我在工具的 chrome（检查元素）中发现了这个错误。

The solution is on Stackoverflowor prefier the blog.

解决方案是在Stackoverflow或 prefier博客上。

I have the software is Kubuntu (KDE + Ubuntu) and I don't know for change the value 's registry.

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

Solution:

解决方案：

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

Or other solution:

或其他解决方案：

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

This is a old site but not refresh the site.

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

<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

回答by Joe

here is a fiddle working example of how i typically declare my set interval functions...

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

this one is setting the inner html of my #info div to a timestamp just so u can see that it is functional.

这个是将我的#info div 的内部 html 设置为时间戳，以便您可以看到它的功能。

fiddle here with set intervalbut i think there is another flaw in this process...

在这里摆弄设定的间隔，但我认为这个过程还有另一个缺陷......

it looks like here you are updating the contents of the div to exactly the same html as they were before:

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

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

this is likely your issue, the external scripts you are using are likely writing html, and you are just copying it rather than running those scripts again. what you want to do is run some sort of AJAX call to rerun those scripts.

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

you can do this more easily with the jquery library if you are interested in going that route. or to maintain strict javascript i would reccomend starting here:

如果您有兴趣走那条路，您可以使用 jquery 库更轻松地完成此操作。或者为了保持严格的 javascript，我建议从这里开始：

w3 ajax tutorial

w3 ajax 教程

自动刷新特定 div 博主 javascript

提问by Doctor_E

回答by Mirko Cianfarani

回答by Joe

相关推荐

最近更新

标签

自动刷新特定 div 博主 javascript

提问by Doctor_E

回答by Mirko Cianfarani

回答by Joe

相关推荐

javascript flexslider 中的垂直和水平滑动

javascript 单击元素的innerHTML

javascript 如何从JS更改输入类型日期的最大值或最小值

为什么/如何将`value="javascript:alert(1)"` 视为 OWASP ZAP 工具中的 XSS 漏洞？

相关推荐

最近更新

标签