JavaScript를 사용하여 Internet Explorer (IE) 및 Microsoft Edge를 검색하려면 어떻게해야합니까?


81

나는 많이 둘러 보았고 인터넷 익스플로러를 감지하는 방법이 많다는 것을 알고 있습니다.

내 문제는 이것이다 : HTML 문서에 클릭하면 어떤 종류의 Internet Explorer 와도 호환되지 않는 JavaScript 함수를 호출하는 영역이 있습니다. IE가 사용 중인지 감지하고, 그렇다면 변수를 true로 설정하고 싶습니다.

문제는 메모장 ++에서 코드를 작성하고 브라우저에서 HTML 코드를 실행할 때 IE 작동을 감지하는 방법이 없다는 것입니다. 문제는 메모장 ++에서 실행하고 있다는 것입니다. IE를 감지 할 수 있어야 변수를 기반으로 사이트의 해당 영역을 비활성화 할 수 있습니다. 나는 이것을 시도했다 :

var isIE10 = false;

if (navigator.userAgent.indexOf("MSIE 10") > -1) {
    // this is internet explorer 10
    isIE10 = true;
   window.alert(isIE10);
}

var isIE = (navigator.userAgent.indexOf("MSIE") != -1);

if(isIE){
    if(!isIE10){
    window.location = 'pages/core/ie.htm';
    }
}

하지만 작동하지 않습니다. 메모장 ++에서 IE를 어떻게 감지합니까? 그것이 내가 HTML을 테스트하고있는 것이지만, 그것과 함께 작동 할 방법이 필요합니다.

편집하다

누군가 이것을 중복으로 표시했으며 이해할 수 있습니다. 명확하지 않은 것 같습니다. JQuery 답변을 사용할 수 없으므로 바닐라 JS 답변을 요청하므로 중복되지 않습니다.

편집 # 2

Microsoft Edge 브라우저를 감지하는 방법도 있습니까?


2
IE 전용 코드를 작성하는 대신 IE 및 기타 브라우저에서 코드를 작업하는 것이 훨씬 쉽습니다.
Ibu

1
IE에서 작동하도록 함수를 수정할 수없는 경우 기능 감지는 브라우저 감지보다 코드를 작성하는 훨씬 더 나은 방법으로 간주됩니다. 또한 브라우저가 변경됨에 따라 순방향 호환성이 훨씬 좋습니다. 예를 들어 Microsoft의 최신 브라우저 인 Edge로 무엇을하고 싶은지 이미 알고 계십니까?
jfriend00

1
jQuery의 중복 가능성 : 사용자가 IE를 사용하고 있는지 확인 링크를 확인하고 많은 솔루션이 있습니다
num8er

아래 답변 중 하나가이 사이트의 작동 방식에 대해 귀하의 질문에 대한 답변을했다면 답변을 "수락"하는 것입니다. 여기에서 더 많은 정보를 얻을 수 있습니다. 누군가 내 질문에 답변하면 어떻게해야 합니까?. 그러나 귀하의 질문이 실제로 답변 된 경우에만 가능합니다. 그렇지 않은 경우 질문에 더 많은 세부 정보를 추가하는 것이 좋습니다.
baao

내 대답에 가장자리 감지를 추가하고 최신 버전을 볼 수있는 편리한 링크도 추가했습니다.
회의론자

답변:


31

이유는 모르겠지만 다른 사람들이 말하는 것처럼 userAgent에 "Edge"가 표시되지 않기 때문에 일부 사람들에게 도움이 될 수있는 다른 경로를 선택해야했습니다.

navigator.userAgent를 보는 대신 navigator.appName을 살펴보고 IE <= 10인지 IE11 및 Edge인지 구분했습니다. IE11 및 Edge는 "Netscape"의 appName을 사용하고 다른 모든 반복에서는 "Microsoft Internet Explorer"를 사용합니다.

브라우저가 IE11인지 Edge인지 확인한 후 navigator.appVersion을 확인했습니다. IE11에서는 그 안에 많은 정보가 포함 된 문자열이 다소 길다는 것을 알았습니다. Edge 용 navigator.appVersion에는없는 "Trident"라는 단어를 임의로 선택했습니다. 이 단어에 대한 테스트를 통해 두 가지를 구분할 수있었습니다.

다음은 사용자가 Internet Explorer를 사용하는 숫자 값을 반환하는 함수입니다. Microsoft Edge에서는 숫자 12를 반환합니다.

행운을 빕니다. 도움이 되었기를 바랍니다.

function Check_Version(){
    var rv = -1; // Return value assumes failure.

    if (navigator.appName == 'Microsoft Internet Explorer'){

       var ua = navigator.userAgent,
           re  = new RegExp("MSIE ([0-9]{1,}[\\.0-9]{0,})");

       if (re.exec(ua) !== null){
         rv = parseFloat( RegExp.$1 );
       }
    }
    else if(navigator.appName == "Netscape"){                       
       /// in IE 11 the navigator.appVersion says 'trident'
       /// in Edge the navigator.appVersion does not say trident
       if(navigator.appVersion.indexOf('Trident') === -1) rv = 12;
       else rv = 11;
    }       

    return rv;          
}

7
이것은 edge와 firefox 모두에서 12를 반환합니다.
edencorbin

@edencorbin이 문제를 처리하는 답변을 아래에 게시했습니다. stackoverflow.com/a/36688806/2304450
GavinoGrifoni

4
이것은 작동하지 않습니다. Chrome, Opera, Firefox 및 (아마도) Safari navigator.appName == "Netscape"에서 true로 평가됩니다.
잭 Giffin

2
같게. Chrome, Opera, Firefox, Safari에서 실패
BBaysinger

91

IE 및 Edge를 확인하는 방법을 알고있는 올바른 최신 방법은 다음과 같습니다.

if (/MSIE 10/i.test(navigator.userAgent)) {
   // This is internet explorer 10
   window.alert('isIE10');
}

if (/MSIE 9/i.test(navigator.userAgent) || /rv:11.0/i.test(navigator.userAgent)) {
    // This is internet explorer 9 or 11
    window.location = 'pages/core/ie.htm';
}

if (/Edge\/\d./i.test(navigator.userAgent)){
   // This is Microsoft Edge
   window.alert('Microsoft Edge');
}

지금은 매우 구체적인 검사를 수행하므로 코드에 추가 var isIE10이 필요하지 않습니다.

이 답변은 언젠가는 구식이 될 수 있으므로이 페이지에서 최신 IE 및 Edge 사용자 에이전트 문자열을 확인하십시오. https://msdn.microsoft.com/en-us/library/hh869301%28v=vs.85%29. aspx


2
FWIW, navigator.userAgentWin10 / Edge VM을 체크인 할 때 "Edge"문자열을 포함하지 않는 첫 번째 부분 만 가져옵니다 .
Dave Newton

1
어떤 버전의 Edge를 사용 중이며 여기에 게시 할 수 있습니까?
Skeptic

저는 VirtualBox 5.0.2 r 102096을 사용 하고 있으며 이미지 이름은 2015 년 8 월 27 일 월요일 MS 사이트에서 다운로드 한 Microsoft Edge.Win10.For.Mac.VirtualBox.zip입니다 . 이미지 바탕 화면 배경 에는 Edge 홈 페이지 Build 10240이 표시됩니다. 설정에 20.10240.16384.0으로 표시된 " 이 VM의 가장 최근 빌드 인 20150801 "에 있습니다.
Dave Newton

감사합니다. navigator.userAgent 문자열?
회의론자

1
전체 문자열 대신 "Mozilla / 5.0 (Windows NT 10.0; Win64; x64)"로 반환됩니다. IIRC VM / 이미지 문제에 관한 또 다른 질문을 찾았습니다.
Dave Newton

36
// detect IE8 and above, and Edge
if (document.documentMode || /Edge/.test(navigator.userAgent)) {
    ... do something
}

설명:

document.documentMode

IE8에서 처음 사용할 수있는 IE 전용 속성입니다.

/Edge/

'Edge'문자열을 검색하는 정규식-그런 다음 'navigator.userAgent'속성에 대해 테스트합니다.

2020 년 3 월 업데이트

@Jam은 최신 버전의 Edge가 이제 Edg사용자 에이전트로 보고한다고 말합니다 . 따라서 수표는 다음과 같습니다.

if (document.documentMode || /Edge/.test(navigator.userAgent) || /Edg/.test(navigator.userAgent)) {
    ... do something
}

2
이것은 IE와 Edge 모두에서 저에게 일하는 유일한 페이지입니다.
Meloman

1
/Edge\//.test(navigator.userAgent) 좀 더 견고하게하기 위해 백 슬래시를 포함하는 것을 선호합니다.
jj

1
최신 버전의 Edge에서는 사용자 에이전트의 Edg 일뿐입니다. 따라서 슬래시를 포함하여 IE, Edge 및 Edge 크롬을 테스트하려면 :document.documentMode || /Edge\//.test(navigator.userAgent) || /Edg\//.test(navigator.userAgent)
Jam

"Edg"UA 문자열을 사용하여 Edge를 감지 할 필요가 없다고 가정합니다. 이는 Chromium 기반이기 때문에 감지되고 싶지 않기 때문입니다 (EdgeHTML과 반대)
Andrey

15

UAParser https://github.com/faisalman/ua-parser-js를 사용하고 있습니다.

var a = new UAParser();
var name = a.getResult().browser.name;
var version = a.getResult().browser.version;

2
일반적으로 기능 감지는 브라우저 감지보다 낫습니다. 즉, 브라우저를 실제로 감지해야하는 경우 라이브러리를 사용합니다 (여기에 제안 된대로). 사용자 에이전트 문자열을 구문 분석하는 데는 많은 복잡성이 있으며 라이브러리는 실수의 위험을 낮 춥니 다.
sandstrom

매우 도움이되었고 다른 솔루션은 작동하지 않았습니다.이 플러그인은 저에게 완벽하게 작동했습니다.
edencorbin

11

주제는 약간 오래되었지만 여기의 스크립트는 Firefox를 False Positive (EDGE v12)로 감지하므로 다음과 같은 버전을 사용합니다.

function isIEorEDGE(){
  if (navigator.appName == 'Microsoft Internet Explorer'){
    return true; // IE
  }
  else if(navigator.appName == "Netscape"){                       
     return navigator.userAgent.indexOf('.NET') > -1; // Only Edge uses .NET libraries
  }       

  return false;
}

물론 더 간결하게 작성할 수 있습니다.

function isIEorEDGE(){
  return navigator.appName == 'Microsoft Internet Explorer' || (navigator.appName == "Netscape" && navigator.userAgent.indexOf('.NET') > -1);
}

가장자리에 대해 false를 반환
크림 채찍 비행기

@CreamWhippedAirplane에 Edge 버전에서 제공 한 navigator.appName의 결과를 여기에 게시 할 수 있습니까? 어쩌면 그들은 최근 변경
GavinoGrifoni

@CreamWhippedAirplane이 변경된 것 같습니다 navigator.appVersion. 이제 더 이상 "Trident"를 포함하지 않고 대신 "Edge"를 이름에 올바르게 추가합니다. 지금 내 답변 업데이트 중!
GavinoGrifoni

이것은 browserstack.com에서 테스트 할 때 저에게 효과적이지 않았습니다. 실제 컴퓨터에서 작동하는지 모르겠습니다! 그러나 browserstack에 내가 가지고 Netscape... APPNAME로
베티 세인트에게

4
IE 11에서 실패합니다. IE 11은 appname으로 'Netscape'만 제공하므로 조건이 실패합니다
Ankur Aggarwal

8

이 기능은 저에게 완벽하게 작동했습니다. Edge도 감지합니다.

원래이 Codepen에서 :

https://codepen.io/gapcode/pen/vEJNZN

/**
 * detect IE
 * returns version of IE or false, if browser is not Internet Explorer
 */
function detectIE() {
  var ua = window.navigator.userAgent;

  // Test values; Uncomment to check result …

  // IE 10
  // ua = 'Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)';

  // IE 11
  // ua = 'Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko';

  // Edge 12 (Spartan)
  // ua = 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Edge/12.0';

  // Edge 13
  // ua = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2486.0 Safari/537.36 Edge/13.10586';

  var msie = ua.indexOf('MSIE ');
  if (msie > 0) {
    // IE 10 or older => return version number
    return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
  }

  var trident = ua.indexOf('Trident/');
  if (trident > 0) {
    // IE 11 => return version number
    var rv = ua.indexOf('rv:');
    return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
  }

  var edge = ua.indexOf('Edge/');
  if (edge > 0) {
    // Edge (IE 12+) => return version number
    return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
  }

  // other browser
  return false;
}

그런 다음 if (detectIE()) { /* do IE stuff */ }코드에서 사용할 수 있습니다 .


이 페이지에 2019 년 다른 솔루션에 나를 위해 일한이 IE 11 파이어 폭스에 대한 위양성, 또는 위음성을했다
멜리사 프리먼

6

MS 브라우저를 사용하는 사용자에게 경고 나 무언가를주고 싶다면이 코드가 좋습니다.

HTML :

<p id="IE">You are not using a microsoft browser</p>

자바 스크립트 :

using_ms_browser = navigator.appName == 'Microsoft Internet Explorer' || (navigator.appName == "Netscape" && navigator.appVersion.indexOf('Edge') > -1) || (navigator.appName == "Netscape" && navigator.appVersion.indexOf('Trident') > -1);

if (using_ms_browser == true){
    document.getElementById('IE').innerHTML = "You are using a MS browser"
}

@GavinoGrifoni 덕분에



2

이 캡처 사용 : var IE = (navigator.userAgent.indexOf("Edge") > -1 || navigator.userAgent.indexOf("Trident/7.0") > -1) ? true : false;


3
삼진 연산이 중복되지만 이것은 나를 위해 가장 잘 작동했습니다. navigator.userAgent.indexOf("Edge") > -1 || navigator.userAgent.indexOf("Trident/7.0") > -1true 또는 false로 평가되므로 반환 / 사용할 수 있습니다.
Kolby

2

브라우저를 감지하는 한 줄 코드입니다.

브라우저가 IE 또는 Edge이면 true를 반환합니다.

let isIE = /edge|msie\s|trident\//i.test(window.navigator.userAgent)

0

다음은 IE10, IE11 및 Edge를 감지하는 자바 스크립트 클래스입니다.
Navigator 개체는 테스트 목적으로 삽입됩니다.

var DeviceHelper = function (_navigator) {
    this.navigator = _navigator || navigator;
};
DeviceHelper.prototype.isIE = function() {
    if(!this.navigator.userAgent) {
        return false;
    }

    var IE10 = Boolean(this.navigator.userAgent.match(/(MSIE)/i)),
        IE11 = Boolean(this.navigator.userAgent.match(/(Trident)/i));
    return IE10 || IE11;
};

DeviceHelper.prototype.isEdge = function() {
    return !!this.navigator.userAgent && this.navigator.userAgent.indexOf("Edge") > -1;
};

DeviceHelper.prototype.isMicrosoftBrowser = function() {
    return this.isEdge() || this.isIE();
};

0

Edge를 확인해야한다면 이것으로 가십시오.

if (navigator.userAgent.indexOf ( "Edge")> 1) {

//do something

}


-4

우선 메모장 ++ 문제가 아닙니다. " 문자열 일치 문제 "

모든 IE 버전의 공통 문자열은 MSIE입니다 . http://www.useragentstring.com/pages/Internet%20Explorer/ 에서 다양한 userAgent 문자열을 확인하십시오.

if(navigator.userAgent.indexOf("MSIE") != -1){
   alert('I am Internet Explorer!!');
}

이것을 시도했지만 작동하지 않습니다. IE의 메모장 ++에서 코드를 실행했는데 경고가 없었습니다. 디버거 콘솔을 확인했는데 오류가 없었습니다. 나는 Windows 7을 실행하고 있는데 그것이 IE의 버전에 영향을 미치는지 확실하지 않습니다

사용중인 IE 버전은 무엇입니까?
Amit Prabhu Parrikar
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.