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上的行为：

正如预期的那样，在打开网页并使用文本编辑器修改 .html 文件后，更改会在 5 秒间隔到期时反映在浏览器上。

我目前只需要支持 Internet Explorer、Google Chrome 和 Mozilla Firefox。

为什么会有这种差异？我究竟做错了什么？有没有更好的方法来实现我想要的？

PS：这恰好是我的第一个网页代码。

更新：

由于squint的有用建议，我修复了 Firefox 和 Internet Explorer 问题（请参阅下面的评论）。我基本上将<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 回答