检查页面是否有更新版本，如果有，则重新加载。

Question

检查页面是否有更新版本，如果有，则重新加载。

javascripthtmlrefreshreloadpartial-page-refresh

3

基本上，我希望我的页面（比如page.html）能够检查是否存在更新的page.html版本，如果有，则刷新页面，并在此过程中呈现更新后的版本。

我知道这个过程会在一定时间内自动发生，但是我希望这个过程在30秒到2分钟内发生。

我不确定如何实现这个过程，也许需要一些JavaScript？

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

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

我有一个workaround的想法-编写一个函数，检查是否发送了某种“信号”（我会在修改页面后立即发送它），一旦收到“信号”，刷新页面。

到目前为止，我发现唯一的东西就是meta refresh。我之前没想过使用它-然而，看起来我可能必须使用它。

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

我对 meta refresh 的唯一问题是它每分钟都会刷新，无论页面是否有新版本，这可能会非常烦人 - 特别是因为我在页面上放了图片。

是否有可能针对特定元素进行 meta refresh？（所指的元素是一个经常修改且需要更新的 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>

- mancestr

所以，对该页面进行Ajax调用，并检查该部分是否不同。如果是，则将其替换。 - epascarello

3个回答

0

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

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

然后我编写了一个小函数（我将其添加到了问题中），并每隔10分钟重新获取一次外部脚本。它非常完美，而且更好的是，它不可见于屏幕上，因此不会对用户造成任何干扰！

- mancestr

-1

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

当您的页面加载时，您会自动获得服务器上的最新版本。它不会在没有请求的情况下接收到新版本，也就是说，您无法自动向客户端“推送”信息。

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

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

- Phillip Chan

嗨-无法完全按照我的要求执行，但我找到了一个完美的巧妙解决方法。使用我稍后在问题中发布的脚本，我每5秒重新加载外部脚本。 - mancestr

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rajendra · Accepted Answer

基本上现在由于WebSockets的可用性和易用的谷歌Firebase消息或推送消息，没有什么是不可能的。你可以非常容易地向客户端页面或HTML应用程序发送任何推送消息以更新自身，或者只告诉用户刷新他们的页面。这在Chrome、Firefox和Safari上都可用。

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

这个有两个部分。

客户端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));
}
?>

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