> 웹 프론트엔드 > JS 튜토리얼 > JavaScript로 오프라인/온라인 상태를 감지하는 방법

JavaScript로 오프라인/온라인 상태를 감지하는 방법

coldplay.xixi
풀어 주다: 2020-07-08 16:49:07
앞으로
2900명이 탐색했습니다.

JavaScript로 오프라인/온라인 상태를 감지하는 방법

오프라인 검색 기술은 지난 2년 동안 점점 더 대중화되었습니다. 가장 일반적인 기술은 HTML5 모바일 애플리케이션이며, 많은 일반 웹 앱에서도 이러한 기술을 사용합니다. 그러나 새로운 기술의 출현은 때때로 우리 웹 개발자에게 추가적인 문제를 가져옵니다. 예를 들어 사용자가 온라인인지 오프라인인지 확인하는 방법은 무엇입니까? 다행스럽게도 창이 있는 곳에 방패도 있습니다. JavaScript의 navigator 개체는 이 문제를 해결하는 데 도움이 됩니다. navigator对象帮我们解决这个问题。

相关学习推荐:javascript视频教程

navigator.onLine

navigator.onLine属性能给我们提供一个布尔值,用来判断用户是否连接了互联网。你可以这样访问它:

if(navigator.onLine) { // true|false
	// ...
}
로그인 후 복사

没有比这更简单的了!

事件

我们除了能检测这个离线/在线属性值外,还可以绑定offlineonline事件:

function updateIndicator() {
	// 这时可以根据offline/online按钮的颜色
}

// 根据网络连接情况更新在线状态
window.addEventListener('online',  updateIndicator);
window.addEventListener('offline', updateIndicator);
updateIndicator();
로그인 후 복사

当然,老式的技术里也提供了相应的方法,在body标记上使用ononlineonoffline

관련 학습 권장사항: 자바스크립트 동영상 튜토리얼

navigator.onLine

navigator.onLine이 속성은 사용자가 인터넷에 연결되어 있는지 확인하는 부울 값을 제공할 수 있습니다. 다음과 같이 액세스할 수 있습니다:

rrreee

이보다 더 쉬울 수는 없습니다! 🎜

이벤트

🎜오프라인/온라인 속성 값을 감지하는 것 외에도 오프라인온라인 이벤트를 바인딩할 수도 있습니다. 🎜rrreee🎜물론, 이전 기술은 body 태그에 ononlineonoffline 메서드를 사용하여 해당 메서드도 제공합니다. 🎜🎜이러한 이벤트와 속성을 사용해야 하는 곳은 많이 상상할 수 있습니다. 예를 들어, 사용자가 작업 중이고 네트워크 연결이 끊어졌을 때 우리의 WEB 애플리케이션이 이 상태를 감지할 수 있다면 사용자의 글을 로컬 웹 스토리지에 저장한 다음 네트워크가 복원된 후 서버에 제출할 수 있습니다. 즉, 연결이 끊어져도 사용자의 글쓰기에는 영향을 미치지 않습니다. 이것은 단순한 예일 뿐이며 더 많은 것을 생각해 낼 수 있다고 믿습니다. 🎜🎜이 API는 그다지 신뢰할 수 없다는 점을 기억해야 합니다. 가장 오래된 예약된 새로 고침 기술을 기록으로 사용할 수 있습니다. 🎜

위 내용은 JavaScript로 오프라인/온라인 상태를 감지하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:webhek.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿