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
'programing' 카테고리의 다른 글
로컬 WordPress 사이트의 cURL이 반환함: 오류 6(호스트를 확인할 수 없음) (0) | 2023.11.05 |
---|---|
투명한 HTML 버튼을 만드는 방법은? (0) | 2023.11.05 |
jQuery를 사용하여 하나의 태그를 다른 태그로 바꾸기 (0) | 2023.11.05 |
Oracle 11g의 select 절에 있는 이중/랜덤 별칭 이름이 잘못된 식별자 예외를 던지지 않습니다. (0) | 2023.11.05 |
선언하기 전에 구조를 입력합니다. (0) | 2023.11.05 |