Erkennen Sie Safari mit jQuery


111

Obwohl beide Webkit-basierte Browser sind, werden in Safari Anführungszeichen in der URL in Safari-Urlencodes gesetzt, in Chrome jedoch nicht.

Daher muss ich in JS zwischen diesen beiden unterscheiden.

In den Browsererkennungsdokumenten von jQuery wird "Safari" als veraltet markiert.

Gibt es eine bessere Methode oder halte ich mich vorerst nur an den veralteten Wert?


Ich weiß nicht, ob es eine so gute Idee ist, daran festzuhalten. Ich habe dies nicht eingehend untersucht, obwohl ich gerade zu den $ .browser-Dokumenten auf Chrome geblättert habe und sie markiert sind $.browser.safari === true. eeek.
David

1
Mögliches Duplikat von Wie erkennt man einen Safari-, Chrome-, IE-, Firefox- und Opera-Browser, ohne dass der Benutzeragent daran schnüffelt ?
Rob W

Antworten:


339

Verwenden einer Mischung aus feature detectionund UseragentZeichenfolge:

    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);

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

Oder verwenden Sie Folgendes nur für Safari:

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

3
Mit einem Verhältnis von 48 Stimmen zu 5 Stimmen für eine Feature-Erkennung mit Nebenwirkungen ist dies anscheinend die empfohlene Lösung. :) Antwort akzeptiert.
AndreKR

1
Als Beispiel dafür, wie zerbrechlich diese Art von Dingen ist, erkennt dieser Code Internet Explorer 11 nicht, da sich die UA-Zeichenfolge geändert hat. Siehe msdn.microsoft.com/en-us/library/ie/hh869301%28v=vs.85%29.aspx
Olly Hodgson

1
Android Webview wird auch Safari sagen und das ist nicht korrekt
Curtis

15
Chrome / Windows meldet als 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) unterstützt auch IE11 >>> stackoverflow.com/a/22242528/2049986
Jacob van Lingen

74

Im Folgenden wird Safari 3.0+ identifiziert und von Chrome unterschieden:

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

1
Das ist die Sache. TNX!
Eugen Sunic

10

Leider erkennen die obigen Beispiele auch den Standardbrowser von Android als Safari, was nicht der Fall ist. ich benutzte navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1 && navigator.userAgent.indexOf('Android') == -1


7

Zur Überprüfung von Safari habe ich Folgendes verwendet:

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

Es funktioniert richtig.


3

Anscheinend wäre die einzige zuverlässige und akzeptierte Lösung die Erkennung von Merkmalen wie folgt:

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
Schöner Trick, aber leider funktioniert es nicht. Die Gleichheit (location.hash == '#% 22blah% 22') funktioniert nicht, da location.hash die Zeichenfolge behandelt. : /
Panos Kal.

1
Feature-Erkennung ist der richtige Weg, aber es gibt eine bessere Methode, die keine Nebenwirkungen hat. Ihr Snippet kann andere Skripte stören, die auf Hash-Änderungsereignissen beruhen. Ich habe die Frage als Duplikat davon markiert . Ich habe die Methode in Safari 3.0 - 5.1.3 (Mac und Windows) erstellt und getestet. Es ist ein Einzeiler :)
Rob W

2

Ich habe nur überprüft, ob navigator.userAgent ein iPhone- oder iPad-Wort enthält

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

1

Wenn Sie den Browser überprüfen, verwenden Sie $.browser. Wenn Sie jedoch die Funktionsunterstützung überprüfen (empfohlen), verwenden Sie $.support.

Sie sollten $ .browser NICHT verwenden, um Funktionen auf der Seite zu aktivieren / deaktivieren. Grund dafür ist, dass es nicht zuverlässig ist und im Allgemeinen einfach nicht empfohlen wird.

Wenn Sie Funktionsunterstützung benötigen, empfehle ich modernizr .


Bringen Sie einem Mann das Fischen bei ... "Gibt es eine bessere Methode?" - Ja, Feature-Erkennung.
John Strickler

Du meinst so etwas wie location.hash = '"blah"'; if (location.hash == '#%22blah%22') alert('is Safari');?
AndreKR

@AndreKR Genau, ich würde eine Funktion erstellen, um speziell auf die Funktion zu testen, nach der Sie suchen.
John Strickler

2
@ Greg Sie fragen nicht den Browser .. Sie testen den Browser.
John Strickler

12
Die Funktionserkennung ist großartig, aber was ist, wenn Sie einen bestimmten Browser daran hindern möchten, CSS-Animationen zu verwenden (zum Beispiel), weil er eine fehlerhafte Implementierung hat? Es unterstützt die Funktion technisch, aber wir möchten eine Entscheidung treffen, sie für diesen Browser zu deaktivieren, da die Erfahrung ohne diese Funktion in diesem Fall besser ist.
Phil Ricketts


0

Eine sehr nützliche Möglichkeit, dies zu beheben, besteht darin, die Webkit-Version des Browsers zu erkennen und zu überprüfen, ob es mindestens die ist, die wir benötigen, oder etwas anderes zu tun.

Mit jQuery geht es so:

"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.");
    };
});

Dies bietet eine sichere und dauerhafte Lösung für Probleme mit den verschiedenen Webkit-Implementierungen des Browsers.

Viel Spaß beim Codieren!


0

Dies bestimmt, ob der Browser Safari ist oder nicht.

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

Funktioniert leider nicht. Getestet auf Chrome v66 und 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

Ich benutze, um Apple Browser Engine zu erkennen, diese einfache JavaScript-Bedingung:

 navigator.vendor.startsWith('Apple')

0

Generische FUNKTION

 var getBrowseActive = function (browserName) {
   return navigator.userAgent.indexOf(browserName) > -1;
 };
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.