4

1〜60分ごと（ランダム/可変）にコンテンツの更新を取得するWebページをWebサイトに作成し、最初に次を使用してWebページを自動更新しました：

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

ただし、これは、スクロールするときや一般的に Web ページを使用するときに非常に煩わしいものです。

次のように、別の Web ページで iframe を使用することを考えました。 

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

ただし、これも更新されないという問題が発生し (メタ タグを削除した場合)、元の Web ページの高さは、ページ上のデータの量によって異なります。

コンテンツが更新された場合にのみメイン Web ページを更新する方法を取得するためのアドバイス/コード ヘルプを探しています。(提案された解決策が 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 秒ごとに書き換える必要があります。これはちょっとしたハック アプローチですが、まだ 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 に答える