我在我的网站上创建了一个网页，每 1-60 分钟（随机/变化）获取内容更新，起初我使用以下方法使网页自动刷新：
<meta http-equiv="refresh" content="30" >
但是，在滚动和通常使用网页时，这非常烦人。
我想过在单独的网页上使用iframe，如下所示：
<iframe src="output.html" width="2500" height="10000" frameborder="0" allowfullscreen></iframe>
但是，这再次引发了更多问题，因为它不刷新（如果我删除元标记），并且我的原始网页高度根据页面上的数据量而变化。
我正在寻找一些建议/代码帮助，以获得一种仅在内容更新时刷新主网页的方法。（建议的解决方案是HTML，PHP还是任何其他语言都没有关系）
任何建议或建设性意见将不胜感激。
提前
致谢 - 海弗莱克斯
编辑：
<!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>
由于下面的帖子，我得到的最接近的是：
<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>
http://jsfiddle.net/Ask3C/
您必须替换页面之一的路径。应每 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();
});
}
你的问题很常见。你有没有探索过像提要更新这样的推特是如何工作的？您必须执行以下操作
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
);
};
注意：这里我使用的是jQuery ajax。
希望这会给出一个想法。
一个好的解决方案是使用 javascript 并以设定的时间间隔进行 ajax 调用。然后使用响应中的新内容更新任何元素。这样，您就不必处理非常烦人的刷新。