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

迪内什

需要单独使用 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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

是否可以使用HTML5或jquery中的坐标在网页中导航?

来自分类Dev

在不向HTML结构中添加更多内容的情况下,是否可以使用这种flexbox布局?

来自分类Dev

使用HTML5测试浏览器是否可以连接互联网

来自分类Dev

是否可以通过iPad在没有互联网的情况下控制Windows PC?

来自分类Dev

是否可以使用JavaScript将2个SVG文件混合到一个HTML / HTML5文件中?

来自分类Dev

我可以在没有互联网的情况下安装Ubuntu 13.10吗?

来自分类Dev

我可以在没有互联网的情况下安装Ubuntu 13.10吗?

来自分类Dev

我可以在没有互联网的情况下安装Ubuntu 13.10吗?

来自分类Dev

Ubuntu可以在没有互联网的情况下运行吗?

来自分类Dev

MAMP可以在没有互联网的情况下运行吗?

来自分类Dev

为什么AFNetworking在没有互联网连接的情况下可以成功运行?

来自分类Dev

Ubuntu可以在没有互联网的情况下运行吗?

来自分类Dev

我如何在没有互联网连接的情况下使用Boot Repairs Manager?

来自分类Dev

我如何在没有互联网连接的情况下使用Boot Repairs Manager?

来自分类Dev

在HTML中是否可以使用没有“回车符”的“换行符”?

来自分类Dev

是否可以使用 HTML5 使用 WebApi REST 服务?

来自分类Dev

是否可以使用javascript将一组html附加到html页面?

来自分类Dev

是否可以使用HTML5表单标签而不会泄漏全局变量?

来自分类Dev

是否可以使用HTML5播放SHOUTcast提供的AAC?

来自分类Dev

是否可以使用HTML5数据属性初始化Bootstrap 3 Datepicker?

来自分类Dev

是否可以使用HTML5表单标签而不会泄漏全局变量?

来自分类Dev

是否可以使用CSS从伪元素内容中插入HTML标签?

来自分类Dev

是否可以使用CSS从伪元素内容中插入HTML标签?

来自分类Dev

可以在没有'repeat'属性的情况下使用HTML 5 <template>标签吗?

来自分类Dev

路由器可以在没有ISP的情况下使用PC的互联网连接吗?

来自分类Dev

在没有互联网连接的情况下,有没有办法可以通过局域网中的Skype进行呼叫?

来自分类Dev

是否可以使用html设置我无法直接访问其代码的div的样式?

来自分类Dev

是否可以使用html设置无法直接访问其代码的div的样式?

来自分类Dev

是否可以使用html css更改移动设备中的表结构?

Related 相关文章

  1. 1

    是否可以使用HTML5或jquery中的坐标在网页中导航?

  2. 2

    在不向HTML结构中添加更多内容的情况下,是否可以使用这种flexbox布局?

  3. 3

    使用HTML5测试浏览器是否可以连接互联网

  4. 4

    是否可以通过iPad在没有互联网的情况下控制Windows PC?

  5. 5

    是否可以使用JavaScript将2个SVG文件混合到一个HTML / HTML5文件中?

  6. 6

    我可以在没有互联网的情况下安装Ubuntu 13.10吗?

  7. 7

    我可以在没有互联网的情况下安装Ubuntu 13.10吗?

  8. 8

    我可以在没有互联网的情况下安装Ubuntu 13.10吗?

  9. 9

    Ubuntu可以在没有互联网的情况下运行吗?

  10. 10

    MAMP可以在没有互联网的情况下运行吗?

  11. 11

    为什么AFNetworking在没有互联网连接的情况下可以成功运行?

  12. 12

    Ubuntu可以在没有互联网的情况下运行吗?

  13. 13

    我如何在没有互联网连接的情况下使用Boot Repairs Manager?

  14. 14

    我如何在没有互联网连接的情况下使用Boot Repairs Manager?

  15. 15

    在HTML中是否可以使用没有“回车符”的“换行符”?

  16. 16

    是否可以使用 HTML5 使用 WebApi REST 服务?

  17. 17

    是否可以使用javascript将一组html附加到html页面?

  18. 18

    是否可以使用HTML5表单标签而不会泄漏全局变量?

  19. 19

    是否可以使用HTML5播放SHOUTcast提供的AAC?

  20. 20

    是否可以使用HTML5数据属性初始化Bootstrap 3 Datepicker?

  21. 21

    是否可以使用HTML5表单标签而不会泄漏全局变量?

  22. 22

    是否可以使用CSS从伪元素内容中插入HTML标签?

  23. 23

    是否可以使用CSS从伪元素内容中插入HTML标签?

  24. 24

    可以在没有'repeat'属性的情况下使用HTML 5 <template>标签吗?

  25. 25

    路由器可以在没有ISP的情况下使用PC的互联网连接吗?

  26. 26

    在没有互联网连接的情况下,有没有办法可以通过局域网中的Skype进行呼叫?

  27. 27

    是否可以使用html设置我无法直接访问其代码的div的样式?

  28. 28

    是否可以使用html设置无法直接访问其代码的div的样式?

  29. 29

    是否可以使用html css更改移动设备中的表结构?

热门标签

归档