自动刷新特定div博客javascript

2022-10-06 13:20:42

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

解决方法:

最后更新

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

只是从函数返回一个值不会以任何方式将该值放入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 onl oad="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秒刷新一次！
你总是有两个特殊的错误.

这项工作适合您,但您有特殊错误.
资源解释为脚本但使用MIME类型text / html传输：“http：// xxxx”.在第13号句子和第18号句子.

http://xxxx

我用工具的chrome(Inspect元素)找到了这个错误.

解决方案是*或更早于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 onl oad="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>

码农公寓

相关文章