如果HTML文件已更新,则执行JavaScript [英] Execute JavaScript if HTML file has been updated

查看:76
本文介绍了如果HTML文件已更新,则执行JavaScript的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图在JavaScript,jQuery甚至PHP中找到一个插件或函数,如果页面文件已经更新,每隔10秒检查一次,如果页面已经更新,则警告()用户。

I am trying to find a plugin or function in either JavaScript, jQuery, or even PHP if necessary to check every 10 seconds if the page file has been updated and alert() the user if the page has been updated.

提前致谢:)
对不起,如果我不够清楚的话。如果您有任何疑问,请发表评论。

Thanks in advance :) Sorry if I'm not clear enough. Comment if you have any questions.

编辑:换句话说,使用客户端或服务器端脚本,向服务器发送AJAX请求,确定用户打开的当前页面是否已在服务器上修改并显示警告。

In other words using either client or server side scripting, send an AJAX request to the server and determine if the current page opened by the user has been modified on the server and display an alert.

推荐答案

您可以发送一个http HEAD每10秒向服务器发出一次请求。这将使服务器只发送标题而不是内容。然后你可以选择'Last-Modified'响应头。

You can send a http HEAD request to the server every 10 seconds. This will make the server just send the headers not the content. Then you can chech the 'Last-Modified' response header.

jQuery函数 $ .ajax(); 支持与此非常类似的功能。而是检查 Last-Modified http标头jQquery使用http If-Modified-Since 向服务器发送请求头。然后它检查服务器是否响应响应代码304 Not Modified。

The jQuery function $.ajax(); supports a functionality quite similar to this. But rather then checking the Last-Modified http header jQquery sends requests to the server using the http If-Modified-Since header. It then checks if the server responds with response code 304 Not Modified.

这是一个简短的HTML + Javascript示例,描述了jQuery功能:

This is a short HTML + Javascript example described the jQuery functionality:

<html>
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
      var checkUrl="test.txt";
      var firstCheck = false;
      window.setInterval(checkForUpdate, 1000);

      function checkForUpdate() {
          $.ajax(checkUrl, {
              ifModified : true,
              type : 'HEAD', 

              success : function (response) {
                  if(firstCheck === false) {
                      firstCheck = true;
                      return;
                  }
                  $('#output').html('the site has been modified');
              }
          }); 
      }    
   </script> 
  </head>
  <body>
    <div id="output">Not Modified</div>
  </body>
</html>

但是,上面的jquery示例无效对我来说 - 使用jQuery 1.8和firefox。(Linux)+ apache2 web服务器。虽然服务器响应304未修改,但将调用成功函数。

However, the above jquery example didn't worked for me - using jQuery 1.8 and firefox.(Linux) + the apache2 web server. The success function will be called although the server responds with 304 Not Modified.

所以我将添加另一个实现我的第一个建议的工作示例上面是javascript部分:

So I'll add another working example that implements my first suggestion above, here comes the javascript part:

    var checkUrl="test.txt";
    window.setInterval("checkForUpdate()", 1000);
    var pageLoad = new Date().getTime();

    function checkForUpdate() {
        $.ajax(checkUrl, {
            type : 'HEAD',
            success : function (response, status, xhr) {
                if(firstCheck === false) {
                    firstCheck = true;
                    return;
                }
                // if the server omits the 'Last-Modified' header
                // the following line will return 0. meaning that
                // has not updated. you may refine this behaviour...
                var lastModified = new Date(xhr.getResponseHeader('Last-Modified'))
                    .getTime();
                if(lastModified > pageLoad) {
                    $('#output').html('the site has been modified');
                }
            }
        }); 
    }  

这篇关于如果HTML文件已更新,则执行JavaScript的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆