使用 jQuery 檢測 Safari

Question

雖然兩者都是基於 Webkit 的瀏覽器，但 Safari 會在 URL 中對引號進行 urlencode，而 Chrome 則不會。

因此我需要在 JS 中區分這兩者。

jQuery 的瀏覽器檢測文檔將“safari”標記為已棄用。

有沒有更好的方法，還是我現在只堅持已棄用的值？

Answer 1

混合使用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');}

Answer 2

以下標識 Safari 3.0+ 並將其與 Chrome 區分開來：

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

Answer 3

不幸的是，上述示例還將檢測到 android 的默認瀏覽器為 Safari，但事實並非如此。 我使用navigator.userAgent.indexOf('Safari').= -1 && navigator.userAgent.indexOf('Chrome') == -1 && navigator.userAgent.indexOf('Android') == -1

Answer 4

為了檢查 Safari 我使用了這個：

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

它工作正常。

Answer 5

顯然，唯一可靠且被接受的解決方案是像這樣進行特征檢測：

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;

Answer 6

我發現的唯一方法是檢查 navigator.userAgent 是否包含 iPhone 或 iPad 字

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

Answer 7

//Check if Safari
  function isSafari() {
      return /^((?!chrome).)*safari/i.test(navigator.userAgent);
  }
//Check if MAC
     if(navigator.userAgent.indexOf('Mac')>1){
        alert(isSafari());
     }

http://jsfiddle.net/s1o943gb/10/

Answer 8

這將確定瀏覽器是否為 Safari。

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

Answer 9

如果您正在檢查瀏覽器，請使用$.browser 。 但是，如果您要檢查功能支持（推薦），請使用$.support 。

您不應該使用 $.browser 來啟用/禁用頁面上的功能。 原因是它不可靠，通常不推薦。

如果您需要功能支持，那么我推薦modernizr 。

Answer 10

通用 FUNCTION

 var getBrowseActive = function (browserName) {
   return navigator.userAgent.indexOf(browserName) > -1;
 };

Answer 11

解決這個問題的一個非常有用的方法是檢測瀏覽器的 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 實現的問題提供了安全且永久的修復。

快樂編碼！

Answer 12

    // 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

Answer 13

我用來檢測蘋果瀏覽器引擎，這個簡單的 JavaScript 條件：

 navigator.vendor.startsWith('Apple')

Answer 14

我的最佳解決方案

function getBrowserInfo() {
  const ua = navigator.userAgent; let tem;
  let M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
  if (/trident/i.test(M[1])) {
    tem = /\brv[ :]+(\d+)/g.exec(ua) || [];
    return { name: 'IE ', version: (tem[1] || '') };
  }
  if (M[1] === 'Chrome') {
    tem = ua.match(/\bOPR\/(\d+)/);
    if (tem != null) {
      return { name: 'Opera', version: tem[1] };
    }
  }
  M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
  tem = ua.match(/version\/(\d+)/i);
  if (tem != null) {
    M.splice(1, 1, tem[1]);
  }
  return {
    name: M[0],
    version: M[1],
  };
}

getBrowserInfo();