programing

jQuery를 사용하여 Safari 검색

subpage 2023. 11. 5. 14:40
반응형

jQuery를 사용하여 Safari 검색

둘 다 웹킷 기반 브라우저이지만 사파리 url은 URL에 따옴표를 인코딩하는 반면 Chrome은 그렇지 않습니다.

따라서 저는 JS에서 이 둘을 구별해야 합니다.

jQuery의 브라우저 탐지 문서는 "safari"를 사용하지 않는 것으로 표시합니다.

더 좋은 방법이 있을까요, 아니면 지금은 감가상각을 그대로 유지하면 되나요?

혼합하여 사용.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');}

다음은 사파리 3.0+를 식별하고 Chrome과 구별합니다.

isSafari = !!navigator.userAgent.match(/Version\/[\d\.]+.*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/

브라우저가 Safari인지 여부를 결정합니다.

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

애플 브라우저 엔진을 감지하는 데 사용합니다. 이 간단한 자바스크립트 상태는 다음과 같습니다.

 navigator.vendor.startsWith('Apple')

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

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

일반 기능

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

나의 최선의 해결책

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();

언급URL : https://stackoverflow.com/questions/5899783/detect-safari-using-jquery

반응형