캡슐화된 js는 운영 체제 및 브라우저 코드 공유_javascript 기술을 결정합니다.-JS 튜토리얼-php.cn

캡슐화된 js는 운영 체제 및 브라우저 코드 공유_javascript 기술을 결정합니다.

WBOY

풀어 주다： 2016-05-16 16:21:16

원래의

1205명이 탐색했습니다.

요약:
프론트엔드 개발에서 가장 중요한 작업은 호환성, 시스템 호환성, 브라우저 호환성 등입니다. 오늘은 운영체제와 브라우저를 결정하기 위해 프로젝트에 캡슐화한 방법을 공유하겠습니다.

운영 체제:

var os = (function() {
  var UserAgent = navigator.userAgent.toLowerCase();
  return {
    isIpad     : /ipad/.test(UserAgent),
    isIphone    : /iphone os/.test(UserAgent),
    isAndroid    : /android/.test(UserAgent),
    isWindowsCe   : /windows ce/.test(UserAgent),
    isWindowsMobile : /windows mobile/.test(UserAgent),
    isWin2K     : /windows nt 5.0/.test(UserAgent),
    isXP      : /windows nt 5.1/.test(UserAgent),
    isVista     : /windows nt 6.0/.test(UserAgent),
    isWin7     : /windows nt 6.1/.test(UserAgent),
    isWin8     : /windows nt 6.2/.test(UserAgent),
    isWin81     : /windows nt 6.3/.test(UserAgent)
  };
}());

로그인 후 복사

시스템이 iPad인지 확인하려면 if(os.isIpad) {}만 확인하면 됩니다.

브라우저:

var bw = (function() {
  var UserAgent = navigator.userAgent.toLowerCase();
  return {
    isUc   : /ucweb/.test(UserAgent), // UC浏览器
    isChrome : /chrome/.test(UserAgent.substr(-33,6)), // Chrome浏览器
    isFirefox : /firefox/.test(UserAgent), // 火狐浏览器
    isOpera  : /opera/.test(UserAgent), // Opera浏览器
    isSafire : /safari/.test(UserAgent) && !/chrome/.test(UserAgent), // safire浏览器
    is360   : /360se/.test(UserAgent), // 360浏览器
    isBaidu  : /bidubrowser/.test(UserAgent), // 百度浏览器
    isSougou : /metasr/.test(UserAgent), // 搜狗浏览器
    isIE6   : /msie 6.0/.test(UserAgent), // IE6
    isIE7   : /msie 7.0/.test(UserAgent), // IE7
    isIE8   : /msie 8.0/.test(UserAgent), // IE8
    isIE9   : /msie 9.0/.test(UserAgent), // IE9
    isIE10  : /msie 10.0/.test(UserAgent), // IE10
    isIE11  : /msie 11.0/.test(UserAgent), // IE11
    isLB   : /lbbrowser/.test(UserAgent), // 猎豹浏览器
　　　　 isWX   : /micromessenger/.test(UserAgent), // 微信内置浏览器
    isQQ   : /qqbrowser/.test(UserAgent) // QQ浏览器
  };
}());

로그인 후 복사

]

요약:
브라우저는 모두 제가 직접 테스트했는데 문제가 있을 수 있는 것은 크롬 브라우저입니다. 대부분의 브라우저가 WebKit 커널을 사용하기 때문에 이를 구분하기 위해 크롬의 네비게이터를 가로채었습니다. 추후에 크롬 네비게이터의 정보 위치나 크롬 이후의 길이가 변경되면 문제가 발생하기 쉬울 수 있으나 현재로서는 괜찮은 것 같습니다.

이제 모바일 UC 브라우저는 Baidu 광고를 차단하지만 Google 광고는 차단하지 않는 경우가 많기 때문에 UC 브라우저인지 여부를 추가하여 확인할 수 있습니다. 그렇지 않으면 Baidu 광고를 표시합니다. Google 광고를 게재합니다

if(navigator.userAgent.indexOf('UCBrowser') > -1) {
alert("uc浏览器");
}else｛
//不是uc浏览器执行的操作
｝

로그인 후 복사

실제로 특정 브라우저의 일부 특수 작업은

을 통해 수행할 수 있습니다.

JS가 브라우저 정보를 가져옵니다
브라우저 코드 이름: navigator.appCodeName
브라우저 이름: navigator.appName
브라우저 버전 번호: navigator.appVersion
Java 지원: navigator.javaEnabled()
MIME 유형(배열): navigator.mimeTypes
시스템 플랫폼: navigator.platform
플러그인(배열): navigator.plugins
사용자 에이전트: navigator.userAgent