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

Question

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

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

我不确定这将如何实现 - 也许是一些 Javascript？

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

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

我有一个解决方法的想法- 具有检查是否已发送某种“信号”的功能（我会在修改页面后立即发送），一旦收到“信号”，刷新页面。

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

<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

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

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

这有 2 个部分。

1. 客户端 Javascript 和

2. 用于检查文件修改时间的服务器端 PHP。

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 文件中以检查给定文件的修改日期时间

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

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

Answer 2

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

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

然后我写了一个小函数（我将它添加到问题中），并每 10 分钟重新获取外部脚本。像魅力一样工作，更好的是，它在屏幕上不可见，因此不会干扰用户！

Answer 3

由于 HTTP 的限制，这是不可能的。 HTTP 在请求/响应周期中工作。

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

我认为您想要的是 sockets (Read About Sockets) 的实现，它是服务器和客户端之间的开放通信端口，允许从服务器“推送”。

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