JavaScript中怎么檢查用戶的網(wǎng)絡(luò)連接

這篇文章給大家介紹JavaScript中怎么檢查用戶的網(wǎng)絡(luò)連接，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

為湞江等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及湞江網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、湞江網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

這涉及JavaScript navigator API和 window 對象上的eventListener，這將幫助我們跟蹤用戶的連接性。

onLine屬性返回一個(gè)布爾值，該值指定瀏覽器處于online模式還是offline模式

你可能希望向用戶添加一條小的彈出消息，告知他們已斷開連接，一旦它們重新聯(lián)機(jī)，就歡迎他們回到你的網(wǎng)站。

你應(yīng)該將這些事件監(jiān)聽器添加到加載事件監(jiān)聽器中，這樣當(dāng)用戶訪問(加載)你的網(wǎng)站時(shí)，它們就會被初始化。

showOnlineStatus 函數(shù)可以幫助您向用戶顯示自定義消息。例如，如下所示：

根據(jù)連接狀態(tài)顯示自定義消息

您可以在CodePen上找到上述示例的完整源代碼。

CodePen：https://codepen.io/varunjoshi995/pen/MWazKjB

但是，此屬性可能并不完全可信，如MDN所述：

在Chrome和Safari中，如果瀏覽器無法連接到局域網(wǎng)(LAN)或路由器，則表明該瀏覽器處于脫機(jī)狀態(tài);所有其他條件都返回true。所以，當(dāng)瀏覽器返回一個(gè)  false 值時(shí)，你可以認(rèn)為它是離線的，但你不能認(rèn)為 true 值一定意味著瀏覽器可以上網(wǎng)。

這意味著 navigator.onLine 屬性可能會導(dǎo)致誤報(bào)。因此，我們可能需要考慮其他確定方法。

這些方法之一是使用OfflineJS，這是一個(gè)很酷的庫，用于通知您的用戶他們已失去與您網(wǎng)站的連接。它提供了精美的主題，幾乎不需要配置。

OfflineJS：https://github.hubspot.com/offline/docs/welcome/

如果你不想使用OfflineJS，比較好的解決方法是調(diào)用服務(wù)器端API。如果客戶端/用戶處于脫機(jī)狀態(tài)，則API調(diào)用將失敗并返回錯(cuò)誤響應(yīng)。如果你使用的是Axios，可能會丟失  error.response，這可能意味著客戶端/用戶處于離線狀態(tài)。

上面的示例與 navigator.onLine 屬性一起可以幫助避免誤報(bào)，并且你可以確定用戶是否連接到Internet或網(wǎng)絡(luò)。

關(guān)于JavaScript中怎么檢查用戶的網(wǎng)絡(luò)連接就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

網(wǎng)站標(biāo)題：JavaScript中怎么檢查用戶的網(wǎng)絡(luò)連接
網(wǎng)頁網(wǎng)址：http://muchs.cn/article24/ihpoje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、網(wǎng)站設(shè)計(jì)公司、用戶體驗(yàn)、App設(shè)計(jì)、網(wǎng)站制作、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)