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

基本上，我希望我的页面（比如page.html）检查是否存在更新版本的page.html，如果存在，则刷新页面，并在执行此操作时显示更新版本

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

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

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

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

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

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

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

meta refresh的唯一问题是，无论我是否有新版本的页面，它都会每分钟刷新一次，这可能会让人非常恼火——特别是因为我的页面上有图像

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

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

刷新脚本
函数加载脚本（位置）{
var js=document.getElementById（“沙盒脚本”）；
如果（js！==null）{
document.body.removeChild（js）；
console.info（“------------脚本刷新-----------------”；
}
//创建新的脚本元素并将脚本加载到其中
js=document.createElement（“脚本”）；
js.src=位置；
js.id=“sandboxScript”；
document.body.appendChild（js）；
}
由于HTTP的限制，这是不可能的。HTTP在请求/响应周期中工作

加载页面后，您会自动在服务器上获取最新版本。如果不请求新版本，它将不会收到新版本，也就是说，您不能自动将信息“推”到客户端

我认为您需要的是实现套接字（），它是服务器和客户端之间的开放通信端口，允许从服务器“推送”

但是，这是在服务器端实现的，可能超出了您的项目范围。
最后，我找到了一个比简单地重新加载页面更简单的解决方案

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

然后我编写了一个小函数（我把它添加到问题中），并每10分钟重新获取一次外部脚本。它就像一个符咒，更好的是，在屏幕上看不到，所以它不会干扰用户一点
 由于WebSocket的可用性和简单的google Firebase消息或推送消息，现在基本上没有什么不可能的了。您可以非常轻松地将任何推送消息发送到客户端页面或html应用程序以进行自我更新。或者告诉用户刷新他们的页面。这可以在Chrome、firefox和Safari上获得

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

这有两部分

客户端Javascript&

用于检查文件修改时间的服务器端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));
}
?>



这可能不是标准的解决方案，但它解决了我的问题。我希望这对你有所帮助
 嗨-不可能完全按照我的要求去做，但我找到了一个完美的解决办法。使用稍后我将在问题中发布的脚本，我每5秒钟重新加载一个外部脚本。对页面进行Ajax调用，并检查页面的这一部分是否不同。谢谢你的解决方案，但我在浏览器javascript控制台上出错了，它无法检索服务器文件上次修改的日期。（表示“上次修改的服务器文件：无效日期”）它在data.trim（）处停止；我建议您通过使用参数“f”运行modify-check.php文件来检查modify-check.php文件，例如，如果返回正确的日期而没有错误，那么一切都正常，js函数应该可以正常工作。
<?php
//Very simple and self explainatory!
$filename = $_GET['f'];
if (file_exists($filename)) {
    echo date ("m/d/y H:i:s", filemtime($filename));
}
?>