检查页面的更新版本，如果存在，则重新加载

Question

基本上，我希望我的页面（比如 page.html）检查是否存在 page.html 的较新版本，如果存在，则刷新页面，并在这样做时调出较新的版本版本。

我意识到这会在一段时间后自动发生 - 但是，我希望这在 30 秒到 2 分钟的时间内发生。

我不确定这将如何完成 - 也许是一些 Javascript?

if(/*newer version exists*/) {
location.reload();
}

我不确定的部分是如何检测是否存在更新版本。

我有一个解决方法的想法- 有一个函数可以检查是否发送了某种 "signal"（我会在修改页面后立即发送），一旦收到 "signal"，就刷新页面。

到目前为止，我唯一发现的是元刷新。我以前没想过要使用它 - 但是，看起来我可能不得不使用它。

<META HTTP-EQUIV="refresh" CONTENT="60">

元刷新的唯一问题是它每分钟刷新一次，无论我是否有新版本的页面，这会非常烦人 - 特别是因为我的页面上有图像。

是否可以专门针对元素进行元刷新？（被引用的元素将是一个 Javascript 段，我经常修改它，它需要是最新的）

更新 1 部分脚本：按下按钮时重新加载 main.js。通过一些调整，我可以每分钟左右重新加载脚本。

沙盒

    <button id="refreshButton" onclick="loadScript('/main.js')">
        Refresh script
    </button>


    <script>
        function loadScript(location) {
            var js = document.getElementById("sandboxScript");
            if(js !== null) {
                document.body.removeChild(js);
                console.info("---------- Script refreshed ----------");
            }

            // Create new script element and load a script into it
            js = document.createElement("script");
            js.src = location;
            js.id = "sandboxScript";
            document.body.appendChild(js);
        }
    </script>

Answer 1

由于 HTTP 的限制，这是不可能的。 HTTP 以 request/response 周期工作。

加载页面时，您会自动在服务器上获取最新版本。它不会在没有请求的情况下收到新版本，即您不能 "push" 自动将信息发送给客户端。

我认为您需要的是 sockets (Read About Sockets) 的实现，它是服务器和客户端之间的开放通信端口，允许"pushes" 来自服务器。

但是，这是在服务器端实现的，可能不在您的项目范围内。

Answer 2

最后，我找到了比简单地重新加载页面更简单的解决方案。

我链接到一些外部脚本（实际上，这是我唯一需要重新加载的东西）

然后我写了一个小函数（我把它添加到问题中），每10分钟重新获取一次外部脚本。就像一个魅力，更好的是，在屏幕上不可见，所以它不会打扰用户一点点！

Answer 3

由于 WebSockets 的可用性和简单的 google Firebase 消息传递或推送消息传递，现在基本上没有什么是不可能的。您可以非常轻松地将任何推送消息发送到客户端页面或 html 应用程序以进行自我更新。或者只是告诉您的用户刷新他们的页面。这在 Chrome、firefox 和 Safari 上可用。

但是由于您要求的是简单的 JS 解决方案，因此我自己尝试了以下方法，因为我对我的一个在线录取系统项目也有类似的需求。虽然我在我的项目中使用 PHP，但我需要 html 页面（以保持最小的服务器负载）来向用户显示简单的说明。但我发现作为 html 它会被浏览器缓存，用户看不到 imp 指令更改。所以这是我解决它的努力。

There are 2 part of this.

Client side Javascript &

Server side PHP for checking file modified time.

1。客户端 Javascript

将此放在您要跟踪更改的 somePage.html 页面中

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
console.log( "ready!" );

function CheckNewVersion() {
    var serverFileDate;
    var cachePageDate;

    var cacheFileName = window.location.pathname.split("/").pop();//ge current client file name
    // Document page name is dependant on addressbar URL and for root this might fail. This is simple work around for it.
    if (cacheFileName=="")
    {
        cacheFileName="index.html";
    }
    console.log( "Checking New Version of "+cacheFileName+" on server..." );

    var cachePageDate = document.lastModified; // Check Document Last modified of client page
    var cacheFile = new Date(cachePageDate);// Format to date object
    console.log("Cached File Last Modified: "+cacheFile);



    var jqxhr = $.ajax({//Send file name to script on server to get any change
              method: "GET",
              url: "modify-check.php",
              data: { f: cacheFileName}
            })
          .done(function(data) {
            serverFileDate = data.trim();
            var serverFile = new Date(serverFileDate);
            console.log("Server File Last Modified: "+serverFile);
            if (serverFile>cacheFile)//check for change in modified date.
            {
                console.log('Server has latest version... reload your browser!');
                var ans = confirm("Server has latest version... reload your browser?");
                if (ans == true) {
                    location.reload(true);
                } else {
                    // 
                }
            }else
              {
                  console.log('Everything ok & updated!');
              }
          })
          .fail(function(e) {
            console.log( "error"+e );
          })
          .complete(function() {
            //console.log( "complete" );
            setTimeout(CheckNewVersion, 5000);//check every 5 sec only if complete.
          });
}

setTimeout(CheckNewVersion, 5000);  //check every 5 sec 

    });
//-->
</script>

2。服务器端 PHP 脚本

将其放入服务器上的 modify-check.php 文件中以检查给定文件是否已修改 date-time

<?php
//Very simple and self explainatory!
$filename = $_GET['f'];
if (file_exists($filename)) {
    echo date ("m/d/y H:i:s", filemtime($filename));
}
?>

这可能不是标准解决方案，但它解决了我的问题。希望对您有所帮助！

检查页面的更新版本，如果存在，则重新加载

Check for newer version of page, and if existing, reload

html

javascript

refresh

reload

partial-page-refresh

沙盒

1。客户端 Javascript

2。服务器端 PHP 脚本