Bagaimana cara mendeteksi browser Safari menggunakan JavaScript? Saya telah mencoba kode di bawah ini dan tidak hanya mendeteksi Safari tetapi juga browser Chrome.
function IsSafari() {
var is_safari = navigator.userAgent.toLowerCase().indexOf('safari/') > -1;
return is_safari;
}
Jawaban:
Anda dapat dengan mudah menggunakan indeks Chrome untuk memfilter Chrome:
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('safari') != -1) {
if (ua.indexOf('chrome') > -1) {
alert("1") // Chrome
} else {
alert("2") // Safari
}
}
Catatan: selalu coba untuk mendeteksi perilaku tertentu yang Anda coba perbaiki, alih-alih menargetkannyaisSafari?
Sebagai upaya terakhir, deteksi Safari dengan regex ini:
var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
Ini menggunakan tampilan negatif dan mengecualikan Chrome, Edge, dan semua browser Android yang menyertakan Safarinama di agen penggunanya.
Seperti yang telah diketahui orang lain, deteksi fitur lebih disukai daripada memeriksa browser tertentu. Salah satu alasannya adalah string agen pengguna dapat diubah. Alasan lainnya adalah string dapat berubah dan merusak kode Anda di versi yang lebih baru.
Jika Anda masih ingin melakukannya dan menguji versi Safari apa pun, saya sarankan untuk menggunakan ini
var isSafari = navigator.vendor && navigator.vendor.indexOf('Apple') > -1 &&
navigator.userAgent &&
navigator.userAgent.indexOf('CriOS') == -1 &&
navigator.userAgent.indexOf('FxiOS') == -1;
Ini akan bekerja dengan semua versi Safari di semua perangkat: Mac, iPhone, iPod, iPad.
Untuk menguji di browser Anda saat ini: https://jsfiddle.net/j5hgcbm2/
Diperbarui sesuai dengan dokumen Chrome untuk mendeteksi Chrome di iOS dengan benar
Perlu dicatat bahwa semua Browser di iOS hanyalah pembungkus untuk Safari dan menggunakan mesin yang sama. Lihat komentar bfred.it tentang jawabannya sendiri di utas ini.
Diperbarui sesuai dengan dokumen Firefox untuk mendeteksi Firefox di iOS dengan benar
isSafariakan ada truedi browser Safari, falsejika tidak. Anda cukup menggunakan potongan di atas dan kemudian menggunakan milik Anda hampir seperti yang Anda posting. if (isSafari) { do_this(); } else { do_that(); }.
&& !navigator.userAgent.match('FxiOS')serupa dengan pemeriksaan Chrome - ref ( developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent/… )
Gunakan saja:
var isSafari = window.safari !== undefined;
if (isSafari) console.log("Safari, yeah!");
getUserMedia.
Kode ini digunakan untuk mendeteksi browser safari saja
if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0)
{
alert("Browser is Safari");
}
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.94 Safari/537.36 OPR/24.0.1558.51 (Edition Next)browser Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.34 Safari/534.24
Karena userAgent untuk chrome dan safari hampir sama, maka lebih mudah untuk melihat vendor browser
Safari
navigator.vendor == "Apple Computer, Inc."
Chrome
navigator.vendor == "Google Inc."
FireFox (mengapa kosong?)
navigator.vendor == ""
IE (mengapa tidak ditentukan?)
navigator.vendor == undefined
Hanya Safari tanpa Chrome:
Setelah mencoba kode lain, saya tidak menemukan kode yang berfungsi dengan Safari versi baru dan lama.
Akhirnya, saya melakukan kode ini yang bekerja dengan sangat baik untuk saya:
var ua = navigator.userAgent.toLowerCase();
var isSafari = false;
try {
isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);
}
catch(err) {}
isSafari = (isSafari || ((ua.indexOf('safari') != -1)&& (!(ua.indexOf('chrome')!= -1) && (ua.indexOf('version/')!= -1))));
//test
if (isSafari)
{
//Code for Safari Browser (Desktop and Mobile)
document.getElementById('idbody').innerHTML = "This is Safari!";
}
else
{
document.getElementById('idbody').innerHTML = "Not is Safari!";
}<body id="idbody">
</body>Saya tidak tahu mengapa OP ingin mendeteksi Safari, tetapi dalam kasus yang jarang terjadi Anda memerlukan browser sniffing saat ini, mungkin lebih penting untuk mendeteksi mesin render daripada nama browser. Misalnya di iOS, semua browser menggunakan mesin Safari / Webkit, jadi tidak ada gunanya mendapatkan "chrome" atau "firefox" sebagai nama browser jika perender yang mendasari sebenarnya Safari / Webkit. Saya belum menguji kode ini dengan browser lama tetapi berfungsi dengan semua yang cukup baru di Android, iOS, OS X, Windows dan Linux.
<script>
let browserName = "";
if(navigator.vendor.match(/google/i)) {
browserName = 'chrome/blink';
}
else if(navigator.vendor.match(/apple/i)) {
browserName = 'safari/webkit';
}
else if(navigator.userAgent.match(/firefox\//i)) {
browserName = 'firefox/gecko';
}
else if(navigator.userAgent.match(/edge\//i)) {
browserName = 'edge/edgehtml';
}
else if(navigator.userAgent.match(/trident\//i)) {
browserName = 'ie/trident';
}
else
{
browserName = navigator.userAgent + "\n" + navigator.vendor;
}
alert(browserName);
</script>
Untuk memperjelas:
Saya menggunakan ini
function getBrowserName() {
var name = "Unknown";
if(navigator.userAgent.indexOf("MSIE")!=-1){
name = "MSIE";
}
else if(navigator.userAgent.indexOf("Firefox")!=-1){
name = "Firefox";
}
else if(navigator.userAgent.indexOf("Opera")!=-1){
name = "Opera";
}
else if(navigator.userAgent.indexOf("Chrome") != -1){
name = "Chrome";
}
else if(navigator.userAgent.indexOf("Safari")!=-1){
name = "Safari";
}
return name;
}
if( getBrowserName() == "Safari" ){
alert("You are using Safari");
}else{
alert("You are surfing on " + getBrowserName(name));
}
Saya mengamati bahwa hanya satu kata yang membedakan Safari - "Versi". Jadi regex ini akan bekerja dengan sempurna:
/.*Version.*Safari.*/.test(navigator.userAgent)
Jawaban paling sederhana:
function isSafari() {
if (navigator.vendor.match(/[Aa]+pple/g).length > 0 )
return true;
return false;
}
navigator.vendor.toLowerCase().indexOf('apple') > -1
if (navigator.vendor.match(/apple/i)) { ... }.
Sebagai catatan, cara teraman yang saya temukan adalah dengan mengimplementasikan bagian Safari dari kode deteksi browser dari jawaban ini :
const isSafari = window['safari'] && safari.pushNotification &&
safari.pushNotification.toString() === '[object SafariRemoteNotification]';
Tentu saja, cara terbaik untuk menangani masalah khusus browser adalah selalu melakukan deteksi fitur, jika memungkinkan. Namun, menggunakan potongan kode seperti di atas masih lebih baik daripada deteksi string agen.
Saya tahu pertanyaan ini sudah lama, tetapi saya tetap berpikir untuk memposting jawabannya karena dapat membantu seseorang. Solusi di atas gagal dalam beberapa kasus edge, jadi kami harus menerapkannya dengan cara yang menangani iOS, Desktop, dan platform lain secara terpisah.
function isSafari() {
var ua = window.navigator.userAgent;
var iOS = !!ua.match(/iP(ad|od|hone)/i);
var hasSafariInUa = !!ua.match(/Safari/i);
var noOtherBrowsersInUa = !ua.match(/Chrome|CriOS|OPiOS|mercury|FxiOS|Firefox/i)
var result = false;
if(iOS) { //detecting Safari in IOS mobile browsers
var webkit = !!ua.match(/WebKit/i);
result = webkit && hasSafariInUa && noOtherBrowsersInUa
} else if(window.safari !== undefined){ //detecting Safari in Desktop Browsers
result = true;
} else { // detecting Safari in other platforms
result = hasSafariInUa && noOtherBrowsersInUa
}
return result;
}
Regex yang dimodifikasi untuk jawaban di atas
var isSafari = /^((?!chrome|android|crios|fxios).)*safari/i.test(navigator.userAgent);
"Masalah" unik ini adalah 100% tanda bahwa browser itu Safari (percaya atau tidak).
if (Object.getOwnPropertyDescriptor(Document.prototype, 'cookie').descriptor === false) {
console.log('Hello Safari!');
}
Ini berarti deskriptor objek cookie disetel ke false di Safari sementara di sisi lain adalah benar, yang sebenarnya membuat saya pusing di proyek lain. Selamat membuat kode!
Mungkin ini berhasil:
Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor')
EDIT: TIDAK LAGI BEKERJA
Mengendus agen pengguna benar-benar rumit dan tidak dapat diandalkan. Kami mencoba mendeteksi Safari di iOS dengan sesuatu seperti jawaban @ qingu di atas, itu bekerja dengan cukup baik untuk Safari, Chrome dan Firefox. Tapi itu salah mendeteksi Opera dan Edge sebagai Safari.
Jadi kami menggunakan fitur deteksi, seperti yang terlihat saat ini, serviceWorkerhanya didukung di Safari dan tidak di browser lain di iOS. Sebagaimana dinyatakan dalam https://jakearchibald.github.io/isserviceworkerready/
Dukungan tidak termasuk versi iOS dari browser pihak ketiga pada platform itu (lihat dukungan Safari).
Jadi kami melakukan sesuatu seperti
if ('serviceWorker' in navigator) {
return 'Safari';
}
else {
return 'Other Browser';
}
Catatan : Tidak diuji di Safari di MacOS.