需要 javascript 来验证服务器是否已启动并在未启动时防止页面丢失答案

【问题标题】：Need javascript to verify server is up and prevent page drop when it isn't需要 javascript 来验证服务器是否已启动并在未启动时防止页面丢失
【发布时间】：2020-08-22 02:26:18
【问题描述】：

我有一台服务器，可以远程驱动我家中的显示器。目前它知道通过每 5 分钟刷新一次页面来更新链接，但我注意到当服务器关闭时它会刷新并清除页面。我希望它继续显示最后一个幻灯片，直到服务器恢复正常。

下面的代码似乎在服务器死机时使页面变为空白，并在服务器恢复时返回，这很好，但只要服务器关闭，它就会破坏幻灯片。由于某种原因，它也不会执行失败模式警报。最终我想用图片右下角的一个小红框替换警报，但目前我什至无法让它执行警报代码。

function checkServerStatus()
{
    var img = document.createElement("img");
    img.onload = function()
    {
        //Change to reload only if links change in server
        location.reload(1);
    };
    img.onerror = function()
    {
        //does not display alert and kills page when running live, works here though. Page returns if server comes back up
        alert('nope!');
    };
    img.src = "/static/img/aol.png";
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <!--Kill Favicon request -->
    <link rel="icon" href="data:,">
    
    <title>Display: Home</title>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <!--My styles sheet -->
    <link rel="stylesheet" type="text/css" href="/static/styles.css">
    <!-- My Java Scripts -->
    <script src="/static/js/moment.min.js"></script>
    <!-- Script from server for moment text generator -->
    <script src="/static/scripts.js"></script>
  </head>
  
<script>var myVar = setInterval("checkServerStatus()", 60000);</script>

<div class="full-screen-scroller" style="width: 400px;" background-color: powderblue;>
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      
      <li data-target="#myCarousel" data-slide-to="1"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item active">
          <img style="width: 100%; max-height: 400px;" src="https://media.giphy.com/media/r1fDuPIcs18d2/giphy-downsized-large.gif" alt="Snoop Dog!">
          <div class="carousel-caption"><h3>Snoop Dog!</h3></div>
        </div>
        
        <div class="item">
          <img style="width: 100%; max-height: 400px;" src="https://media.giphy.com/media/WZ5tDWAQrUeuk/giphy.gif" alt="Wowzers!">
          <div class="carousel-caption"><h3>Wowzers!</h3></div>
        </div>
    </div>
  </div>
</div>


  </body>
</html>

【问题讨论】：

另一种方法是使用 ajax HEAD 请求

标签： javascript json flask post get

【解决方案1】：

可能是浏览器正在缓存/static/img/aol.png 资源，所以当您再次调用checkServerStatus 时，即使服务器已关闭，浏览器也会为您提供先前缓存的图像-正确加载，从而导致@987654323 @，清除页面。

您可以将查询字符串添加到src，以确保每次都重新下载：

img.src = "/static/img/aol.png?t=" + Date.now();

【讨论】：

修复了它。我尝试添加 + Date.now();不久前，但我忘记了查询字符串中的 ?t=。