developer tip

jQuery를 사용하여 Safari 감지

optionbox 2020. 8. 2. 18:22
반응형

jQuery를 사용하여 Safari 감지


둘 다 웹킷 기반 브라우저이지만 Safari는 URL에 따옴표를 사용하지만 Chrome은 따옴표를 사용하지 않습니다.

따라서 JS 에서이 두 가지를 구별해야합니다.

jQuery의 브라우저 감지 문서는 "safari"를 더 이상 사용되지 않는 것으로 표시합니다.

더 나은 방법이 있습니까? 아니면 더 이상 사용되지 않는 값을 고수합니까?


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

다음은 Safari 3.0 이상을 식별하고 Chrome과 구별합니다.

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

불행히도 위의 예제는 안드로이드의 기본 브라우저를 Safari로 감지하지만 그렇지 않습니다. 나는 사용했다navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1 && navigator.userAgent.indexOf('Android') == -1


Safari를 확인하기 위해 이것을 사용했습니다.

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

제대로 작동합니다.


확실하고 신뢰할 수있는 유일한 솔루션은 다음과 같은 기능 탐지를 수행하는 것입니다.

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;

내가 찾은 유일한 방법은 navigator.userAgent에 iPhone 또는 iPad 단어가 포함되어 있는지 확인하는 것입니다

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

브라우저를 확인하는 경우을 사용하십시오 $.browser. 그러나 기능 지원을 확인하는 경우 (권장)를 사용하십시오 $.support.

페이지에서 기능을 활성화 / 비활성화하기 위해 $ .browser를 사용해서는 안됩니다. 그 이유는 신뢰할 수 없으며 일반적으로 권장하지 않습니다.

기능 지원이 필요한 경우 modernizr을 권장 합니다.


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


이 문제를 해결하는 매우 유용한 방법은 브라우저 웹킷 버전을 감지하여 필요한 버전인지 확인하고 다른 방법을 사용하는 것입니다.

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.");
    };
});

이것은 브라우저의 다른 웹킷 구현과 관련된 문제를 처리하기위한 안전하고 영구적 인 수정을 제공합니다.

행복한 코딩!


브라우저가 Safari인지 아닌지를 결정합니다.

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

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

I use to detect Apple browser engine, this simple JavaScript condition:

 navigator.vendor.startsWith('Apple')

Generic FUNCTION

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

참고URL : https://stackoverflow.com/questions/5899783/detect-safari-using-jquery

반응형