自动刷新 IFrame HTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34123053/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Auto Refresh IFrame HTML
提问by Display Word
How do I auto Refresh a Iframe every 3 Seconds with out it refreshing the entire page. I use <meta http-equiv="refresh" content="1">but it shows the entire page refresh and puts you to the top of the page each time it does. My Iframe is pointed at a text file to read live messages I put in. Is there even a way to do this with out it refreshing the entire page, just the element. I am a HTML beginner so explain thoroughly please. I google alot and tried many things and so far nothing works and I try in many browser.
如何每 3 秒自动刷新一次 Iframe，而不刷新整个页面。我使用<meta http-equiv="refresh" content="1">但它显示整个页面刷新，并在每次刷新时将您置于页面顶部。我的 iframe 指向一个文本文件以读取我放入的实时消息。有没有办法做到这一点而不刷新整个页面，只是元素。我是一个 HTML 初学者，所以请彻底解释一下。我谷歌了很多并尝试了很多东西，到目前为止没有任何效果，我在许多浏览器中尝试过。
My code So Far:
我的代码到目前为止：
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
<title>Chat</title>
<style>
body{
margin: 0px;
}
h1{
font-family: arial;
font-size: 100%;
}
iframe{
width: 900px;
height: 500px;
}
div.top{
background-color: rgba(2, 109, 8, 0.83);
height: 30px;
width: 100%;
}
</style>
</head>
<body>
<div class="top">
<img src="favicon.png" alt="favicon" height="31" width="31" >
<h1>Chat</h1>
</div>
<iframe src="text.txt" name="iframe_a"> />
</body>
</html>
回答by Daniel Vukasovich
You have problems with your html tags. (the "iframe" tag is malformed)
您的 html 标签有问题。（“iframe”标签格式错误）
Here you have your code fixed and your answer ready to run:
在这里，您的代码已修复，您的答案已准备好运行：
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
<title>Chat</title>
<style>
body {
margin: 0px;
}
h1 {
font-family: arial;
font-size: 100%;
}
iframe {
width: 900px;
height: 500px;
}
div.top {
background-color: rgba(2, 109, 8, 0.83);
height: 30px;
width: 100%;
}
</style>
</head>
<body>
<div class="top">
<img src="favicon.png" alt="favicon" height="31" width="31">
<h1>Chat</h1>
</div>
<iframe id="iframe" src="text.txt"></iframe>
<script>
window.setInterval(function() {
reloadIFrame()
}, 3000);
function reloadIFrame() {
console.log('reloading..');
document.getElementById('iframe').contentWindow.location.reload();
}
</script>
</body>
</html>
Regards
问候
回答by Owhonda Owhonda-Wopara
<head>
<script>
function refreshIFrame() {
var x = document.getElementById("*Your_iframe_id*");
x.contentWindow.location.reload();
var t = setTimeout(refreshIFrame, 3000);
}
</script>
</head>
<body onload="refreshIFrame()">...
<iframe id="*Your_iframe_id*" src= ...></iframe>...
</body>
this solution worked for me, I discovered that the 'refreshIFrame()' function was entered as a parameter without the braces () in the following line: " var t = setTimeout(refreshIFrame, 3000);". Just substitute the relevant values and you are good to go.
这个解决方案对我有用，我发现 'refreshIFrame()' 函数是作为参数输入的，没有大括号 () 在以下行中：“ var t = setTimeout( refreshIFrame, 3000);”。只需替换相关值即可。
回答by Hakam
You could accomplish what you need by simply using a few lines of Javascript.
只需使用几行 Javascript，您就可以完成所需的工作。
<script>
window.setInterval("reloadIFrame();", 3000);
function reloadIFrame() {
document.frames["frameNameHere"].location.reload();
}
</script>
