[JQUERY] 대신 접두사를 사용하는 나는 그들의 브라우저를 업그레이드하기 위해 사이트 방문자를 물어보고 싶은
JQUERY대신 접두사를 사용하는 나는 그들의 브라우저를 업그레이드하기 위해 사이트 방문자를 물어보고 싶은
해결법
-
1.질문 편집 후 개정 대답
질문 편집 후 개정 대답
여기에 CSS 그런를 달성하는 유일한 방법입니다.
사파리 7-8, IE는 <= 10, 안드로이드 브라우저 <4.4, 안드로이드와 오페라 미니 <8 UC 브라우저, 당신의 "browserupgrade"메시지가 표시됩니다 다음 CSS의 @supports이 대상 (원치 않는) 브라우저에하지 작업 바와 같이 이 규칙을 사용하는 사람들에.
@supports (display: flex) { .browserupgrade { display: none; }}여전히 비 접두사 플렉스를 지원 않지만 @supports, IE 11 (1) 및 오페라 미니 8을 지원하지 않지만, 다행히 우리는 CSS의 특정 규칙의 부부와 함께이를 해결 할 수있는 몇 브라우저가있다.
/* IE 11 */ _:-ms-fullscreen, :root .browserupgrade { display: none; } /* Opera Mini 8 */ :-o-prefocus, .browserupgrade { display: none; }여기에 귀하의 목표 브라우저 업그레이드 메시지를 표시 할 수있는 전체 코드입니다.
CSS
.browserupgrade { display: block; } /* IE 11 */ _:-ms-fullscreen, :root .browserupgrade { display: none; } /* Opera Mini 8 */ :-o-prefocus, .browserupgrade { display: none; } /* all modern browsers */ @supports (display: flex) { .browserupgrade { display: none; }}HTML
<div class="browserupgrade"> <p>You are using an outdated browser. Please <a href="http://browsehappy.com/"> upgrade your browser</a> to improve your experience.</p> </div>(1) : IE의 11 CSS 규칙이 있지만 그것을 테스트하는 일을하지 않은, 너무 IE 모바일 (11)에 작동합니다.
CSS의의 @supports이 API로 사용할 수도 있습니다, CSS.supports (). 여기에 데이비드 월시에 의해 매우 잘 작성된 기사입니다.
하나는 자동으로 그 브라우저를 리디렉션하려는 경우 또한, 여기에 10 초 지연 후, 그 않는 작은 스크립트입니다.
var el = document.querySelector('.browserupgrade'); if (window.getComputedStyle(el,null).getPropertyValue("display") != 'none') { setTimeout(function(){ window.location = 'http://browsehappy.com/'; }, 10000); } -
2.자바 스크립트 스타일 속성은 CSS 속성의 전체 컬렉션을 반환하는 다음 코드를 사용하여 테스트 할 수있는 특정 요소에 대한 브라우저 지원 :
자바 스크립트 스타일 속성은 CSS 속성의 전체 컬렉션을 반환하는 다음 코드를 사용하여 테스트 할 수있는 특정 요소에 대한 브라우저 지원 :
대한 (document.body.style에 var에 X) CONSOLE.LOG (X);
이것은 특정 속성이 명시 적으로 지정된 요소 설정 여부와는 상관 없습니다. 이것은 예를 들어 크롬에서 다음 코드를 실행하여 테스트 할 수 있습니다; 두 번째 줄이 true를 돌려줍니다 동안 크롬은 아직 아무것도없는 모양 속성을 지원하지 않는 첫 번째 줄은 false를 반환합니다.
(document.body.style에서 "모양") CONSOLE.LOG; 을 console.log ( "- 웹킷 등장"document.body.style에서); 몸{ 외관 : 없음; }
그러나, 지원되지 않는 속성이 스타일 속성을 통해, 자바 스크립트를 사용하여 요소에 설정되어있는 경우 다음 true를 돌려줍니다 해당 속성의 존재를 확인 주목해야한다 :
document.body.style.appearance = "없음"; (document.body.style에서 "모양") CONSOLE.LOG;
따라서 우리는 우리가 우리가이 방식으로되어 설정이 확인되는 속성의 확인 아무것도 할 수 있도록 임시 요소를 만들 수 document.createElement ()를 사용하는 것입니다. (모든 가정이 만들어 질에 대한 필요성을 제거,이 제안에 대한 Gothdo 감사합니다.)
-
3.당신은 기능 감지 modernizr.js를 사용할 수 있습니다.
당신은 기능 감지 modernizr.js를 사용할 수 있습니다.
그리고 기능이 발견되지 않는 경우 위의 URL에 사용자를 다시 직접 일부 자바 스크립트를 작성합니다.
-
4.그래, 우리는 이것에 대한 해결책을 가지고 있습니다 ...
그래, 우리는 이것에 대한 해결책을 가지고 있습니다 ...
https://modernizr.com/ - 먼저 다운로드에서 사용자 지정 빌드 모더 나이저은 (여기를 클릭) (인 flexbox 속성에 대한) 다음 페이지에 jQuery를 최신은, 어떤 스타일 시트를 추가 포함 당신은 완료!
(참고 : 당신이 모더 나이저 CDN에서 직접 전체 전체 빌드를 사용하지만 당신은 단지 인 flexbox 속성을 확인할 필요로 할 수 있습니다, 사용자 지정 빌드 모더 나이저를 다운로드 할 필요가 없습니다, 당신에게 왜 그게 전부는 사용자 지정 빌드를 다운로드)
이 바이올린 인 flexbox 지원 바이올린을 확인
(CSS, jQuery로) 전체 HTML 페이지는 다음과 같이 될 것입니다 ...
<!doctype html> <html class="no-js" lang="en"> <head> <meta charset="utf-8"> <title>BroswerCheck</title> <style type="text/css"> #browserupgrade{ display:none; text-align:center; background:#F1070B; color:#FFFFFF; font-family:Segoe, "Segoe UI", Verdana, sans-serif; font-size:15px; padding:10px;} #browserupgrade a{ color:#FFFFFF; background:#000000; text-decoration:none; padding:5px 15px; border-radius:25px;} </style> <script src="modernizr.js"></script> </head> <body> <div id="browserupgrade"> <p>You are using an outdated browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> </div> <script src="jquery-2.1.1.js"></script> <script type="text/javascript"> $(document).ready(function () { if (!Modernizr.flexbox) { $("#browserupgrade").show(); } }); </script> </body> </html>귀하의 단계가 될 것입니다
인 flexbox 속성을 감지하기 1. 다운로드 사용자 정의 모더 나이저
클래스와 HTML 페이지를 생성 2. = "노 JS는"HTML 태그에 추가되지
메시지를 표시하는 사업부를 만들고 그것을 숨길합니다
페이지에 JQuery와 및 모더 나이저를 추가하십시오
브라우저가없는 지원 인 flexbox 재산권을 수행 할 때 5. 사업부를 보여
(위의 스크립트에서와 같이 그 목적 사용 'Modernizr.flexbox'속성)
또는 당신이 JQuery와 다음 (@Shaggy 덕분에)와 같은 스크립트 다음 사용 사용하려는 해달라고하면,
$(document).ready(function () { if(!Modernizr.flexbox)document.getElementByID("browserupgrade").style.display="block"; }); -
5.좋아, 또한 내가 사용 모더 나이저에 (https://modernizr.com/에서 다운로드)를 제안하지만, 조금 다르게 비트. 나는 실제 문제는 특정 브라우저 또는 브라우저 버전의 경우 브라우저가 지원하는 인 flexbox 여부, 그렇지 않은 경우 감지 아니라는 사실로 가져 가라.
좋아, 또한 내가 사용 모더 나이저에 (https://modernizr.com/에서 다운로드)를 제안하지만, 조금 다르게 비트. 나는 실제 문제는 특정 브라우저 또는 브라우저 버전의 경우 브라우저가 지원하는 인 flexbox 여부, 그렇지 않은 경우 감지 아니라는 사실로 가져 가라.
당신이 그것을 설치하고 페이지를로드 한 후, 모더 나이저는
태그에 클래스를 넣어 것입니다. 인 flexbox에 관한 것은이 클래스 .flexbox OR <몸 클래스 = "csscalc bgsizecover 노 인 flexbox">과 같이 body 태그에 클래스 - 안돼 - 인 flexbox, 하나를 넣어 것입니다 (사실 더 많은 클래스, 당신 않는 한 모더 나이저의 사용자 지정 빌드를 다운로드 만) 인 flexbox합니다. 당신이 CSS 규칙의 간단한 결합 선택기를 사용할 수 있도록 선택하는 DIV 블록이되는 당신은 오래된 브라우저와 관련된 당신의 경고를 작성하는 것이. 예:HTML에 쓰기 뭔가 같은 :
<div class="browserwarning">Your browser is outdated and cannot display this page properly! Please install an up-to-date browser, which you can get from <a href="http://www.example.com">here</a>.</div>는 CSS 스타일 시트,이 추가 :
.browserwarning { display: none; } .no-flexbox .browserwarning { display: block; font-size: 24px; color: red; background-color: yellow; }이것은 단지 인 flexbox를 처리하고 페이지가로드 될 때, 따라서 모더 나이저로 body 태그에 - 안돼 - 인 flexbox 클래스 넣어가 할 수없는 브라우저에 표시 한 후 (두 번째 규칙) (첫 번째 규칙에 의해) 먼저이 메시지를 숨길 것이다 : 결합 된 선택 - 안돼 - 인 flexbox 관계없이 몸에 브라우저 경고가 배치되는 곳의 작품을 .browserwarning - 그것은 신체의 직접적인 아이 일 필요는 없습니다 만, 어느 곳이 될 수 있습니다.
이것은 확실히 작동합니다 - 내가 성공적으로 한 페이지에서 이것을 사용했습니다 ...
-
6.편집하다:
편집하다:
모더 나이저 또는 기능 쿼리 : 두 가지 가능한 방법이 있습니다. 모더 나이저는 현재 안정적인 솔루션입니다,하지만 완벽하게 모든 브라우저에서 지원하는 경우 기능 쿼리 @support, CSS의 특징 검출을위한 최상의 순수 CSS의 솔루션이 될 것입니다.
현재 당신은 즉, 기능 쿼리를 지원하지 않는 브라우저를 대상으로 몇 가지 접두사를 추가해야합니다. LGSon의 답변을 참조하십시오.
모더 나이저 방법 :
이전에 권장하는대로 당신은 아주 쉽게 인 flexbox 사용자 정의 모더 나이저 빌드를 만들 수 있습니다 모더 나이저 사용자 인 flexbox 빌드를. 당신의 웹 사이트에 사용자 정의 모더 나이저의 자바 스크립트 파일을 참조하고 일부 HTML 태그와 CSS 클래스, 이런 식으로 뭔가를 추가 :
참고 : 다른 브라우저에서 열기 스 니펫 지원을 확인합니다.
TESTS :
아니오 인 flexbox 지원하지 않습니다 인터넷 익스플로러 (10)
인 flexbox 지원 : 크롬 50
/ *! 모더 나이저 3.3.1 (사용자 지정 빌드) | MIT * * https://modernizr.com/download/?-flexbox-setclasses * / ! 기능 (E, N, t) { 함수 R (즉, N) { 대해서 typeof 전자를 반환 === N } O 함수 () { VAR의 E, N, t, O는, s의 I하는; 대 (VAR C에서의 l) 경우 (C.hasOwnProperty (l)) { 경우 (E = [], C = N [1], n.name && (e.push (n.name.toLowerCase ()) && n.options n.options.aliases && n.options.aliases.length) ) 경우 (t = 0; t
사용자 여러분, 당신은 오래된 브라우저를 사용하고 있습니다. 부디 를 업그레이드 href="http://browsehappy.com/">.
더 브라우저 지원 정보를 클릭하십시오 여기 .
추가 설명 :
모더 나이저 검사 브라우저는이 경우 인 flexbox에서 사용자 정의 기능을 지원하는 경우. 브라우저가 지원하지 않는 경우, 모더 나이저는 태그에 클래스를 추가합니다. 이처럼 :.
GitHub의 https://github.com/guest271314/prefix/blob/master/prefix.1.1.min.js
9.보다 철저한 방법.
보다 철저한 방법.
당신은 당신이 관심있는 각 브라우저의 사용자 에이전트 문자열을 얻을 제외 할 모든 것들의 배열을 만들 수 있습니다.
이 jQuery를 inArray를 사용하지-지원 - 브라우저 배열에있는 경우 사용 navigator.userAgent)을 (방문자의 사용자 에이전트 체크를 얻을 수
간단한 자바 스크립트 경고가 일치하는 브라우저를 사용하여 방문자를 위해 발생 될 수 있습니다.
다음 브라우저 관련 정보를 얻기의 예입니다 (예제 소스 : w3schools.com)
var에 TXT = ""; TXT + = "
사용자 에이전트 헤더"+ navigator.userAgent + ""; TXT + = "
브라우저 코드 명 :"+ navigator.appCodeName + ""; TXT + = "
브라우저 이름 :"+ navigator.appName + ""; TXT + = "
브라우저 버전 :"+ navigator.appVersion + ""; TXT + = "
는 쿠키 활성화"+ navigator.cookieEnabled + ""을; TXT + = "
브라우저 언어 :"+ navigator.language + ""; TXT + = "온라인
브라우저 :"+ navigator.onLine + ""; TXT + = "
기종 :"+ navigator.platform + ""; document.getElementById를 ( "데모") innerHTML을 = TXT.;
최신 정보
이것은 매우 간단한 방법이다, 어떤 제 3 자 API는 포함되지 않습니다. 간단히 필터 결과에 UAparser.js를 사용합니다. 당신이 당신의 부분에서 확인 할 필요가있는 브라우저 이름과 버전입니다. 아래의 예를 확인
VAR 파서 = 새로운 UAParser (); VAR thisBrowser parser.getBrowser = (); VAR thisOS parser.getOS = (); 스위치 (TRUE) { 케이스 (thisBrowser.name == "IE"&& thisBrowser.version <= 10) : 경고 ( "지원되지 않습니다 V11보다 오래된 IE 버전"); 단절; 케이스 (thisBrowser.name == "사파리"&& (thisBrowser.version> = 7 thisBrowser.version || <9)) : 경고 ( "사파리 버전 7과 8은 지원되지 않습니다"); 단절; 경우 (thisBrowser.name == "안드로이드 웹킷 브라우저"&& thisBrowser.version <4.4) : 경고 ( "V4.4 이전의 안드로이드 OS 버전의 기본 브라우저는 지원되지 않습니다."); 단절; 경우 (thisBrowser.name == "UC 브라우저"&& thisOS.name == "안드로이드") : 경고 ( "안드로이드에 대한 UC 브라우저 버전이 지원되지 않습니다."); 단절; 경우 (thisBrowser.name == "오페라 미니"&& thisBrowser.version <8) 경고 ( "V4.4 이전의 안드로이드 OS 버전의 기본 브라우저는 지원되지 않습니다."); 단절; 기본: 경고 ( "위대한이 지원되는 브라우저입니다"); } <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/UAParser.js/0.7.10/ua-parser.min.js">
10.당신은 UAParser.js를 사용할 수 있습니다. 그것은 여기에 예를 들어, 당신에게 등 버전, OS를, 브라우저의 이름을 지정할 수 있습니다.
당신은 UAParser.js를 사용할 수 있습니다. 그것은 여기에 예를 들어, 당신에게 등 버전, OS를, 브라우저의 이름을 지정할 수 있습니다.
그것을 위해 jQuery 플러그인도있다.
var parser = new UAParser(); var browser = parser.getBrowser(); // leave only the major version and minor in order to compare // eg 12.2.4 > 12.2 var secondDot = browser.version.indexOf(".", browser.version.indexOf(".") + 1); browser.version = parseFloat(browser.version.substr(0, secondDot)); // debugging $("#browserName").html(browser.name); $("#browserVersion").html(browser.version); if (["IE", "Safari", "Opera Mobi", "UCBrowser", "Android Browser"].indexOf(browser.name) != -1) { if (browser.name == "IE" && browser.version <= 10) { $("#browserupgrade").show(); } if (browser.name == "Safari" && browser.version <= 10) { $("#browserupgrade").show(); } if (browser.name == "UCBrowser") { $("#browserupgrade").show(); } if (browser.name == "Android Browser" && browser.version <= 4.4) { $("#browserupgrade").show(); } }11.참조 : https://browser-update.org/
참조 : https://browser-update.org/
<script> var $buoop = {c:2}; function $buo_f(){ var e = document.createElement("script"); e.src = "//browser-update.org/update.min.js"; document.body.appendChild(e); }; try {document.addEventListener("DOMContentLoaded", $buo_f,false)} catch(e){window.attachEvent("onload", $buo_f)} </script>12.당신이 nginx를 통해 페이지를 제공하는 경우 매우 유용 지시문 ancient_browser있다.
당신이 nginx를 통해 페이지를 제공하는 경우 매우 유용 지시문 ancient_browser있다.
당신은 당신이 지원하지하고자 브라우저의 목록을 설정해야합니다 :
ancient_browser msie 9.0;다음 특수 브라우저 업그레이드 페이지로 사람들을 리디렉션 :
if ($ancient_browser) { rewrite ^ /install-chrome.html; }당신이 당신의 기존 페이지를 오염하지 않는 및 필요하지 않은 사용자를 위해 별도의 CSS를로드 할 필요가 없습니다 이쪽으로.
13.당신은 브라우저의 이름과 버전을 얻기 위해 다음과 같은 기능을 사용할 수 있습니다 :
당신은 브라우저의 이름과 버전을 얻기 위해 다음과 같은 기능을 사용할 수 있습니다 :
function get_browser() { var ua = navigator.userAgent, tem, 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 'IE ' + (tem[1] || ''); } if (M[1] === 'Chrome') { tem = ua.match(/\bOPR\/(\d+)/) if (tem != null) { return 'Opera ' + tem[1]; } } M = M[2] ? [ M[1], M[2] ] : [ navigator.appName, navigator.appVersion, '-?' ]; if ((tem = ua.match(/version\/(\d+)/i)) != null) { M.splice(1, 1, tem[1]); } return M[0]; } function get_browser_version() { var ua = navigator.userAgent, tem, 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 'IE ' + (tem[1] || ''); } if (M[1] === 'Chrome') { tem = ua.match(/\bOPR\/(\d+)/) if (tem != null) { return 'Opera ' + tem[1]; } } M = M[2] ? [ M[1], M[2] ] : [ navigator.appName, navigator.appVersion, '-?' ]; if ((tem = ua.match(/version\/(\d+)/i)) != null) { M.splice(1, 1, tem[1]); } return M[1]; }당신은 브라우저를 업데이트하도록 사용자에게 경고하기 위해 다음 코드를 사용할 수 있습니다.
jQuery(document).ready(function() { var browser = get_browser(); var browser_version = get_browser_version(); if (browser == "Chrome" && browser_version <= 30) { alert("Your browser is below the minimum required version. Please update your browser for this site to function properly"); } if (browser == "Firefox" && browser_version <= 25) { alert("Your browser is below the minimum required version. Please update your browser for this site to function properly"); } if (browser == "MSIE" && browser_version <= 8) { alert("Your browser is below the minimum required version. Please update your browser for this site to function properly"); } });14.이 한 줄은 IE10 확인하고, 그렇지 않으면 IE10 또는 false 경우에 true를 돌려줍니다.
이 한 줄은 IE10 확인하고, 그렇지 않으면 IE10 또는 false 경우에 true를 돌려줍니다.
var ie10 = /MSIE 10/i.test(navigator.userAgent) && /MSIE 10/i.test(navigator.vendor);공부는 여기나요 : https://blogs.msdn.microsoft.com/ie/2011/04/15/the-ie10-user-agent-string/
사용 사례
옵션 1
if(ie10){ //Do something }UPDATE :
마이크로 소프트의 브라우저는 스크립트를 통해 조건부 주석을 개시 할 수 @cc_on를 사용합니다.
옵션 2 :
<script> /*@cc_on @if (@_jscript_version == 10){ document.write("You are using IE10"); } @*/ </script>참고하시기 바랍니다. 만 EI (10) 아래 인 flexbox의 CSS를 지원하지 않습니다. 여기 증명 : http://caniuse.com/#feat=flexbox
도움이 되었기를 바랍니다
15.이 시도:
이 시도:
navigator.browser = (function() { var ua = navigator.userAgent, tem, 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 'IE '+(tem[1] || ''); } if (M[1]=== 'Chrome') { tem = ua.match(/\b(OPR|Edge)\/(\d+)/); if (tem != null) return tem.slice(1).join(' ').replace('OPR', 'Opera'); } M = M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?']; if ((tem = ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]); return M.join(' '); })();하지만 모더 나이저와 함께 당신이 할 수있는, 바퀴를 재발견하기 위해 노력하고있다 :
if (Modernizr.flexbox) { // Modern Flexbox supported } else { // Flexbox syntax not supported }from https://stackoverflow.com/questions/33359157/instead-of-using-prefixes-i-want-to-ask-site-visitors-to-upgrade-their-browser by cc-by-sa and MIT license
'JQUERY' 카테고리의 다른 글
[JQUERY] 트리거) (완료 비동기 아약스에 입력 = 파일을 클릭 (0) 2020.10.18 [JQUERY] 자바 스크립트 / jQuery를에 문자열의 픽셀 길이를 결정? (0) 2020.10.18 [JQUERY] ASP.NET MVC에서 버튼 클릭에 대한 부분보기 렌더링 (0) 2020.10.18 [JQUERY] 텍스트 영역에 커서 위치 (문자 인덱스 아닌 X / Y 좌표) (0) 2020.10.18 [JQUERY] 상쾌하지 않고 페이지에 업데이트 데이터 (0) 2020.10.18