可以使用 html/html5 在 html 页面中没有互联网访问的情况下显示默认内容

Question

需要显示预定义的HTML页面/HTML内容，而网页中没有互联网访问，仅使用HTML。

Answer 1

您可以使用：

if(navigator.onLine) { // true|false
    // ...
}

然后，如果用户处于脱机状态，请向他们显示另一条内容：

function showOnlineContent() {
    var onlineContent = document.getElementById('onlineContent');
    onlineContent.style.display = 'block';
}
function showOfflineContent() {
    var offlineContent = document.getElementById('offlineContent');
    offlineContent.style.display = 'block';
}
// Update the content based on connectivity
window.addEventListener('online',  showOnlineContent);
window.addEventListener('offline', showOfflineContent);

您可能希望将事件侦听器组合到同一个处理程序，并检查其中的连接状态并切换内容。

替代方法是使用 PWA 使用的应用清单：https://www.html5rocks.com/en/tutorials/appcache/beginner/

CACHE MANIFEST
# 2010-06-18:v3
# Explicitly cached entries
index.html
css/style.css
# offline.html will be displayed if the user is offline
FALLBACK:
/ /offline.html
# All other resources (e.g. sites) require the user to be online. 
NETWORK:
*
# Additional resources to cache
CACHE:
images/logo1.png
images/logo2.png
images/logo3.png