Auto refresh a specific div blogger javascript

2019-02-24 23:02发布

站内问答 / JavaScript
1370 2 6

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

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

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

2条回答
Explosion°爆炸
2楼-- · 2019-02-24 23:25

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.

fiddle here with set interval but 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:

    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.

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:

w3 ajax tutorial

查看更多
0人赞 添加讨论(0) 举报
倾城　Initia
3楼-- · 2019-02-24 23:40

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()!!

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

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

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

and then use

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

or if you are using jQuery:

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

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

console.log("New title");

instead of

document.write("New title");

THEN document.write only for page loading time.

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

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

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

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.

http://xxxx

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

The solution is on Stackoverflow or prefier the blog.

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

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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)