Bien que tous deux soient des navigateurs Webkit, Safari urlencode les guillemets dans l'URL, contrairement à Chrome.
Par conséquent, je dois faire la distinction entre les deux dans JS.
Documents de détection du navigateur de jQuery marque "safari" comme obsolète.
Existe-t-il une meilleure méthode ou dois-je m'en tenir à la valeur obsolète pour l'instant?
Utilisation d’un mélange de feature detection
et de Useragent
chaîne:
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);
Usage:
if (is_safari) alert('Safari');
Ou pour Safari uniquement, utilisez ceci:
if ( /^((?!chrome|Android).)*safari/i.test(navigator.userAgent)) {alert('Its Safari');}
Ce qui suit identifie Safari 3.0+ et le distingue de Chrome:
isSafari = !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)
malheureusement, les exemples ci-dessus détecteront également le navigateur par défaut d'Android comme Safari, ce qui n'est pas le cas. J'ai utilisé navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1 && navigator.userAgent.indexOf('Android') == -1
Pour vérifier Safari, j'ai utilisé ceci:
$.browser.safari = ($.browser.webkit && !(/chrome/.test(navigator.userAgent.toLowerCase())));
if ($.browser.safari) {
alert('this is safari');
}
Cela fonctionne correctement.
Apparemment, la seule solution fiable et acceptée serait de faire la détection de fonctionnalités comme ceci:
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;
Le seul moyen que j’ai trouvé est de vérifier si navigator.userAgent contient un mot iPhone ou iPad
if (navigator.userAgent.toLowerCase().match(/(ipad|iphone)/)) {
//is safari
}
Si vous vérifiez le navigateur, utilisez $.browser
. Mais si vous vérifiez le support technique (recommandé), utilisez $.support
.
Vous ne devez PAS utiliser $ .browser pour activer/désactiver les fonctionnalités de la page. La raison en est sa non fiable et généralement tout simplement pas recommandé.
Si vous avez besoin de fonctionnalités, je vous recommande modernizr .
Cela déterminera si le navigateur est Safari ou non.
if(navigator.userAgent.indexOf('Safari') !=-1 && navigator.userAgent.indexOf('Chrome') == -1)
{
alert(its safari);
}else {
alert('its not safari');
}
//Check if Safari
function isSafari() {
return /^((?!chrome).)*safari/i.test(navigator.userAgent);
}
//Check if MAC
if(navigator.userAgent.indexOf('Mac')>1){
alert(isSafari());
}
J'utilise pour détecter le moteur de navigateur Apple, cette simple condition JavaScript:
navigator.vendor.startsWith('Apple')
// 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
Fonction générique
getBrowseActive = function (browserName) {
if (navigator.userAgent.indexOf(browserName) > -1)
return true;
return false;
};
Un moyen très utile de remédier à ce problème consiste à détecter la version du webkit des navigateurs et à vérifier si elle correspond au moins à celle dont nous avons besoin, sinon faites autre chose.
En utilisant jQuery cela va comme ceci:
"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.");
};
});
Ceci fournit une solution sûre et permanente pour résoudre les problèmes liés aux différentes implémentations de webkit du navigateur.
Bonne codage!