3 
<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>

        <!-- JQuery code -->
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        
        <!-- Script which refreshes each element every 5 seconds -->
        <script>
            setInterval(reloadElements, 5000);
            function reloadElements() {
                $('#refresh').load(location.href+' #refresh');
            }
        </script>
    </head>

    <body>
        <p id="refresh">
            This is some paragraph text. <br />
            
            <ul>
                <li> List item one. </li>
                <li> List item two. </li>
            </ul>
        </p>
    </body>
</html>

この HTML ファイルは、常にクライアント上にローカルに存在します。

私がこのスクリプトを書いた理由は、ファイルに加えられた変更を自動的にページに反映できるようにするためです (つまり、ページを手動で更新する必要はありません)。この HTML ファイルに書き込む C++ アプリケーションがあります (<p id="refresh">タグの内容のみを変更します)。

私のテスト マシンは、Windows XP 32 ビットを実行しています。

Google Chrome バージョン 26.0.1410.64 m での動作:

--allow-file-access-from-filesパラメータを指定してコマンド ライン引数を指定せずにChrome を実行し、テキスト エディタを使用して .html ファイルを変更すると、変更がブラウザに表示されませんでした。

Internet Explorer、バージョン 8.0.6001.18702、Mozilla Firefox、バージョン 20.0.1 での動作:

段落テキストのみの変更が機能します (つまり、変更が反映されます)。リストの要素を変更したり、リストの後に何かを追加したりしても反映されません。

JS Binでの動作:

予想どおり、Web ページを開いてテキスト エディターを使用して .html ファイルを変更した後、5 秒間隔が経過したときに変更がブラウザーに反映されました。

現在、Internet Explorer、Google Chrome、および Mozilla Firefox のみをサポートする必要があります。

なぜこの違いがあるのですか？私は何を間違っていますか？私が望むものを達成するためのより良い方法はありますか?

PS: これは私の最初の Web ページ コードです。

アップデート：

Firefox と Internet Explorer の問題は、 squintの役立つ提案のおかげで修正されました(以下のコメントを参照)。基本的に、<p>エレメントの内容を別の .html ファイルに入れ、そのファイルをロードするように JQuery ロードを変更しました。ただし、これがどのように違いを生むかはわかりません。

4

1 に答える 1

0

私はあなたが逃したと思いますdocument.ready

<script>
$(document).ready(function(){  
    setInterval(reloadElements, 5000);
    function reloadElements() {
        $('#refresh').load(location.href+' #refresh');
    }
});
</script>

document.readyドキュメント内の要素の準備が整った後にのみコードが実行されるようにします。

于 2013-05-07T05:35:44.387 に答える