인터넷 access_javascript 기술의 JavaScript 감지를 위한 구현 코드

가장 간단하고 조잡한 방법은 네트워크 리소스, JS 파일 또는 이미지 파일을 로드하는 것입니다.

코드 복사 코드는 다음과 같습니다.

typeof window.jQuery === "정의되지 않음" // false 또는 true를 반환합니다

jQuery 변수를 사용하여 인터넷에 연결되어 있는지 감지

function doConnectFunction() {
  return true;
}
function doNotConnectFunction() {
  return false;
}

 var i = new Image();
i.onload = doConnectFunction;
i.onerror = doNotConnectFunction;
i.src = 'http://su.bdimg.com/static/superplus/img/logo_white.png?d=' + escape(Date());

네트워크 리소스 로딩 문제는 인터넷 감지입니다. LAN 감지라면 어쩔 수 없습니다.
현재로서는 더 나은 솔루션이 필요하므로 navigator.onLine을 사용해야 합니다. 이 속성의 단점은 Chrome 및 Safari 모두 완벽하게 지원하며 IE7 이상을 지원한다는 것입니다. Firefox와 IE6은 브라우저가 "오프라인"일 때만 false를 반환하고 그렇지 않으면 true를 반환합니다. 네트워크 케이블이 끼여도 마찬가지인데 Opera에서는 더 이상 지원하지 않습니다.

따라서 호환성 방법을 추가해야 합니다. http 헤더 요청을 location.hostname 주소로 보내면 코드는 다음과 같습니다.

var xhr = new ( window.ActiveXObject || XMLHttpRequest )( "Microsoft.XMLHTTP" );
var status;
xhr.open( "HEAD", "//" + window.location.hostname + "/?rand=" + Math.floor((1 + Math.random()) * 0x10000), false );
 try {
  xhr.send();
  return ( xhr.status >= 200 && xhr.status < 300 || xhr.status === 304 );
 } catch (error) {
  return false;
 }

한 가지 주의할 점은 open 메소드의 세 번째 매개변수는 false로 전달되어야 하며 동기식 요청이어야 한다는 것입니다.

요약: 브라우저가 navigator.onLine을 지원하면 navigator.onLine을 사용하고, 지원하지 않으면 http 헤더 요청을 보냅니다.

원본 기사, 재인쇄 시 표시해 주세요: Front-end Development

에서 재인쇄됨