JavaScript: jak sprawdzić, czy przeglądarką użytkownika jest Chrome?

220

Potrzebuję funkcji zwracającej wartość logiczną, aby sprawdzić, czy przeglądarka jest Chrome .

Jak utworzyć taką funkcjonalność?

Rella
źródło
16
Czy na pewno nie chcesz zamiast tego wykrywać funkcji (zamiast pytać „czy to Chrome?” Pytaj „czy mogę to zrobić, czego potrzebuję?”)
bdukes
42
kto wie? może poprosić użytkownika o pobranie rozszerzenia chrome
naveen
2
To pytanie ilustruje problem z wykrywaniem agenta użytkownika. Zaledwie trzy lata później Fun 3D Box Background (spróbuje) załadować w Chrome mój niskiej klasy telefon komórkowy, ale nawet nie spróbuje w Firefoksie na moim wysokiej klasy komputerze stacjonarnym.
Álvaro González,
5
Zgadzam się, że najlepszym rozwiązaniem jest wykrywanie funkcji. ale istnieją uzasadnione obszary, w których chciałbyś wykryć. np. Chcę małpować łatkę xhr.sendAsBinary tylko dla chrome. moje wstępne rozwiązanie sprawdzone, czy plik filereader.readasbinary jest zaimplementowany. Mam jednak problemy z tym, że łata to również w niektórych przeglądarkach mobilnych i dlatego przesyłanie nie powiedzie się. Chcę tej poprawki tylko dla Chrome.
frostymarvellous
4
Chcesz się dowiedzieć, dlaczego przeglądarka Chrome jest tak istotna? A może Chrome nie będzie mógł ładować kanałów RSS? Czy zamiast linkowania do kanału RSS, którego ładowanie nie powiedzie się w Chrome, możesz faktycznie ostrzec lub przekierować użytkownika? Nie, dziękuję, Google Chrome ...
Pic Mickael

Odpowiedzi:

205

Aktualizacja: zapoznaj się z odpowiedzią Jonathana, aby uzyskać zaktualizowany sposób rozwiązania tego problemu. Poniższa odpowiedź może nadal działać, ale może powodować pewne fałszywe alarmy w innych przeglądarkach.

var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);

Jednak, jak wspomniano, programy użytkownika mogą być sfałszowane, dlatego zawsze najlepiej jest korzystać z funkcji wykrywania (np. Modernizatora ) podczas rozwiązywania tych problemów, jak wspominają inne odpowiedzi.

Rion Williams
źródło
jakie jest uzasadnienie używania .toLowerCase - dlaczego nie tylko navigator.userAgent.indexOf („Chrome”) Widzę, że wiele osób z niego korzysta, ale nie jestem pewien, o co chodzi?
Jon
7
@Serg, ponieważ nie mają Chrome. To tylko skóra wokół iOS Safari.
Poetro,
2
Dzięki, chociaż twoje var powinno brzmieć camelCase
Dimitri Kopriwa
5
Ponieważ wiele przeglądarek zwraca się w tym przypadku, oto kod, którego użyłem, co wykluczało Edge, Maxthon, iOS Safari ... itd. var is_chrome = ((navigator.userAgent.toLowerCase().indexOf('chrome') > -1) &&(navigator.vendor.toLowerCase().indexOf("google") > -1));
Alex C.
2
Opera (co najmniej wersja 42) zwraca Google Incsię navigator.vendor, więc ta metoda nie jest kuloodporny, coś /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor) && !/OPR/.test(navigator.userAgent)będzie prawdopodobnie działać lepiej
yorch
314

Aby sprawdzić, czy przeglądarką jest Google Chrome , spróbuj tego:

// please note, 
// that IE11 now returns undefined again for window.chrome
// and new Opera 30 outputs true for window.chrome
// but needs to check if window.opr is not undefined
// and new IE Edge outputs to true now for window.chrome
// and if not iOS Chrome check
// so use the below updated condition
var isChromium = window.chrome;
var winNav = window.navigator;
var vendorName = winNav.vendor;
var isOpera = typeof window.opr !== "undefined";
var isIEedge = winNav.userAgent.indexOf("Edge") > -1;
var isIOSChrome = winNav.userAgent.match("CriOS");

if (isIOSChrome) {
   // is Google Chrome on IOS
} else if(
  isChromium !== null &&
  typeof isChromium !== "undefined" &&
  vendorName === "Google Inc." &&
  isOpera === false &&
  isIEedge === false
) {
   // is Google Chrome
} else { 
   // not Google Chrome 
}

Przykład zastosowania: http://codepen.io/jonathan/pen/WpQELR

Powodem tego jest to, że jeśli używasz inspektora Google Chrome i przejdź do karty konsoli. Wpisz „window” i naciśnij enter. Następnie będziesz mógł zobaczyć właściwości DOM dla „obiektu okna”. Po zwinięciu obiektu można wyświetlić wszystkie właściwości, w tym właściwość „chrome”.

Nie można już używać ściśle równych prawdy do sprawdzania IE window.chrome. IE kiedyś zwracało undefined, teraz zwraca true. Ale zgadnij co, IE11 powraca teraz niezdefiniowane. IE11 zwraca również pusty ciąg znaków ""dla window.navigator.vendor.

Mam nadzieję, że to pomoże!

AKTUALIZACJA:

Dziękujemy Halcyon991 za zwrócenie uwagi na to, że nowa Opera 18+ również spełnia swoje oczekiwaniawindow.chrome . Wygląda na to, że Opera 18 oparta jest na Chromium 31 . Dodałem więc sprawdzenie, aby upewnić się, że window.navigator.vendorjest: "Google Inc"a nie jest "Opera Software ASA". Również dzięki Ring i Adrien Be za to, że informacje o Chrome 33 już nie wracają ... window.chrometeraz sprawdza, czy nie ma wartości zero. Ale zwróć szczególną uwagę na IE11, dodałem sprawdzanie, undefinedponieważ IE11 teraz wyświetla dane wyjściowe undefined, tak jak to miało miejsce przy pierwszym wydaniu .. a następnie po kilku kompilacjach aktualizacji wypisało to na true... teraz ostatnia kompilacja aktualizacji wypisuje undefinedponownie. Microsoft nie może się zdecydować!

AKTUALIZACJA 24.07.2015 - dodatek do czeku Opera

Opera 30 właśnie została wydana. To już nie działa window.opera. A także window.chromewypisuje wartość true w nowej Operze 30. Musisz więc sprawdzić, czy OPR znajduje się w userAgent . Zaktualizowałem powyższy stan, aby uwzględnić tę nową zmianę w Operze 30, ponieważ używa ona tego samego silnika renderowania co Google Chrome.

AKTUALIZACJA 10/13/2015 - dodanie do sprawdzenia IE

Dodano sprawdzanie dla IE Edge, ponieważ wyświetla dane wyjściowe truedla window.chrome.. mimo że IE11 wyświetla dane wyjściowe undefineddla window.chrome. Dzięki artfulhacker za poinformowanie nas o tym!

AKTUALIZACJA 2/5/2016 - dodatek do czeku na iOS Chrome

Dodano czek dla iOS Chrome czek z CriOSpowodu wyświetlania truew Chrome na iOS. Dzięki xinthose za poinformowanie nas o tym!

AKTUALIZACJA 18.04.2018 - zmiana na sprawdzenie Opery

Edytowany czek na Operze, sprawdzanie window.oprnie jest undefinedod teraz Chrome 66 ma OPRw window.navigator.vendor. Dziękujemy Frosty Z i Danielowi Wallmanowi za zgłoszenie tego!

Jonathan Marzullo
źródło
To nie działa dla IE10. typeof window.chrome w IE10 zwraca {obiekt}
magritte
2
var isGoogleChrome = window.chrome! = null && window.navigator.vendor === „Google Inc.”;
Pierścień
1
Dzięki @xinthose .. Właśnie dodałem czek na IOS Chrome .. bardzo doceniam! :)
Jonathan Marzullo,
2
Może ten sam problem, co tutaj Daniel Wallman: mój agent użytkownika dla Androida na Androida zawiera ciąg „OPR”! Mozilla/5.0 (Linux; Android 8.0.0; ASUS_Z012D Build/OPR1.170623.026) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.109 Mobile Safari/537.36, dlatego isChrome()zwraca false .
Frosty Z
2
Dziękujemy @FrostyZ i @DanielWallman za poinformowanie nas. Naprawiłem go więc do kontroli Opera window.oprnie jest undefined.
Jonathan Marzullo
21

jeszcze krótszy: var is_chrome = /chrome/i.test( navigator.userAgent );

Wielki Lebowski
źródło
27
Wróć truew Microsoft Edge.
Cobby
16

Znacznie prostszym rozwiązaniem jest po prostu użycie:

var isChrome = !!window.chrome;

Po !!prostu przekształca obiekt w wartość logiczną. W przeglądarkach innych niż Chrome ta właściwość będzie undefined, co nie jest prawdą.

Uwaga: zwraca to również prawdę w przypadku wersji Edge opartych na Chrome (dziękuję @Carrm za zwrócenie na to uwagi).

Drew Noakes
źródło
5
Opera faktycznie powraca truedo window.chrome. Sprawdź conditionizr.com, który ma kuloodporną detekcję + naprawę.
Halcyon991,
7
Cóż, Opera jest w zasadzie Chrome
Karel Bílek
Po prostu nie rozumiem, dlaczego dwa razy !! , możesz bezpośrednio użyć, jeśli (chrome) {}
Vishal Sharma
3
@vishalsharma, !!konwertuje wartość na jedną truelub false. typeof(window.chrome)daje "object", a typeof(!!window.chrome)daje "boolean". Przykładowy kod również działa, ponieważ ifinstrukcja dokonuje konwersji.
Drew Noakes,
1
To również zwraca truedla Edge.
Carrm
14

console.log(JSON.stringify({
  isAndroid: /Android/.test(navigator.userAgent),
  isCordova: !!window.cordova,
  isEdge: /Edge/.test(navigator.userAgent),
  isFirefox: /Firefox/.test(navigator.userAgent),
  isChrome: /Google Inc/.test(navigator.vendor),
  isChromeIOS: /CriOS/.test(navigator.userAgent),
  isChromiumBased: !!window.chrome && !/Edge/.test(navigator.userAgent),
  isIE: /Trident/.test(navigator.userAgent),
  isIOS: /(iPhone|iPad|iPod)/.test(navigator.platform),
  isOpera: /OPR/.test(navigator.userAgent),
  isSafari: /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent),
  isTouchScreen: ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,
  isWebComponentsSupported: 'registerElement' in document && 'import' in document.createElement('link') && 'content' in document.createElement('template')
}, null, '  '));

Josef Ježek
źródło
Niestety, navigator.vendor === „Google Inc.” na Operze (co najmniej wer. 49), więc użycie kodu Opera pojawia się jako Chrome.
Wojtek Majerski,
9
Gdzieś na świecie kociak umiera za każde wyrażenie, którego tak naprawdę nie potrzebujemy.
Sz.
Bez wyjaśnień, bez wskazań na fałszywie pozytywne / negatywne, po prostu zrzut kodu tutaj ... Ta odpowiedź powinna być naprawdę zanegowana. To nie jest nawet odpowiedź na zadane pytanie.
Alexandre Germain
8
var is_chrome = /chrome/.test( navigator.userAgent.toLowerCase() );
naveen
źródło
3
Podobało mi się to, pamiętaj, że możesz także zrobić var ​​is_chrome = /chrome/i.test(navigator.userAgent); też
AlanFoster
14
Zwraca truew Microsoft Edge.
Cobby
@Cobby: Z całym szacunkiem, Edge nie został wtedy wydany. Dzięki za informację :)
naveen
3

Możesz także chcieć konkretnej wersji Chrome:

var ua = navigator.userAgent;
if(/chrome/i.test(ua)) {
    var uaArray = ua.split(' ')
    ,   version = uaArray[uaArray.length - 2].substr(7);
}

Przepraszam Wielkiego Lebowskiego za wykorzystanie jego odpowiedzi w mojej.

MrOodles
źródło
4
Wersja jest "537.36"w Microsoft Edge.
Cobby
3

Możesz użyć:

navigator.userAgent.indexOf("Chrome") != -1

Działa na v.71

magg89
źródło
navigator.userAgent.includes("Chrome")
Alex Szücs
2

Działa dla mnie w Chrome na Macu. Wydaje się być prostszy lub bardziej niezawodny (w przypadku testowania ciągu UserAgent) niż wszystkie powyższe.

        var isChrome = false;
        if (window.chrome && !window.opr){
            isChrome = true;
        }
        console.log(isChrome);
yurin
źródło
2
const isChrome = window.chrome && !window.opr;
ifeelbadformyoldquestions
1

Użytkownik może zmienić agenta użytkownika. Spróbuj przetestować webkitprefiksowaną właściwość w styleobiekcie bodyelementu

if ("webkitAppearance" in document.body.style) {
  // do stuff
}
guest271314
źródło
1
W Firefoksie: („webkitAnimation” w document.body.style) === true
Tomas Prado
3
FYI: „webkitAppearance” już nie działa. Edge używa go teraz. Prawdopodobnie najlepiej usunąć swoją odpowiedź. ^^
hexalys
0

Aby poznać nazwy różnych przeglądarek stacjonarnych (Firefox, IE, Opera, Edge, Chrome). Z wyjątkiem Safari.

function getBrowserName() {
  var browserName = '';
  var userAgent = navigator.userAgent;
  (typeof InstallTrigger !== 'undefined') && (browserName = 'Firefox');
  ( /* @cc_on!@*/ false || !!document.documentMode) && (browserName = 'IE');
  (!!window.chrome && userAgent.match(/OPR/)) && (browserName = 'Opera');
  (!!window.chrome && userAgent.match(/Edge/)) && (browserName = 'Edge');
  (!!window.chrome && !userAgent.match(/(OPR|Edge)/)) && (browserName = 'Chrome');

  /**
   * Expected returns
   * Firefox, Opera, Edge, Chrome
   */
  return browserName;
}

Działa w następujących wersjach przeglądarki:

Opera - 58.0.3135.79
Firefox - 65.0.2 (64-bit)
IE - 11.413.15063 (JS Fiddle no longer supports IE just paste in Console)
Edge - 44.17763.1.0
Chrome - 72.0.3626.121 (Official Build) (64-bit)

Zobacz sedno tutaj i skrzypce tutaj

Oryginalny fragment kodu już nie działał w Chrome i zapomniałem, gdzie go znalazłem. Wcześniej odbyło się safari, ale nie mam już dostępu do safari, więc nie mogę już więcej weryfikować.

Tylko kody Firefox i IE były częścią oryginalnego fragmentu kodu.

Sprawdzanie Opera, Edge i Chrome jest proste. Różnią się one w userAgent. OPRistnieje tylko w Operze.Edgeistnieje tylko w Edge. Aby sprawdzić Chrome, nie powinno ich być.

Jeśli chodzi o Firefox i IE, nie mogę wyjaśnić, co robią.

Dodam tę funkcjonalność do paczki, którą piszę

iamdevlinph
źródło
-4

wszystkie odpowiedzi są błędne. „Opera” i „Chrome” są takie same we wszystkich przypadkach.

(część edytowana)

oto właściwa odpowiedź

if (window.chrome && window.chrome.webstore) {
    // this is Chrome
}
Ararat Harutyunyan
źródło
1
Lepszy komentarz niż odpowiedź.
Jace Cotton
Jeśli zastanawiasz się, dlaczego zostałeś zredukowany, to po prostu nieprawda. Na przykład, obsługują one skróty klawiaturowe i modyfikatory klawiszy w różny sposób (i nie można ich również wykryć).
Zilk
Nie twierdzę, że „opera” i „chrome” to ta sama przeglądarka, tylko ikona jest inna. Mówię, że metody opisane powyżej dają ten sam wynik dla obu przeglądarek.
Ararat Harutyunyan
@Zilk Czy przetestowałeś na przykład pierwszą odpowiedź, która ma 66 głosów?
Ararat Harutyunyan
9
To nie będzie już działać od Chrome 71. window.chrome.webstorejest terazundefined
Esteban