php 仅在内容更新时自动刷新网页
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19675317/
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 a webpage on content update only
提问by Ryflex
I have created a webpage on my website which gets content updates every 1-60 mins (random/varies) and at first I made the webpage auto refresh using:
我在我的网站上创建了一个网页，它每 1-60 分钟（随机/变化）更新一次内容，首先我使用以下方法自动刷新网页：
<meta http-equiv="refresh" content="30" >
However, this is very annoying when scrolling and just generally using the webpage.
但是，这在滚动和一般使用网页时非常烦人。
I thought about using an iframe on a separate webpage like so:
我想过在单独的网页上使用 iframe，如下所示：
<iframe src="output.html" width="2500" height="10000" frameborder="0" allowfullscreen></iframe>
However, again this throws up more problems with it not refreshing (if I remove the meta tags) and my original webpage height varies depending on how much data is on the page.
但是，这再次引发了更多问题，因为它不刷新（如果我删除了元标记），并且我的原始网页高度因页面上的数据量而异。
I'm looking for some advice / code help to get a way to only refresh the main webpage if the content is updated. (It doesn't matter if a suggested solution is in HTML, PHP or any other language)
我正在寻找一些建议/代码帮助，以获取一种仅在内容更新时刷新主网页的方法。（建议的解决方案是 HTML、PHP 还是任何其他语言都没有关系）
Any suggestions or constructive comments would be greatly appreciated.
任何建议或建设性意见将不胜感激。
Thanks in advance
- Hyflex
提前致谢
- Hyflex
EDIT:
编辑：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="refresh" content="5" >
<title>data data data data data</title>
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>
<body>
<table id="gradle" summary="main">
<thead>
<tr>
<th scope="col">data</th>
<th scope="col">data</th>
<th scope="col">data</th>
<th scope="col">data Rank</th>
<th scope="col">data Odds</th>
<th scope="col">data</th>
<th scope="col">data</th>
<th scope="col">AV10</th>
<th scope="col">data Rank</th>
<th scope="col">data</th>
<th scope="col">data Rank</th>
<th scope="col">data</th>
<th scope="col">data</th>
<th scope="col">Age</th>
<th scope="col">data</th>
<th scope="col">data</th>
<th scope="col">data 14 Day</th>
<th scope="col">data CSR</th>
<th scope="col">data TSR</th>
<th scope="col">data</th>
<th scope="col">data 14 Day</th>
<th scope="col">data CSR</th>
<th scope="col">data TSR</th>
<th scope="col">data</th>
<th scope="col">data data</th>
<th scope="col">data data</th>
<th scope="col">data data</th>
<th scope="col">data data</th>
<th scope="col">data data</th>
<th scope="col">data</th>
<th scope="col">data</th>
<th scope="col">data</th>
<th scope="col">data</th>
<th scope="col">data</th>
</tr>
</thead>
<tbody>
<tr><td>data</td><td>data</td><td>data data</td><td>data</td><td>data</td><td>5f 212y</td><td><div align="left">2</div></td><td>117.88</td><td>1</td><td>117.88</td><td>1</td><td>-1</td><td> </td><td>2</td><td>22</td><td>data</td><td>14</td><td>data</td><td>data</td><td>Tdata</td><td>6</td><td>data</td><td>135.0%</td><td>data</td><td>555.0%</td><td>0.0%</td><td>10.0%</td><td>2</td><td>data</td><td>data</td><td>£45552.43</td><td></td><td>data</td><td>data</td><tr>
</tbody>
</table>
</body>
</html>
Closest I've got thanks to a post below is:
最接近我感谢以下帖子的是：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
update_content()
$(document).ready(function (e)
{
var refresher = setInterval("update_content();", 250);
})
function update_content()
{
$.ajax(
{
type: "GET",
url: "output.html",
timeout: 10000,
cache: false,
})
.done(function (page_html)
{
var newDoc = document.documentElement.innerHTML;
if (page_html != newDoc)
{
alert("LOADED");
var newDoc = document.open("text/html", "replace");
newDoc.write(page_html);
newDoc.close();
}
});
}
</script>
采纳答案by WebsterDevelopine
You will have to replace the path to the one of your page. Should rewrite the document every 30 seconds. It is a bit of a hack approach but if you are still using Meta Refresh - it is light years better. Give it a go. The script for jQuery library is just pulling from Google repository.
您将不得不替换您的页面之一的路径。应该每 30 秒重写一次文件。这是一种黑客方法，但如果您仍在使用 Meta Refresh - 它会更好。搏一搏。jQuery 库的脚本只是从 Google 存储库中提取的。
$(document).ready(function(e) {
var refresher = setInterval("update_content();",30000); // 30 seconds
})
function update_content(){
$.ajax({
type: "GET",
url: "index.php", // post it back to itself - use relative path or consistent www. or non-www. to avoid cross domain security issues
cache: false, // be sure not to cache results
})
.done(function( page_html ) {
alert("LOADED");
var newDoc = document.open("text/html", "replace");
newDoc.write(page_html);
newDoc.close();
});
}
回答by HILARUDEEN S ALLAUDEEN
Your problem is very common. Have you explored how twitter like feed update is working?. You have to do as follows
你的问题很常见。您是否探索过类似提要更新的 twitter 是如何工作的？你必须做如下
var interval = function() {
setTimeout(function() {
$.ajax({
// Ajax options goes here
success : function(data) {
// Process Data
// Generate HTML
// Insert Generated HTML whereever you want in document
interval() //Initiate next fetch
}
})
}, 1000 // Interval time
);
};
Note: Here I am using jQuery ajax.
注意：这里我使用的是 jQuery ajax。
Hopefully this will give an idea.
希望这会给一个想法。
回答by jj689
A good solution would be to use javascript and make ajax calls at set intervals. Then update whatever element with new content from your response. This way you won't have to deal with refreshes which would be very annoying.
一个好的解决方案是使用 javascript 并按设定的时间间隔进行 ajax 调用。然后使用响应中的新内容更新任何元素。这样您就不必处理非常烦人的刷新。
