Обнаружение Safari с помощью jQuery


111

Хотя оба являются браузерами на основе Webkit, Safari использует кавычки в URL-адресах, а Chrome - нет.

Поэтому мне нужно различать эти два в JS.

Документы jQuery по обнаружению браузера помечают safari как устаревшее.

Есть ли лучший метод, или я просто придерживаюсь устаревшего значения сейчас?


Я не знаю, насколько хорошо придерживаться этого, я не проверял это подробно, хотя я только что просмотрел документацию $ .browser на chrome и ее флажки $.browser.safari === true. угу.
Дэвин

1
возможный дубликат Как определить браузер Safari, Chrome, IE, Firefox и Opera без прослушивания пользовательского агента ?.
Роб В.

Ответы:


340

Использование комбинации feature detectionи Useragentстроки:

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

Использование:
if (is_safari) alert('Safari');

Или только для Safari используйте это:

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

3
С соотношением 48 голосов против 5 голосов за обнаружение функции с побочными эффектами, очевидно, это рекомендуемое решение. :) Делая принятый ответ.
AndreKR 05

1
В качестве примера того, насколько хрупки такие вещи, этот код не обнаруживает Internet Explorer 11, потому что строка UA изменилась. См. Msdn.microsoft.com/en-us/library/ie/hh869301%28v=vs.85%29.aspx
Olly Hodgson,

1
Веб-просмотр Android также скажет Safari, и это неверно,
Кертис,

15
Chrome / Windows сообщит как 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) для поддержки IE11 >>> stackoverflow.com/a/22242528/2049986
Якоб ван Линген,

74

Следующее определяет Safari 3.0+ и отличает его от Chrome:

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

1
Вот в чем дело. TNX!
Eugen Sunic

10

К сожалению, в приведенных выше примерах также будет обнаружен браузер Android по умолчанию как Safari, а это не так. я использовал navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1 && navigator.userAgent.indexOf('Android') == -1


7

Для проверки Safari я использовал это:

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

Работает корректно.


3

По-видимому, единственным надежным и приемлемым решением было бы обнаружение такой функции:

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
Хороший трюк, но, к сожалению, не работает. Равенство (location.hash == '#% 22blah% 22') не будет работать из-за того, как location.hash обрабатывает строку. : /
Панос Кал.

1
Обнаружение функций - это путь, но есть лучший метод, который не имеет побочных эффектов. Ваш фрагмент может мешать работе других скриптов, которые зависят от событий изменения хэша. Я пометил вопрос как дубликат этого . Я создал и протестировал метод в Safari 3.0 - 5.1.3 (Mac и Windows). Это однострочник :)
Роб В.

2

Единственный способ, который я нашел, - это проверить, содержит ли navigator.userAgent слово iPhone или iPad.

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

1

Если вы проверяете использование браузера $.browser. Но если вы проверяете поддержку функции (рекомендуется), используйте $.support.

Вы НЕ должны использовать $ .browser для включения / отключения функций на странице. Причина в том, что он ненадежен и, как правило, просто не рекомендуется.

Если вам нужна поддержка функций, я рекомендую modernizr .


Научите человека ловить рыбу ... «Есть ли способ получше» - Да, функция обнаружения.
Джон Стриклер

Вы имеете в виду что-то вроде location.hash = '"blah"'; if (location.hash == '#%22blah%22') alert('is Safari');?
AndreKR

@AndreKR Точно, я бы сделал функцию, чтобы специально протестировать функцию, которую вы проверяете.
Джон Стриклер

2
@Greg Вы не спрашиваете браузер ... вы тестируете браузер.
John Strickler

12
Обнаружение функций - это прекрасно, но как насчет того, чтобы запретить конкретному браузеру использовать CSS-анимацию (например), потому что в нем есть ошибки? Технически он поддерживает эту функцию, но мы хотим принять решение отключить ее для этого браузера, потому что в этом случае лучше работать без нее.
Фил Рикеттс


0

Очень полезный способ исправить это - определить версию webkit для браузеров и проверить, является ли она по крайней мере той, которая нам нужна, иначе сделайте что-нибудь еще.

Используя jQuery, это выглядит так:

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

Это обеспечивает безопасное и постоянное исправление для решения проблем с различными реализациями webkit в браузере.

Удачного кодирования!


0

Это определит, является ли браузер Safari или нет.

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

К сожалению, не работает. Проверено в Chrome v66 и Safari.
Джонатан Арбели

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

Общая ФУНКЦИЯ

 var getBrowseActive = function (browserName) {
   return navigator.userAgent.indexOf(browserName) > -1;
 };
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.