4

我在我的网站上创建了一个网页，每 1-60 分钟（随机/变化）获取内容更新，起初我使用以下方法自动刷新网页：

<meta http-equiv="refresh" content="30" >

但是，这在滚动和通常使用网页时非常烦人。

我考虑过在单独的网页上使用 iframe，如下所示： 

<iframe src="output.html" width="2500" height="10000" frameborder="0" allowfullscreen></iframe>

但是，这又会引发更多问题，因为它不刷新（如果我删除元标记），并且我的原始网页高度会根据页面上的数据量而有所不同。

我正在寻找一些建议/代码帮助，以获取一种仅在内容更新时才刷新主网页的方法。（建议的解决方案是 HTML、PHP 还是任何其他语言都没有关系）

任何建议或建设性意见将不胜感激。

提前致谢
- Hyflex

编辑：

<!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>&nbsp;</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>&#163;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>
4

3 回答 3

5

http://jsfiddle.net/Ask3C/

您将不得不替换到您的页面之一的路径。应该每 30 秒重写一次文档。这是一种 hack 方法，但如果您仍在使用 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();

    });   

}
于 2013-10-30T06:57:57.340 回答
4

你的问题很常见。您是否探索过 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
    );
};

注意：这里我使用的是 jQuery ajax。

希望这会给一个想法。

于 2013-10-30T07:02:28.623 回答
3

一个好的解决方案是使用 javascript 并以设定的时间间隔进行 ajax 调用。然后使用您的响应中的新内容更新任何元素。这样您就不必处理非常烦人的刷新。

于 2013-10-30T06:33:51.277 回答