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


111

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

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

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

より良い方法はありますか、または今のところ廃止された値をそのまま使用しますか?


それにこだわるのが良いアイデアかどうかはわかりませんが、Chromeの$ .browserドキュメントを参照してフラグを付けただけですが、これについて詳しく調べていません$.browser.safari === true。ねえ。
davin、

1
ユーザーエージェントをスニッフィングせずにSafari、Chrome、IE、Firefox、Operaブラウザーを検出する方法の 重複の可能性。
Rob W

回答:


340

feature detectionUseragent文字列の組み合わせを使用する:

    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 2013

1
この種の脆弱性の例として、UA文字列が変更されているため、このコードはInternet Explorer 11を検出しません。msdn.microsoft.com/en-us/library/ie/hh869301%28v=vs.85%29.aspxを
Olly Hodgson

1
Android webviewもSafariを表示しますが、これは正しくありません
Curtis

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
Jacob van Lingen、

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

サファリをチェックするために私はこれを使いました:

$.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が文字列を処理する方法が原因で機能しません。:/
Panos Kal。

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を使用しないでください。理由が信頼できないため、一般的にはお勧めできません。

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


男に釣りを教える...「もっと良い方法はありますか」-はい、特徴検出。
John Strickler、

あなたは何かのような意味location.hash = '"blah"'; if (location.hash == '#%22blah%22') alert('is Safari');ですか?
AndreKR

@AndreKRまさに、チェックしている機能を具体的にテストするための関数を作成します。
John Strickler、

2
@Gregブラウザを要求していません。ブラウザをテストしています。
John Strickler、2011年

12
機能の検出は優れていますが、実装にバグがあるため、特定のブラウザでCSSアニメーション(たとえば)の使用を停止したい場合はどうでしょうか?この機能は技術的にサポートされていますが、そのブラウザを使用しない方がエクスペリエンスが向上するため、そのブラウザに対しては無効にすることを決定します。
Phil Ricketts


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でテスト済み。
Jonathan Arbely

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

0

一般的な関数

 var getBrowseActive = function (browserName) {
   return navigator.userAgent.indexOf(browserName) > -1;
 };
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.