Deteksi Safari menggunakan jQuery


111

Meskipun keduanya adalah browser berbasis Webkit, tanda kutip urlencode Safari di URL sementara Chrome tidak.

Oleh karena itu saya perlu membedakan keduanya di JS.

Dokumen deteksi browser jQuery menandai "safari" sebagai usang.

Apakah ada metode yang lebih baik atau apakah saya tetap menggunakan nilai yang tidak berlaku lagi untuk saat ini?


Saya tidak tahu apakah bertahan dengan itu adalah ide yang bagus, saya belum memeriksa ini secara mendalam, meskipun saya baru saja melihat-lihat dokumen $ .browser di chrome dan itu berbendera $.browser.safari === true. eeek.
davin

1
kemungkinan duplikat Bagaimana mendeteksi browser Safari, Chrome, IE, Firefox dan Opera tanpa mengendus agen pengguna ?.
Rob W

Jawaban:


340

Menggunakan campuran feature detectiondan Useragentstring:

    var is_opera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
    var is_Edge = navigator.userAgent.indexOf("Edge") > -1;
    var is_chrome = !!window.chrome && !is_opera && !is_Edge;
    var is_explorer= typeof document !== 'undefined' && !!document.documentMode && !is_Edge;
    var is_firefox = typeof window.InstallTrigger !== 'undefined';
    var is_safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

Pemakaian:
if (is_safari) alert('Safari');

Atau hanya untuk Safari, gunakan ini:

if ( /^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {alert('Its Safari');}

3
Dengan rasio 48 suara vs. 5 suara untuk fitur pendeteksian dengan efek samping, ternyata inilah solusi yang disarankan. :) Menjadikannya jawaban yang diterima.
AndreKR

1
Sebagai contoh betapa rapuhnya hal semacam ini, kode ini tidak mendeteksi Internet Explorer 11 karena string UA telah berubah. Lihat msdn.microsoft.com/en-us/library/ie/hh869301%28v=vs.85%29.aspx
Olly Hodgson

1
Tampilan web Android juga akan mengatakan Safari dan itu tidak benar
Curtis

15
Chrome / Windows akan melaporkan sebagai Safari:(Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36)
Blaise

6
is_explorer = (navigator.userAgent.indexOf ('MSIE')! == -1 || navigator.appVersion.indexOf ('Trident /')> 0) untuk juga mendukung IE11 >>> stackoverflow.com/a/22242528/2049986
Jacob van Lingen

74

Yang berikut ini mengidentifikasi Safari 3.0+ dan membedakannya dari Chrome:

isSafari = !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)

1
Ini masalahnya. TNX!
Eugen Sunic

10

sayangnya contoh di atas juga akan mendeteksi browser default android sebagai Safari, padahal sebenarnya bukan. Saya dulu navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1 && navigator.userAgent.indexOf('Android') == -1


7

Untuk memeriksa Safari saya menggunakan ini:

$.browser.safari = ($.browser.webkit && !(/chrome/.test(navigator.userAgent.toLowerCase())));
if ($.browser.safari) {
    alert('this is safari');
}

Ini bekerja dengan benar.


3

Rupanya satu-satunya solusi yang dapat diandalkan dan diterima adalah melakukan deteksi fitur seperti ini:

browser_treats_urls_like_safari_does = false;
var last_location_hash = location.hash;
location.hash = '"blah"';
if (location.hash == '#%22blah%22')
    browser_treats_urls_like_safari_does = true;
location.hash = last_location_hash;

2
Trik yang bagus, tapi sayangnya tidak berhasil. Kesetaraan (location.hash == '#% 22blah% 22') tidak akan berfungsi karena cara location.hash memperlakukan string. : /
Panos Kal.

1
Deteksi fitur adalah cara yang harus dilakukan, tetapi ada metode yang lebih baik yang tidak memiliki efek samping. Cuplikan Anda dapat mengganggu skrip lain yang mengandalkan peristiwa perubahan hash. Saya telah menandai pertanyaan itu sebagai duplikat dari ini . Saya telah membuat dan menguji metode di Safari 3.0 - 5.1.3 (Mac dan Windows). Ini satu baris :)
Rob W

2

Satu-satunya cara yang saya temukan adalah memeriksa apakah navigator.userAgent berisi kata iPhone atau iPad

if (navigator.userAgent.toLowerCase().match(/(ipad|iphone)/)) {
    //is safari
}

1

Jika Anda memeriksa penggunaan browser $.browser. Tetapi jika Anda memeriksa dukungan fitur (disarankan) kemudian gunakan $.support.

Anda TIDAK boleh menggunakan $ .browser untuk mengaktifkan / menonaktifkan fitur di halaman. Alasannya tidak dapat diandalkan dan umumnya tidak disarankan.

Jika Anda membutuhkan dukungan fitur maka saya merekomendasikan modernizr .


Ajari seseorang untuk memancing ... "Apakah ada metode yang lebih baik" - Ya, deteksi fitur.
John Strickler

Maksudmu seperti itu location.hash = '"blah"'; if (location.hash == '#%22blah%22') alert('is Safari');?
AndreKR

@AndreKR Tepatnya, saya akan membuat fungsi untuk secara khusus menguji fitur yang Anda periksa.
John Strickler

2
@Greg Anda tidak meminta browser .. Anda sedang menguji browser.
John Strickler

12
Deteksi fitur memang bagus, tetapi bagaimana dengan saat Anda ingin menghentikan browser tertentu menggunakan Animasi CSS (misalnya), karena penerapannya bermasalah? Ini secara teknis mendukung fitur tersebut, tetapi kami ingin mengambil keputusan untuk menonaktifkannya untuk browser itu, karena pengalaman lebih baik tanpa itu.
Phil Ricketts


0

Cara yang sangat berguna untuk memperbaikinya adalah dengan mendeteksi versi browser webkit dan memeriksa apakah versi tersebut paling tidak yang kita butuhkan, atau lakukan yang lain.

Menggunakan jQuery seperti ini:

"use strict";

$(document).ready(function() {
    var appVersion                  = navigator.appVersion;
    var webkitVersion_positionStart = appVersion.indexOf("AppleWebKit/") + 12;
    var webkitVersion_positionEnd   = webkitVersion_positionStart + 3;
    var webkitVersion               = appVersion.slice(webkitVersion_positionStart, webkitVersion_positionEnd);
	
    console.log(webkitVersion);

    if (webkitVersion < 537) {
        console.log("webkit outdated.");
    } else {
        console.log("webkit ok.");
    };
});

Ini memberikan perbaikan yang aman dan permanen untuk menangani masalah dengan penerapan webkit yang berbeda pada browser.

Selamat membuat kode!


0

Ini akan menentukan apakah browser itu Safari atau bukan.

if(navigator.userAgent.indexOf('Safari') !=-1 && navigator.userAgent.indexOf('Chrome') == -1)
{
    alert(its safari);
}else {
    alert('its not safari');
}

Sayangnya tidak berhasil. Diuji di Chrome v66 dan Safari.
Jonathan Arbely

0
    // Safari uses pre-calculated pixels, so use this feature to detect Safari
    var canva = document.createElement('canvas');
    var ctx = canva.getContext("2d");
    var img = ctx.getImageData(0, 0, 1, 1);
    var pix = img.data;     // byte array, rgba
    var isSafari = (pix[3] != 0);   // alpha in Safari is not zero

0

Saya menggunakan untuk mendeteksi mesin browser Apple, kondisi JavaScript sederhana ini:

 navigator.vendor.startsWith('Apple')

0

FUNGSI Generik

 var getBrowseActive = function (browserName) {
   return navigator.userAgent.indexOf(browserName) > -1;
 };
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.