自动刷新特定的div博客javascript [英] Auto refresh a specific div blogger javascript
本文介绍了自动刷新特定的div博客javascript的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在一个blogspot上使用了一个Javascript小部件。它包括一个带有一些javascript的div，从服务器获取一些非静态字符串并将它们打印在页面上。在此之前一切正常，问题是我想每隔几秒更新一次该div的执行情况，以便更新字符串，而不刷新整个页面，而只是指定特定的窗口部件（div）。我添加了另一个脚本，试图刷新特定的div，但我没有运气。请参阅下面的代码
< div id =info>
< b>歌曲：< / b>
< script type =text / javascriptsrc =xxxx>
您似乎已关闭了JavaScript。
< / script>
< br />
< b>听众：< / b>
< script type =text / javascriptsrc =xxxx>
您似乎已关闭了JavaScript。
< / script>
< br />
< b>服务器状态：< / b>
< / div>
刷新的脚本：
< script type =text / javascript>
window.onload = startInterval;
函数startInterval（）
{
setInterval（startTime（）;，5000）;
}
函数startTime（）
{
document.getElementById（'info'）。innerHTML = ??? // reload div
}
< / script>
另外可以使用类似这样的方法，但是这种方法会重新加载整个页面而不是特定的div。
< script>
setInterval（function（）{
parent.location.reload（true）;
}，5000）;
< / script>
解决方案
上次更新
我尝试使用Ajax和创建的元素。
使用这种技术，加载脚本的包含，但是 document.write（） not函数。
因为 write（）需要刷新页面（）!!
仅仅从函数返回一个值并不会以任何方式将该值放入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）;
THEN document.write 仅适用于页面加载时间。
您必须更改脚本并替换 document.write（）
我把我的代码放在 createElement 工作。
< html>
< head>
< script type =text / javascriptsrc =http://code.jquery.com/jquery-2.0.0.js>< / script>
< script type =text / javascriptsrc =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 =stylesheettype =text / css/> ;
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8/>
< / head>
< body onload =JavaScript：timedRefresh（5000）;>
< div id =info>
< b>歌曲：< / b>
< script type =text / javascriptsrc =http://shoutcast.mixstream.net/js/song/uk23-free:5106>您似乎关闭了JavaScript。< /脚本>
< br />
< b>听众：< / b>
< script type =text / javascriptsrc =http://shoutcast.mixstream.net/js/listeners/uk23-free:5106>
您似乎已关闭了JavaScript。
< / script>
< br />
< b>服务器状态：< / b>
< img src =http://shoutcast.mixstream.net/status/uk23-free:5106.gifalt =流状态width =17height =17align =absmiddle />
< / div>
< script type =text / javascript>
函数timedRefresh（timeoutPeriod）{
var myVar = setInterval（function（）{myTimer（）}，timeoutPeriod）;
函数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 （'脚本'）;
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 =流状态;
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）;
}
// //创建当前页面的head元素的对象
// var hdEl = document.getElementsByTagName（song）;
//
// //检查以前追加的子
// //（确保每次按下按钮时
// //删除先前加载的脚本元素）
// if（hdEl.childNodes.length> 1）{
// hdEl.removeChild（hdEl.lastChild）;
//}
//
// //现在将这个新元素添加到头标记
//
//
// // //创建一个'script'元素
// var scrptE = document.createElement（script）;
//
// //将其设置为'type'属性
// scrptE.setAttribute（type，text / javascript）;
//
// //设置'语言'属性
// scrptE.setAttribute（language，JavaScript）;
//
// //设置它的'src'属性
// scrptE.setAttribute（src，http://shoutcast.mixstream.net/js/song/uk23 -free：5106\" ）;
//
// //现在将这个新元素添加到头标记
// hdEl.appendChild（scrptE）;
// // document.getElementsByTagName（song）。appendChild（scrptE）;
// //这是旧的：
// setTimeout（alert（ojk）;，timeoutPeriod）;
// //此功能!!!
// 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元素）找到这个错误。
解决方案是在 Stackoverflow 或prefier 博客。
我的软件是Kubuntu（KDE + Ubuntu），我不知道要更改这个值的注册表。
解决方案：
< ; HTML>
< head>
< script type =text / javascriptsrc =http://code.jquery.com/jquery-2.0.0.js>< / script>
< script type =text / javascriptsrc =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 =stylesheettype =text / css/> ;
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8/>
< / head>
< body onload =JavaScript：timedRefresh（5000）;>
< div id =info>
< b>歌曲：< / b>
< script type =text / javascriptsrc =xxxx>您似乎关闭了JavaScript。< / script>
< br />
< b>听众：< / b>
< script type =text / javascriptsrc =xxxx>
您似乎已关闭了JavaScript。
< / script>
< br />
< b>服务器状态：< / b>
< img src =xxxx.gifalt =流状态width =17height =17align =absmiddle/>
< / div>
< script type =text / javascript>
函数timedRefresh（timeoutPeriod）{
//这是旧的：
//setTimeout(\"location.reload(true);\",timeoutPeriod）;
//此功能!!!
setTimeout（document.getElementById（'info'）。innerHTML = document.getElementById（'info'）。innerHTML;，timeoutPeriod）;
}
< / script>
< / body>
< / html>
或其他解决方案：
< HTML>
< head>
< script type =text / javascriptsrc =http://code.jquery.com/jquery-2.0.0.js>< / script>
< script type =text / javascriptsrc =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 =stylesheettype =text / css/> ;
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8/>
< / head>
< body>
< div id =info>
< b>歌曲：< / b>
< script type =text / javascriptsrc =xxxx>您似乎关闭了JavaScript。< / script>
< br />
< b>听众：< / b>
< script type =text / javascriptsrc =xxxxx>
您似乎已关闭了JavaScript。
< / script>
< br />
< b>服务器状态：< / b>
< / 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）;
函数refreshDiv（）{
document.getElementById（info）。innerHTML = document.getElementById（info）。innerHTML;
}
< / script>
< / body>
< / html>
这是旧网站，但不会刷新网站。
< html>
< head>
< script type =text / javascriptsrc =http://code.jquery.com/jquery-2.0.0.js>< / script>
< script type =text / javascriptsrc =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 =stylesheettype =text / css/> ;
< / head>
< body>
< div id =info>
< b>歌曲：< / b>
< script type =text / javascriptsrc =xxxx>您似乎关闭了JavaScript。< / script>
< br />
< b>听众：< / b>
< script type =text / javascriptsrc =xxxx>
您似乎已关闭了JavaScript。
< / script>
< br />
< b>服务器状态：< / b>
< img src =xxxx.gifalt =流状态width =17height =17align =absmiddle/>
< / div>
< script type =text / javascript>
setInterval（function（）{
document.getElementById（'info'）。innerHTML = document.getElementById（'info'）。innerHTML;
}，5000）;
< / script>
< / body>
< / html>
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>
解决方案
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>
这篇关于自动刷新特定的div博客javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
