建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
創(chuàng)建一個(gè)偉大的網(wǎng)站，卻讓用戶(hù)由于網(wǎng)絡(luò)連接而無(wú)法瀏覽，這是你可能遇到的比較大的噩夢(mèng)之一。通常用戶(hù)沒(méi)有意識(shí)到，雖然你的網(wǎng)站運(yùn)行良好，但他們的網(wǎng)絡(luò)連接有問(wèn)題。
如果用戶(hù)在瀏覽你的網(wǎng)站時(shí)與互聯(lián)網(wǎng)斷開(kāi)連接，JavaScript提供了一種與用戶(hù)進(jìn)行通信的簡(jiǎn)單方法。
這涉及JavaScript navigator API和 window 對(duì)象上的eventListener，這將幫助我們跟蹤用戶(hù)的連接性。
onLine屬性返回一個(gè)布爾值，該值指定瀏覽器處于online模式還是offline模式
你可能希望向用戶(hù)添加一條小的彈出消息，告知他們已斷開(kāi)連接，一旦它們重新聯(lián)機(jī)，就歡迎他們回到你的網(wǎng)站。
你應(yīng)該將這些事件監(jiān)聽(tīng)器添加到加載事件監(jiān)聽(tīng)器中，這樣當(dāng)用戶(hù)訪問(wèn)(加載)你的網(wǎng)站時(shí)，它們就會(huì)被初始化。
showOnlineStatus 函數(shù)可以幫助您向用戶(hù)顯示自定義消息。例如，如下所示：
根據(jù)連接狀態(tài)顯示自定義消息
您可以在CodePen上找到上述示例的完整源代碼。
CodePen：https://codepen.io/varunjoshi995/pen/MWazKjB
但是，此屬性可能并不完全可信，如MDN所述：
在Chrome和Safari中，如果瀏覽器無(wú)法連接到局域網(wǎng)(LAN)或路由器，則表明該瀏覽器處于脫機(jī)狀態(tài);所有其他條件都返回true。所以，當(dāng)瀏覽器返回一個(gè) false 值時(shí)，你可以認(rèn)為它是離線(xiàn)的，但你不能認(rèn)為 true 值一定意味著瀏覽器可以上網(wǎng)。
這意味著 navigator.onLine 屬性可能會(huì)導(dǎo)致誤報(bào)。因此，我們可能需要考慮其他確定方法。
這些方法之一是使用OfflineJS，這是一個(gè)很酷的庫(kù)，用于通知您的用戶(hù)他們已失去與您網(wǎng)站的連接。它提供了精美的主題，幾乎不需要配置。
OfflineJS：https://github.hubspot.com/offline/docs/welcome/
如果你不想使用OfflineJS，比較好的解決方法是調(diào)用服務(wù)器端API。如果客戶(hù)端/用戶(hù)處于脫機(jī)狀態(tài)，則API調(diào)用將失敗并返回錯(cuò)誤響應(yīng)。如果你使用的是Axios，可能會(huì)丟失 error.response，這可能意味著客戶(hù)端/用戶(hù)處于離線(xiàn)狀態(tài)。
上面的示例與 navigator.onLine 屬性一起可以幫助避免誤報(bào)，并且你可以確定用戶(hù)是否連接到Internet或網(wǎng)絡(luò)。
希望對(duì)您有所幫助!現(xiàn)在，你可以通知用戶(hù)是否連接到互聯(lián)網(wǎng)。對(duì)于用戶(hù)訪問(wèn)您的網(wǎng)站而言，這僅意味著更好的體驗(yàn)!
編碼愉快!
新聞標(biāo)題：使用JavaScript檢查用戶(hù)的網(wǎng)絡(luò)連接
文章鏈接：http://m.fisionsoft.com.cn/article/djgoicj.html
