当前栏目
使用JavaScript检查用户的网络连接
创建一个伟大的网站,却让用户由于网络连接而无法浏览,这是你可能遇到的比较大的噩梦之一。通常用户没有意识到,虽然你的网站运行良好,但他们的网络连接有问题。
如果用户在浏览你的网站时与互联网断开连接,JavaScript提供了一种与用户进行通信的简单方法。
这涉及JavaScript navigator API和 window 对象上的eventListener,这将帮助我们跟踪用户的连接性。
![使用JavaScript检查用户的网络连接](https://s2.51cto.com/oss/202006/08/40b698c2c5ff95fed59eb6c6acd018aa.jpeg)
onLine属性返回一个布尔值,该值指定浏览器处于online模式还是offline模式
你可能希望向用户添加一条小的弹出消息,告知他们已断开连接,一旦它们重新联机,就欢迎他们回到你的网站。
你应该将这些事件监听器添加到加载事件监听器中,这样当用户访问(加载)你的网站时,它们就会被初始化。
showOnlineStatus 函数可以帮助您向用户显示自定义消息。例如,如下所示:
![使用JavaScript检查用户的网络连接](https://s4.51cto.com/oss/202006/08/e97c9910a3f15c120eace7107e3ae822.jpeg)
根据连接状态显示自定义消息
您可以在CodePen上找到上述示例的完整源代码。
CodePen:https://codepen.io/varunjoshi995/pen/MWazKjB
但是,此属性可能并不完全可信,如MDN所述:
在Chrome和Safari中,如果浏览器无法连接到局域网(LAN)或路由器,则表明该浏览器处于脱机状态;所有其他条件都返回true。所以,当浏览器返回一个 false 值时,你可以认为它是离线的,但你不能认为 true 值一定意味着浏览器可以上网。
这意味着 navigator.onLine 属性可能会导致误报。因此,我们可能需要考虑其他确定方法。
这些方法之一是使用OfflineJS,这是一个很酷的库,用于通知您的用户他们已失去与您网站的连接。它提供了精美的主题,几乎不需要配置。
OfflineJS:https://github.hubspot.com/offline/docs/welcome/
如果你不想使用OfflineJS,比较好的解决方法是调用服务器端API。如果客户端/用户处于脱机状态,则API调用将失败并返回错误响应。如果你使用的是Axios,可能会丢失 error.response,这可能意味着客户端/用户处于离线状态。
上面的示例与 navigator.onLine 属性一起可以帮助避免误报,并且你可以确定用户是否连接到Internet或网络。
希望对您有所帮助!现在,你可以通知用户是否连接到互联网。对于用户访问您的网站而言,这仅意味着更好的体验!
编码愉快!
相关文章
- TiDB Binlog 组件正式开源
- 使用Visual Studio Code对Node.js进行断点调试
- 推荐!数据可视化的十种优秀JavaScript图表库
- Node.js在复杂集成场景下占据统治地位的五个理由
- 玩转Node.js单元测试
- Node.js中内存泄漏分析
- Angular对React:一场关于Web开发者支持率的史诗对决
- 热点推荐:什么是后端开发?
- 谈谈Spring boot 启动层面的开发
- 使用NodeJS将文件或图像上传到服务器
- 编写React组件的最佳实践
- JavaScript MV*框架最值得关注的七个亮点
- 前端开发指南:如何利用PHP Cake框架构建应用
- 基于React与Vue后,移动开源项目Weex如何定义未来
- NodeJS和C++之间的类型转换
- jQuery中的常用到的三十九个技巧
- 官宣|Google Developers中国网站发布!
- NodeJS和C++之间的类型转换
- .NET Core首例Office开源跨平台组件(NPOI Core)
- 如何写出漂亮的React组件