自动刷新特定div博客javascript
作者：互联网
我在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元素)找到了这个错误.
解决方案是Stackoverflow或更早于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>
标签：html,blogger,javascript,refresh,reload 来源： https://codeday.me/bug/20190729/1567518.html