JS 를 사용 하여 브 라 우 저 에서 현재 네트워크 연결 상 태 를 판단 하 는 몇 가지 방법
2234 단어 JavaScript네트워크잇닿다
1. navigator.onLine
2.ajax 요청
3.네트워크 자원 가 져 오기
4. bind()
1. navigator.onLine
navigator.onLine 을 통 해 현재 네트워크 상 태 를 판단 합 니 다.
if(navigator.onLine){
...
}else{
...
}
아주 간단 하지만 정확 하지 않 습 니 다.-MDN 의 설명 에 따 르 면:navigator.onLine 은 기기 가 랜 이나 공유 기 에 연결 되 지 않 았 을 때 만 false 로 돌아 가 고 다른 경우 에는 모두 true 로 돌아 갑 니 다.
즉,기계 가 공유 기 에 연결 되면 이 공유 기 가 네트워크 에 연결 되 지 않 아 도 navigator.onLine 은 true 로 돌아 간 다 는 것 이다.
2.ajax 요청
get 요청 방식 을 사용 하여 반환 값 에 따라 데 이 터 를 성공 적 으로 얻 을 수 있 는 지 판단 하여 현재 네트워크 상 태 를 확인 합 니 다.
$.ajax({
url: 'x.html',
success: function(result){
...
},
error: function(result){
...
}
});
3.네트워크 자원 가 져 오기원 리 는 2 와 같 습 니 다.페이지 에 숨겨 진 그림 을 놓 고 onerror 함 수 를 설정 합 니 다.(그림 자원 을 가 져 오 는 데 실 패 했 을 때 이 함 수 를 호출 합 니 다)
<script src="./jquery-3.1.1.min.js"></script>
<script>
function getImgError(){
alert("Network disconnect!");
}
$().ready(function(){
$("#btn-test").click(function(){
var imgPath = "https://www.baidu.com/img/bd_logo1.png";
var timeStamp = Date.parse(new Date());
$("#img-test").attr("src", imgPath + "?timestamp=" + timeStamp);
});
});
</script>
<body>
<img id="img-test" style="display:none;" onerror="getImgError()"/>
<button id="btn-test">check status</button>
</body>
button 을 클릭 할 때마다 이 그림 의 src 를 업데이트 합 니 다.그림 가 져 오 는 데 실 패 했 을 경우 네트워크 연결 이 실 패 했 습 니 다.이러한 판단 네트워크 상태의 정확 함 은 전적으로 이미지 자원 의 안정 여부 에 달 려 있다.
4. bind()
원리 동일 1:
var netStatue = true;
$(window).bind('online', function(){
netStatue = true;
});
$(window).bind('offline', function(){
netStatue = false;
});
...
if(netStatue){
...
}else{
...
}
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.