JS의 기능 및 UA 감지

이번에는 JS의 기능 및 UA 감지에 대해 알려드리겠습니다. JS의 기능 및 UA 감지에 대한 주의 사항은 무엇인가요?

최초의 브라우저 스니핑은 사용자 에이전트 감지입니다. 서버(나중에 클라이언트)는 사용자 에이전트문자열을 기반으로 브라우저 유형을 결정합니다. 이 기간 동안 서버는 사용자 에이전트 문자열을 기반으로 특정 브라우저가 웹사이트 콘텐츠를 보는 것을 완전히 차단합니다. 가장 많은 이점을 얻은 브라우저는 Netscape Browser입니다. Netscape(당시)가 가장 강력한 브라우저라는 것은 부인할 수 없는 사실이므로 많은 웹사이트에서는 Netscape 브라우저만이 웹 페이지를 제대로 표시할 수 있다고 믿었습니다. Netscape Browser의 사용자 에이전트 문자열은 Mozilla/2.0(Win95; I)입니다. IE가 처음 출시되었을 때 기본적으로 서버가 새 브라우저를 제공할 수 있도록 하기 위해 Netscape 브라우저 사용자 에이전트 문자열의 상당 부분을 사용해야 했습니다. 대부분의 사용자 에이전트 감지 프로세스는 "Mozilla" 문자열과 슬래시 뒤의 버전 번호를 찾기 때문에 IE browser의 사용자 에이전트 문자열은 Mozilla/2.0(호환 가능, MSIE 3.0, Windows 95)으로 설정되어 있습니다. 도둑인 것 같아? IE는 이러한 사용자 에이전트 문자열을 사용합니다. 이는 모든 브라우저 유형 확인이 새 브라우저를 Netscape의 Navigator 브라우저로 식별한다는 것을 의미합니다. 이는 또한 새로운 브라우저가 기존 브라우저의 사용자 에이전트 문자열을 부분적으로 복사하는 경향을 만듭니다. Chrome 배포판의 사용자 에이전트 문자열에는 Safari의 사용자 에이전트 문자열의 일부가 포함되어 있으며, 이 문자열에는 Firefox의 사용자 에이전트 문자열의 일부가 포함되어 있고, 이는 다시 Netscape의 사용자 에이전트 문자열의 일부가 포함되어 있습니다.

UA 기반 탐지는 매우 불안정하고 유지 관리가 어렵습니다. UA는 위조될 수 있습니다. Chrome으로 선언된 브라우저는 다른 브라우저일 수 있습니다.

새 브라우저가 나타날 때마다, 또는 기존 브라우저 버전 업그레이드를 위해서는 원본 코드를 사용하세요. UA 감지 기반으로 업데이트를 해야 하며, 유지 비용과 오류 확률이 극도로 높습니다

그래서 꼭 UA 감지를 해야만 하더라도 최대한 피하시는 것을 권해드립니다.

2.8.2 기능 감지

브라우저 조건에 따라 더욱 스마트한 방법(감지)을 원했기 때문에 기능 감지라는 기술이 대중화되었습니다. 기능 감지의 원리는 특정 브라우저 기능을 테스트하고 해당 기능이 있을 때만 기능 감지를 적용하는 것입니다. 예:

// 不好的写法if (navigator.userAgent.indexOf("MSIE 7") > -1) { }// 好的写法if (
document
.getElementById) {}

기능 감지는 사용된 브라우저에 의존하지 않고 기능 존재 여부에만 의존하기 때문에, 따라서 반드시 새로운 브라우저 지원이 필요한 것은 아닙니다. 예를 들어 DOM 초기에는 모든 브라우저가 document.getElementById()를 지원하지 않았기 때문에 ID를 기반으로 요소를 가져오는 코드가 중복된 것처럼 보였습니다.

// 好的写法// 仅为举例说明特性检测，现代浏览器都支持getElementByIdfunction getById (id) {  var el = null;  if (document.getElementById) { // DOM
    el = document.getElementById(id);
  } else if (document.all) { // IE
    el = document.all[id];
  } else if (document.layers) { // Netscape <= 4
    el = document.layers[id];
  }  return el;
}

이 방법은 오늘날 최신 브라우저 기능을 감지하는 데에도 적합합니다. 브라우저는 사양이 아직 확정되는 동안 이러한 최신 기능을 실험적으로 구현했습니다. 일반적인 Polyfill은 기능 감지를 위한 애플리케이션입니다. 예를 들면 다음과 같습니다.

if (!Array.isArray) {  Array.isArray = function (arr) {    return 
Object
.prototype.toString.call(arr) === '[object Array]'
  }
}

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트Other관련 기사에 주목하세요!

추천 자료:

웹 개발에서 Null 비교를 피하는 방법

웹 개발에서 UI 레이어의 느슨한 결합

위 내용은 JS의 기능 및 UA 감지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!