web-dev-qa-db-ja.com

jQueryを使用してSafariを検出する

どちらもWebkitベースのブラウザーですが、SafariはURL内の引用符をurlencodeしますが、Chromeはそうしません。

したがって、JSでこれら2つを区別する必要があります。

jQueryのブラウザ検出ドキュメント 「safari」を非推奨としてマークします。

より良い方法はありますか、それとも今は非推奨の値をそのまま使用しますか？

javascriptjquerybrowser-detection
108
AndreKR

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');}
327
Panos Kal.

以下はSafari 3.0+を識別し、Chromeと区別します。

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

残念ながら、上記の例はAndroidのデフォルトのブラウザーをSafariとしても検出しますが、そうではありません。 navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1 && navigator.userAgent.indexOf('Android') == -1を使用しました

10
user3107045

Safariをチェックするために私はこれを使用しました：

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

正常に動作します。

7
FlamyTwista

どうやら信頼できる唯一の解決策は、次のような機能検出を行うことです。

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;
3
AndreKR

私が見つけた唯一の方法は、navigator.userAgentにiPhoneまたはiPad Wordが含まれているかどうかを確認することです

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

ブラウザを確認する場合は、$.browserを使用してください。ただし、機能のサポートを確認する場合（推奨）は、$.supportを使用します。

ページの機能を有効/無効にするために$ .browserを使用しないでください。その理由は信頼できないことであり、一般的には推奨されません。

機能のサポートが必要な場合は、 modernizr をお勧めします。

1
John Strickler

これにより、ブラウザがSafariであるかどうかが決まります。

if(navigator.userAgent.indexOf('Safari') !=-1 && navigator.userAgent.indexOf('Chrome') == -1)
{
    alert(its safari);
}else {
    alert('its not safari');
}
0
Dushyant Dagar
//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/

0
Code Spy

私はAppleブラウザーエンジン、この単純なJavaScript条件の検出に使用します。

 navigator.vendor.startsWith('Apple')
0
Daniel De León
    // 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
Vitaly

汎用機能

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

これを修正する非常に便利な方法は、ブラウザの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
reicek