需要单独使用 HTML 显示预定义的 HTML 页面/HTML 内容,而网页中没有互联网访问权限。
您可以使用:
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
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句