时间戳

首页 > 解决方案 > 如果用户设备没有互联网连接，我希望我的网站显示某个页面，通知他们他们处于离线状态

html - 如果用户设备没有互联网连接，我希望我的网站显示某个页面，通知他们他们处于离线状态

问题描述

我设计了一个 html5 页面，当他们的设备上没有互联网连接时，我想向访问我网站的人显示该页面。例如 www.sweetwater.com

我准备好了我的网页，我只想知道如何处理它以及将它放在哪里，以便在用户没有互联网连接时调用它

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="Keywords" content="Group, KSE, Media, Pro, Content, distribution, net, Entertainment, KSE FC,Restaurant Klem, Lloyd, Mwenya">
<meta name="Description" content="Group KSE">
<meta name="author" content="Klem Lloyd Mwenya">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Device Offline</title>

<link href="css/landing.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Abel|Montserrat|Patua+One" rel="stylesheet">

</head>
<!-------------------Widgets title icon--------------------->
<link href="img/group_kse_logo(tight_frames).png" rel="shortcut icon" type="image/x-icon" />

<body>
    <div class="navRibbon">

    </div>
    <div class="offlineWrapper">
        <header>
            <h1>Group KSE</h1>
            <div class="offlineBanner">
                <h3>We Aim to Serve You Better, Everytime!</h3> 
                <h4>Experience Website User Interfaces that interact intuitively with you as a person and your emotions!</h4>
            </div>                  
        </header>
        <h2>Oops!!</h2>
        <h3 class="offlineCaution">It appears that you're offline!! <br> Check your internet connection...</h3>
        <div class="offlineLogo">
            <img src="img/group_kse_logo(tight_frames).png" alt="Group KSE Logo" />
        </div>

    </div>
    <footer class="ulukasa">
      <div id="container">
          <a href="#" id="copyright"></a>
          <p class="text-center">&copy; 2019</p>
           <p class="text-center">Group KSE</p>
             <p class="text-center">All rights reserved</p>     
      </div>

      <!-------------------------Visitor Counter ------------------------------------->



    </footer>
</body>
</html>


//And here is my css3 code:

/*---------------- Offline Notifier Page --------------*/
.navRibbon {
    width: 100%;
    height: 45px;
    background-color: #2F2C2C;
    border: 1px solid white;
    margin: 0 0 2px;
}
.offlineWrapper {
    width: 80%;
    margin: auto;
    text-align: center;
}
header {
    background: url(../img/bubble-clean-clear.jpg) no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 200px;
    margin: 0 auto 40px;
    padding: 10px 0 0;
    box-shadow: -3px 2px 20px 0 black;
}
.offlineBanner {

}
header>h1 {
    font-size: 50px;
    color: greenyellow;
    text-shadow: -3px 3px 7px black;    
    margin: 10px auto;
}
header>.offlineBanner {
    width: 70%;
    margin: auto;
    padding: 10px;
    background-color: #5F3E8F;
    opacity: .7;
}
header>.offlineBanner>h3 {
    color: #fff;
    line-height: 24px;
}
header>.offlineBanner>h4  {
    color: yellow;
    line-height: 18px;
}
.offlineWrapper>h2 {
    font-size: 42px;
}
.offlineWrapper>.offlineLogo {
    width: 45%;
    margin: 0 auto 50px;
}
.offlineWrapper>.offlineLogo img {
    width: 100%;
}
.offlineWrapper>.offlineCaution {
    background-color: #9E2022;
    color: aliceblue;
    padding: 8px;
    width: 40%;
    margin: 20px auto 40px;
    line-height: 33px;
    font-size: 18px;
}

我没有采取这一步，因为我现在还不知道如何做，但是一旦我知道，我希望在设备没有互联网时显示页面，如果有互联网连接，则显示正常的网站登录页面。

标签： htmlcssserver

解决方案

您可以尝试定期向服务器发送 XML HttpRequest，如果服务器没有响应，您就知道没有 Internet 连接。

<script>
setInterval(function(){
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status != 200) {
            document.getElementByID("normalContent").style.display = "none";
            document.getElementByID("offlineContent").style.display = "block";
        } else if (this.readyState == 4 && this.status == 200) {
            document.getElementByID("normalContent").style.display = "block";
            document.getElementByID("offlineContent").style.display = "none";
        }
    };
    xhttp.open("GET", "yourpage.php", true);
    //                      ^
    // You also need to create an empty php file to send the request to.
    // Name the php file whatever you want and make sure you reference it in this 
    // script
    xhttp.send();
}, 1000); // <-- Request sent every second (1000 milliseconds)
</script>

此脚本将尝试每秒向“yourpage.php”发送一个 XML HTTP REQUEST，如果它收到响应（尽管它是空的），它不会更改网站，但只要它请求响应并且服务器不'不响应（表示没有互联网连接），它运行指定的代码。

这是一个示例页面，它告诉您是否连接到互联网：http: //filestack.rf.gd/test/

由于您无法在没有 Internet 连接的情况下加载另一个网页，因此您还必须将您的正常内容和离线内容包装在 span 中（一个带有id = "normalContent"，一个带有id = "offlineContent"）并将它们放在同一页面上。首先使用 css 隐藏离线内容，javascript 代码会自动在两个 span 之间切换。

您还可以通过添加以下 javascript 来更改标题标签：document.getElementsByTagName("title")[0].innerHTML = "whatever title you want";.

如果您不熟悉 javascript，我建议您在 https://www.w3schools.com/js/js_intro.asp 学习它，然后在https://www.w3schools.com/jquery/jquery_intro.asp学习 jQuery

笔记

JQuery 不是必需的，但有助于简化 javascript 代码

推荐阅读