Виявити Safari за допомогою jQuery


111

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

Тому мені потрібно розрізнити між цими двома в JS.

Документи виявлення браузера jQuery позначають "сафарі" як застаріле.

Чи є кращий метод чи я зараз просто дотримуюся застарілого значення?


Я не знаю, чи приклеюватись до неї така гарна ідея, я не перевіряв це глибоко, хоча я просто переглянув документи $ .browser на хромі та це прапори $.browser.safari === true. eeek.
davin

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

1
Як приклад того, наскільки крихкий такий предмет, цей код не виявляє Internet Explorer 11, оскільки рядка UA змінилася. Дивіться msdn.microsoft.com/en-us/library/ie/hh869301%28v=vs.85%29.aspx
Оллі Ходжсон

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). Це однолінійний :)
Rob W

2

Єдиний спосіб, який я знайшов, це перевірити, чи містить Navigator.userAgent слово iPhone або iPad

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

1

Якщо ви перевіряєте використання браузера $.browser. Але якщо ви перевіряєте підтримку функції (рекомендується), тоді використовуйте $.support.

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

Якщо вам потрібна підтримка функції, то я рекомендую модернізатор .


Навчіть людину ловити рибу ... "Чи є кращий метод" - Так, функція виявлення.
Джон Стріклер

Ви маєте на увазі щось на кшталт location.hash = '"blah"'; if (location.hash == '#%22blah%22') alert('is Safari');?
AndreKR

@AndreKR Саме так, я б створив функцію, щоб спеціально перевірити функцію, яку ви перевіряєте.
Джон Стріклер

2
@Greg Ви не запитуєте браузера .. ви тестуєте браузер.
Джон Стріклер

12
Виявлення функцій чудово, але як бути, коли ви хочете зупинити певний браузер від використання CSS Animations (наприклад), оскільки він має помилкову реалізацію? Він технічно підтримує цю функцію, але ми хочемо прийняти рішення про відключення її для цього веб-переглядача, оскільки в цьому випадку краще працювати.
Філ Рікеттс


0

Дуже корисний спосіб виправити це - виявити веб-версію веб-переглядачів і перевірити, чи є вона хоча б тією, що нам потрібна, а ще зробити щось інше.

За допомогою 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.");
    };
});

Це забезпечує безпечне та постійне рішення для вирішення проблем із різними реалізаціями веб-браузера.

Щасливого кодування!


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

Я використовую для виявлення двигуна браузера Apple, ця проста умова JavaScript:

 navigator.vendor.startsWith('Apple')

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.