沙盒

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的可用性和简单的谷歌Firebase消息传递或推送消息传递，现在没有什么是不可能的。您可以非常轻松地将任何推送消息发送到客户端页面或html应用程序以进行更新。或者只是告诉用户刷新他们的页面。这适用于Chrome，Firefox和Safari。

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

这有2部分。



客户端Javascript＆amp;



用于检查文件修改时间的服务器端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在请求/响应周期中工作。

加载页面后，您将自动获得服务器上的最新版本。如果没有请求新版本，它将不会收到新版本，即您无法自动将信息“推送”到客户端。

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

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

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

沙盒

3 个答案:

1。客户端Javascript

2。服务器端PHP脚本