我设计了一个 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">© 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;
}
我还没有采取这一步，因为我现在还不知道该怎么做，但是一旦我知道了，我希望在设备没有互联网时显示该页面，如果有互联网连接，则显示正常的网站登录页面.
最佳答案
您可以使用 JavaScript 解决方案来做到这一点。
- 网络信息API
- Ajax 调用
- 服务人员
- 缓存 list
您可以尝试从 MDN 实现网络信息 API ，但这并不支持所有浏览器。因此，在回退中，您可以通过 Ajax 定期调用一个 json 文件并检查错误，该文件描述了 here。
您还可以将 Service worker 与 ajax 一起实现，因此如果离线 ajax 将返回预定义的 json 网络不可用，您可以在 JavaScript 中处理它。
缓存 list 已弃用，所以不要使用它。
关于html - 如果用户设备没有互联网连接，我希望我的网站显示一个特定的页面，通知他们他们处于离线状态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55736754/