JavaScript: จะทราบได้อย่างไรว่าเบราว์เซอร์ผู้ใช้เป็น Chrome

220

ฉันต้องการฟังก์ชั่นบางอย่างที่ส่งคืนค่าบูลีนเพื่อตรวจสอบว่าเบราว์เซอร์เป็นChromeหรือไม่

ฉันจะสร้างฟังก์ชั่นดังกล่าวได้อย่างไร

javascript  html  google-chrome  browser-detection 
— Rella
แหล่งที่มา
16
คุณแน่ใจหรือว่าไม่ต้องการทำการตรวจจับคุณสมบัติแทน (แทนที่จะถามว่า "Chrome นี้เป็นแบบนี้หรือไม่" ถาม "สิ่งนี้จะทำสิ่งที่ฉันต้องการได้หรือไม่?")
— bdukes
42
ใครจะรู้? เขาอาจต้องการให้ผู้ใช้ดาวน์โหลดส่วนขยายของ Chrome
— naveen
2
คำถามนี้แสดงให้เห็นถึงปัญหาของการตรวจสอบตัวแทนผู้ใช้ เพียงสามปีต่อมา Fun 3D Box Background จะโหลด (ลอง) ลงใน Chrome สำหรับโทรศัพท์มือถือของฉัน แต่จะไม่ลอง Firefox ในคอมพิวเตอร์เดสก์ท็อปคุณภาพสูง
— ÁlvaroGonzález
5
ฉันยอมรับการตรวจจับคุณสมบัติเป็นวิธีที่จะไป แต่มีพื้นที่ที่ถูกกฎหมายที่คุณต้องการตรวจจับ เช่นฉันต้องการลิง patch xhr.sendAsBinary สำหรับ chrome เท่านั้น โซลูชันเริ่มต้นของฉันตรวจสอบว่ามีการใช้งาน filereader.readasbinary หรือไม่ อย่างไรก็ตามฉันกำลังมีปัญหาว่ามันจะแก้ไขสำหรับเบราว์เซอร์มือถือบางอย่างเช่นกันและการอัปโหลดล้มเหลว ฉันต้องการโปรแกรมแก้ไขนี้สำหรับ Chrome เท่านั้น
— frostymarvelous
4
ต้องการทราบว่าเพราะเหตุใดจึงอาจเกี่ยวข้องกับการรู้ว่าเบราว์เซอร์เป็น Chrome หรือไม่ Chrome ไม่สามารถโหลดฟีด RSS ได้อย่างไร ดังนั้นแทนที่จะเชื่อมโยงไปยังฟีด RSS ที่จะไม่สามารถโหลดใน Chrome ได้จริงคุณสามารถให้คำเตือนหรือเปลี่ยนเส้นทางผู้ใช้? ไม่ต้องขอบคุณ Google Chrome ...
— Pic Mickael

คำตอบ:

205

อัปเดต: โปรดดูคำตอบของโจนาธานสำหรับวิธีการอัปเดตในการจัดการสิ่งนี้ คำตอบด้านล่างอาจยังใช้งานได้ แต่เป็นไปได้ว่าอาจก่อให้เกิดผลบวกปลอมในเบราว์เซอร์อื่น

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

อย่างไรก็ตามตัวแทนผู้ใช้ดังกล่าวสามารถปลอมแปลงดังนั้นจึงเป็นการดีที่สุดที่จะใช้การตรวจจับคุณสมบัติ (เช่นModernizer ) เมื่อจัดการกับปัญหาเหล่านี้ตามคำตอบอื่น ๆ ที่กล่าวถึง

— Rion Williams
แหล่งที่มา
อะไรคือเหตุผลเบื้องหลังการใช้. toLowerCase - ทำไมไม่เพียงแค่ navigator.userAgent.indexOf ('Chrome') ฉันเห็นผู้คนมากมายใช้มัน แต่ฉันไม่แน่ใจ
— Jon
7
@Serg เพราะพวกเขาไม่มี Chrome มันเป็นเพียงผิวรอบ iOS Safari
— Poetro
2
ขอบคุณแม้ว่าชื่อ var ของคุณควรเป็น camelCase
— Dimitri Kopriwa
5
เนื่องจากเบราว์เซอร์จำนวนมากกลับมาเป็นจริง ณ จุดนี้นี่คือรหัสที่ฉันใช้ซึ่งไม่รวม Edge, Maxthon, iOS safari ... ฯลฯ var is_chrome = ((navigator.userAgent.toLowerCase().indexOf('chrome') > -1) &&(navigator.vendor.toLowerCase().indexOf("google") > -1));
— Alex C.
2
Opera (อย่างน้อยรุ่น 42) กลับGoogle Incมาnavigator.vendorเป็นดังนั้นวิธีนี้ไม่กันกระสุนบางอย่างที่/Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor) && !/OPR/.test(navigator.userAgent)น่าจะทำงานได้ดีกว่า
— yorch
314

หากต้องการตรวจสอบว่าเบราว์เซอร์เป็นGoogle Chromeหรือไม่ลองนี้:

// 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 
}

ตัวอย่างการใช้งาน: http://codepen.io/jonathan/pen/WpQELR

เหตุผลนี้ใช้ได้เพราะถ้าคุณใช้ตัวตรวจสอบ Google Chrome และไปที่แท็บคอนโซล พิมพ์ 'window' แล้วกด Enter จากนั้นคุณสามารถดูคุณสมบัติ DOM สำหรับ 'window object' เมื่อคุณยุบวัตถุคุณสามารถดูคุณสมบัติทั้งหมดรวมถึงคุณสมบัติ 'chrome'

คุณไม่สามารถใช้อย่างเคร่งครัดเท่ากับความจริงอีกต่อไปเพื่อตรวจสอบใน IE window.chromeสำหรับ IE ใช้ในการกลับมาตอนนี้มันกลับundefined แต่คาดเดาว่าตอนนี้ IE11 จะส่งกลับไม่ได้กำหนดอีกครั้ง IE11 ยังส่งกลับสตริงว่างสำหรับtrue""window.navigator.vendor

ฉันหวังว่านี่จะช่วยได้!

UPDATE:

ขอขอบคุณHalcyon991 ที่ชี้ให้เห็นด้านล่างว่า Opera 18+ ใหม่ให้ผลลัพธ์ที่เป็นจริงwindow.chromeเช่นกัน ดูเหมือนว่าโอเปร่า 18จะขึ้นอยู่กับโครเมี่ยม 31 ดังนั้นผมจึงเพิ่มการตรวจสอบเพื่อให้แน่ใจว่าwindow.navigator.vendorเป็น: และไม่ได้เป็น"Google Inc" "Opera Software ASA"นอกจากนี้ยังต้องขอบคุณRingและAdrien Beสำหรับการเป็นผู้นำเกี่ยวกับ Chrome 33 ที่ไม่ได้กลับมาเป็นจริงอีกต่อไป ... window.chromeตอนนี้ตรวจสอบว่าไม่ใช่โมฆะ แต่เล่นอย่างใกล้ชิดกับ IE11 ฉันเพิ่มการตรวจสอบย้อนกลับundefinedเนื่องจาก IE11 ตอนนี้ออกundefinedเช่นเดียวกับที่ทำเมื่อเปิดตัวครั้งแรก .. หลังจากนั้นบางส่วนสร้างการปรับปรุงมันเอาท์พุทเป็นtrue.. ตอนนี้สร้างการปรับปรุงล่าสุดจะส่งออกundefinedอีกครั้ง Microsoft ไม่สามารถตัดสินใจได้!

อัพเดท 7/24/2015 - เพิ่มเติมสำหรับการตรวจสอบ Opera

Opera 30 เพิ่งเปิดตัว window.operaมันไม่ได้ผล และยังwindow.chromeให้ผลลัพธ์เป็นจริงใน Opera 30 ใหม่ดังนั้นคุณต้องตรวจสอบว่าOPRอยู่ในuserAgentหรือไม่ ฉันได้อัปเดตเงื่อนไขของฉันด้านบนเป็นบัญชีสำหรับการเปลี่ยนแปลงใหม่ใน Opera 30 เนื่องจากใช้เครื่องมือเรนเดอร์เดียวกันกับ Google Chrome

UPDATE 10/13/2015 - เพิ่มเติมสำหรับการตรวจสอบ IE

เพิ่มการตรวจสอบสำหรับ IE ขอบเพราะมันแสดงผลtrueสำหรับwindow.chrome.. แม้ว่า IE11 ผลสำหรับundefined window.chromeขอบคุณartfulhacker ที่แจ้งให้เราทราบเกี่ยวกับเรื่องนี้!

อัปเดต 2/5/2016 - การตรวจสอบ iOS Chrome เพิ่มเติม

เพิ่มการตรวจสอบ iOS Chrome CriOSเนื่องจากมีการส่งออกtrueChrome บน iOS ขอบคุณxinthose ที่แจ้งให้เราทราบเกี่ยวกับเรื่องนี้!

UPDATE 4/18/2018 - เปลี่ยนเป็นเช็ค Opera

การตรวจสอบการแก้ไขสำหรับโอเปร่า, การตรวจสอบwindow.oprไม่ได้undefinedตั้งแต่ตอนนี้ Chrome 66 มีในOPR window.navigator.vendorขอบคุณFrosty ZและDaniel Wallman ที่รายงานสิ่งนี้!

— Jonathan Marzullo
แหล่งที่มา
สิ่งนี้ใช้ไม่ได้กับ IE10 typeof window.chrome ใน IE10 คืนค่า {object}
— magritte
2
var isGoogleChrome = window.chrome! = null && window.navigator.vendor === "Google Inc. ";
— แหวน
1
ขอบคุณ @xinthose .. ฉันเพิ่งเพิ่มการตรวจสอบสำหรับ IOS Chrome .. ชื่นชมมาก! :)
— Jonathan Marzullo
2
อาจเป็นปัญหาเดียวกันกับ Daniel Wallman ที่นี่: ตัวแทนผู้ใช้ Android Chrome ของฉันมีสตริง "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ดังนั้นisChrome()ผลตอบแทนที่เป็นเท็จ
— Frosty Z
2
ขอบคุณ @FrostyZ และ @DanielWallman ที่แจ้งให้เราทราบ ฉันคงมันเพื่อให้ตรวจสอบละครไม่ได้window.opr undefined
— Jonathan Marzullo
16

วิธีที่ง่ายกว่านั้นคือใช้งาน:

var isChrome = !!window.chrome;

!!เพียงแปลงวัตถุที่ค่าบูลีน ในเบราว์เซอร์ที่ไม่ใช่ Chrome คุณสมบัตินี้จะเป็นundefinedซึ่งไม่เป็นความจริง

โปรดทราบว่าสิ่งนี้จะส่งคืนค่าจริงสำหรับเวอร์ชันของ Edge ที่ใช้ Chrome (ขอบคุณ @Carrm สำหรับการชี้ให้เห็น)

— Noakes ดึง
แหล่งที่มา
5
โอเปร่าจริงส่งกลับไปtrue window.chromeตรวจสอบ conditionizr.com ซึ่งมีระบบกันกระสุนกันกระสุน + แก้ไข
— Halcyon991
7
โอเคนั้นเป็น Chrome โดยทั่วไป
— Karel Bílek
ฉันไม่เข้าใจว่าทำไมสองครั้ง !! คุณสามารถใช้โดยตรงหาก (chrome) {}
— Vishal Sharma
3
@vishalsharma การ!!แปลงค่าเป็นอย่างใดอย่างหนึ่งหรือtrue ทำให้ในขณะที่ช่วยให้ ตัวอย่างรหัสของคุณก็ใช้งานได้เช่นกันเนื่องจากคำสั่งทำการแปลง falsetypeof(window.chrome)"object"typeof(!!window.chrome)"boolean"if
— Drew Noakes
1
สิ่งนี้จะส่งกลับtrueสำหรับ 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
แหล่งที่มา
น่าเสียดายที่ navigator.vendor === "Google Inc. " บน Opera (อย่างน้อย v.49) ดังนั้นการใช้รหัส Opera จะปรากฏเป็น Chrome
— Wojtek Majerski
9
ที่ไหนสักแห่งในโลกมีลูกแมวตายสำหรับทุก ๆ regex ที่เราไม่ต้องการ
— Sz.
ไม่มีคำอธิบายไม่มีสิ่งบ่งชี้ถึงการบวก / เชิงลบที่ผิดพลาดเพียงส่วนหนึ่งของโค้ดที่ถูกทิ้งไว้ที่นี่ ... การตอบสนองนี้ควรลดลงจริง ๆ มันไม่ได้เป็นคำตอบสำหรับคำถามที่ถาม
— Alexandre Germain
8 
var is_chrome = /chrome/.test( navigator.userAgent.toLowerCase() );
— Naveen
แหล่งที่มา
3
ฉันชอบสิ่งนี้โปรดจำไว้ว่าคุณยังสามารถทำได้ var is_chrome = /chrome/i.test(navigator.userAgent); เกินไป
— AlanFoster
14
ส่งคืนtrueใน Microsoft Edge
— Cobby
@Cobby: ด้วยความเคารพอย่างสูง Edge ไม่ได้ถูกปล่อยออกมาในเวลานั้น ขอบคุณสำหรับข้อมูล :)
— naveen
3

คุณอาจต้องการ Chrome รุ่นที่ระบุ:

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

ขอโทษ The Big Lebowski ที่ใช้คำตอบของเขาในเหมือง

— MrOodles
แหล่งที่มา
4
เวอร์ชันอยู่"537.36"ใน Microsoft Edge
— Cobby
2

ใช้งานได้สำหรับฉันบน Chrome บน Mac ดูเหมือนว่าจะง่ายขึ้นหรือน่าเชื่อถือมากขึ้น (ในกรณีที่ทดสอบ userAgent string) กว่าทั้งหมดข้างต้น

        var isChrome = false;
        if (window.chrome && !window.opr){
            isChrome = true;
        }
        console.log(isChrome);
— yurin
แหล่งที่มา
2
const isChrome = window.chrome && !window.opr;
— ifeelbadformyoldquestions
1

ผู้ใช้สามารถเปลี่ยนตัวแทนผู้ใช้ ลองทดสอบwebkitคุณสมบัตินำหน้าในstyleวัตถุของbodyองค์ประกอบ

if ("webkitAppearance" in document.body.style) {
  // do stuff
}
— guest271314
แหล่งที่มา
1
ใน firefox: ("webkitAnimation" ใน document.body.style) === จริง
— Tomas Prado
3
FYI: 'webkitAppearance' ไม่ทำงานอีกต่อไป Edge กำลังใช้งานอยู่ อาจเป็นการดีที่สุดที่จะลบคำตอบของคุณ ^^
— hexalys
0

หากต้องการทราบชื่อของเบราว์เซอร์เดสก์ท็อปที่แตกต่างกัน (Firefox, IE, Opera, Edge, Chrome) ยกเว้น 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;
}

ทำงานในเบราว์เซอร์เวอร์ชันต่อไปนี้:

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)

ดูส่วนสำคัญที่นี่และซอที่นี่

ข้อมูลโค้ดต้นฉบับไม่สามารถใช้งานกับ Chrome ได้อีกต่อไปและฉันลืมที่ฉันพบ เคยเป็นซาฟารีมาก่อน แต่ฉันไม่สามารถเข้าถึงซาฟารีได้อีกต่อไปดังนั้นฉันจึงไม่สามารถยืนยันได้อีกต่อไป

เฉพาะรหัส Firefox และ IE เท่านั้นที่เป็นส่วนหนึ่งของข้อมูลโค้ดต้นฉบับ

การตรวจสอบ Opera, Edge และ Chrome อยู่ตรงหน้า พวกเขามีความแตกต่างใน userAgent OPRมีอยู่ใน Opera เท่านั้นEdgeมีอยู่ใน Edge เท่านั้น ดังนั้นเพื่อตรวจสอบ Chrome สตริงเหล่านี้ไม่ควรมี

สำหรับ Firefox และ IE ฉันไม่สามารถอธิบายสิ่งที่พวกเขาทำ

ฉันจะเพิ่มฟังก์ชันนี้ให้กับ แพ็คเกจที่ฉันเขียน

— iamdevlinph
แหล่งที่มา
-4

คำตอบทั้งหมดผิด "Opera" และ "Chrome" เหมือนกันในทุกกรณี

(ส่วนที่แก้ไข)

นี่คือคำตอบที่ถูก

if (window.chrome && window.chrome.webstore) {
    // this is Chrome
}
— อารารัต Harutyunyan
แหล่งที่มา
1
แสดงความคิดเห็นได้ดีกว่าคำตอบ
— Jace Cotton
ในกรณีที่คุณสงสัยว่าทำไมคุณถึงถูก modded มันก็ไม่เป็นความจริง ตัวอย่างหนึ่งพวกเขาจัดการกับแป้นพิมพ์ลัดและตัวดัดแปลงคีย์การเข้าถึงต่างกัน (และตรวจไม่พบคุณลักษณะเหล่านี้)
— Zilk
ฉันไม่ได้บอกว่า 'โอเปร่า' และ 'chrome' เป็นเบราว์เซอร์ไอคอนเดียวเท่านั้นที่แตกต่างกัน ฉันบอกว่าวิธีการที่อธิบายไว้ข้างต้นให้ผลเหมือนกันสำหรับเบราว์เซอร์ทั้งสอง
— อารารัต Harutyunyan
@Zilk คุณได้ทำการทดสอบตัวอย่างคำตอบแรกที่มี 66 up โหวต?
— อารารัต Harutyunyan
9
สิ่งนี้จะไม่ทำงานเหมือน Chrome 71 อีกต่อไปwindow.chrome.webstoreตอนนี้undefined
— Esteban
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.