У мене є 5 доповнень / розширень для FF, Chrome, IE, Opera та Safari.
Як я можу розпізнати веб-переглядач користувача та перенаправити (після натискання кнопки встановлення) завантажити відповідний додаток?
У мене є 5 доповнень / розширень для FF, Chrome, IE, Opera та Safari.
Як я можу розпізнати веб-переглядач користувача та перенаправити (після натискання кнопки встановлення) завантажити відповідний додаток?
Відповіді:
Гуглінг для надійного виявлення браузера часто призводить до перевірки рядка Користувацького агента. Цей метод не є надійним, оскільки неправдиво підробляти це значення.
Я написав метод виявлення браузерів шляхом набору качок .
Використовуйте метод виявлення браузера лише в тому випадку, коли це дійсно необхідно, наприклад, показуючи спеціальні інструкції для встановлення розширення. Використовуйте виявлення функцій, коли це можливо.
Демо: https://jsfiddle.net/6spj1059/
// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';
// Safari 3.0+ "[object HTMLElementConstructor]"
var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification));
// Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;
// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;
// Chrome 1 - 79
var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);
// Edge (based on chromium) detection
var isEdgeChromium = isChrome && (navigator.userAgent.indexOf("Edg") != -1);
// Blink engine detection
var isBlink = (isChrome || isOpera) && !!window.CSS;
var output = 'Detecting browsers by ducktyping:<hr>';
output += 'isFirefox: ' + isFirefox + '<br>';
output += 'isChrome: ' + isChrome + '<br>';
output += 'isSafari: ' + isSafari + '<br>';
output += 'isOpera: ' + isOpera + '<br>';
output += 'isIE: ' + isIE + '<br>';
output += 'isEdge: ' + isEdge + '<br>';
output += 'isEdgeChromium: ' + isEdgeChromium + '<br>';
output += 'isBlink: ' + isBlink + '<br>';
document.body.innerHTML = output;
Попередній метод залежить від властивостей рендеринга ( -moz-box-sizing
і -webkit-transform
) , щоб виявити браузер. Ці префікси з часом будуть відкинуті, тому для покращення виявлення я перейшов до особливостей браузера:
document.documentMode
.StyleMedia
конструктор. Виключаючи Тризуб залишає нас з Edge.InstallTrigger
chrome
об’єкт, що містить декілька властивостей, включаючи документований chrome.webstore
об’єкт.chrome.webstore
В останніх версіях оновлення 3 застаріле та не визначенеSafariRemoteNotification
, що було введено після версії 7.1, щоб охопити всі Safaris від 3.0 і вище.window.opera
існує вже багато років, але її відпадуть, коли Opera замінить свій двигун Blink + V8 (використовується Chromium). chrome
об’єкт визначений (але chrome.webstore
не є). Оскільки Opera намагається клонувати Chrome, я використовую для цього нюху агента користувача.!!window.opr && opr.addons
може використовуватися для виявлення Opera 20+ (вічнозелений).CSS.supports()
був введений у Blink, коли Google увімкнув Chrome 28. Це, звичайно, той самий Blink, який використовується в Opera.Оновлено в листопаді 2016 року для включення виявлення браузерів Safari від 9.1.3 і вище
Оновлено у серпні 2018 року для оновлення останніх успішних тестів на хром, IE та firefox IE.
Оновлено в січні 2019 року, щоб виправити виявлення хрому (через припинення window.chrome.webstore) та включити останні успішні тести на хром.
Оновлено у грудні 2019 року для додавання Edge на основі виявлення хрому (на основі коментаря @Nimesh).
window.chrome.webstore
там не визначено. Не перевіряв це за допомогою розширень Firefox. is.js
згадане в іншому місці працює як у розширеннях Chrome, так і в Firefox.
isSafari
не працює з Safari 10. Я збираюся стверджувати, що це погане рішення (не те, що у мене хороше). Немає гарантій, що багато речей, на які перевіряється, не будуть зняті АБО не будуть додані іншими браузерами. Кожен сайт, який використовував цей код для перевірки на Safari, просто зламався з оновленнями macOS Sierra або Safari 10 :(
isSafari
не працює в <iframe>
рамках Safari 10.1.2
Ви можете спробувати наступним чином перевірити версію браузера.
<!DOCTYPE html>
<html>
<body>
<p>What is the name(s) of your browser?</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
if((navigator.userAgent.indexOf("Opera") || navigator.userAgent.indexOf('OPR')) != -1 )
{
alert('Opera');
}
else if(navigator.userAgent.indexOf("Chrome") != -1 )
{
alert('Chrome');
}
else if(navigator.userAgent.indexOf("Safari") != -1)
{
alert('Safari');
}
else if(navigator.userAgent.indexOf("Firefox") != -1 )
{
alert('Firefox');
}
else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )) //IF IE > 10
{
alert('IE');
}
else
{
alert('unknown');
}
}
</script>
</body>
</html>
І якщо вам потрібно знати лише версію браузера IE, тоді ви можете слідувати коду нижче. Цей код добре працює для версій IE6 до IE11
<!DOCTYPE html>
<html>
<body>
<p>Click on Try button to check IE Browser version.</p>
<button onclick="getInternetExplorerVersion()">Try it</button>
<p id="demo"></p>
<script>
function getInternetExplorerVersion() {
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
var rv = -1;
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer, return version number
{
if (isNaN(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))))) {
//For IE 11 >
if (navigator.appName == 'Netscape') {
var ua = navigator.userAgent;
var re = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null) {
rv = parseFloat(RegExp.$1);
alert(rv);
}
}
else {
alert('otherbrowser');
}
}
else {
//For < IE11
alert(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))));
}
return false;
}}
</script>
</body>
</html>
chrome
ключового слова у Useragent. приклад сафарі- mozilla/5.0 (macintosh; intel mac os x 10_11_5) applewebkit/601.6.17 (khtml, like gecko) version/9.1.1 safari/601.6.17
if(navigator.userAgent.indexOf("Opera") != -1 || navigator.userAgent.indexOf('OPR') != -1 )
Я знаю, що використовувати ліб для цього може бути зайвим, але просто для збагачення теми ви можете перевірити спосіб is.js :
is.firefox();
is.ie(6);
is.not.safari();
is.js
і перевірте, як вони це роблять.
Ось декілька видатних бібліотек, які обробляють пошук браузера станом на грудень 2019 року.
var result = bowser.getParser(window.navigator.userAgent);
console.log(result);
document.write("You are using " + result.parsedResult.browser.name +
" v" + result.parsedResult.browser.version +
" on " + result.parsedResult.os.name);
<script src="https://unpkg.com/bowser@2.7.0/es5.js"></script>
* підтримує Edge на основі Chromium
console.log(platform);
document.write("You are using " + platform.name +
" v" + platform.version +
" on " + platform.os);
<script src="https://cdnjs.cloudflare.com/ajax/libs/platform/1.3.5/platform.min.js"></script>
console.log($.browser)
document.write("You are using " + $.browser.name +
" v" + $.browser.versionNumber +
" on " + $.browser.platform);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-browser/0.1.0/jquery.browser.min.js"></script>
var result = detect.parse(navigator.userAgent);
console.log(result);
document.write("You are using " + result.browser.family +
" v" + result.browser.version +
" on " + result.os.family);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Detect.js/2.2.2/detect.min.js"></script>
console.log(BrowserDetect)
document.write("You are using " + BrowserDetect.browser +
" v" + BrowserDetect.version +
" on " + BrowserDetect.OS);
<script src="https://kylemit.github.io/libraries/libraries/BrowserDetect.js"></script>
У випадку, якщо хтось вважає це корисним, я зробив відповідь Роб У в функцію, яка повертає рядок браузера, а не багато плаваючих змінних. Оскільки браузер також не може змінитись, не завантажуючи його знову, я змусив кешувати результат, щоб запобігти його необхідності опрацювати його наступного разу, коли функція буде викликана.
/**
* Gets the browser name or returns an empty string if unknown.
* This function also caches the result to provide for any
* future calls this function has.
*
* @returns {string}
*/
var browser = function() {
// Return cached result if avalible, else get result then cache it.
if (browser.prototype._cachedResult)
return browser.prototype._cachedResult;
// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';
// Safari 3.0+ "[object HTMLElementConstructor]"
var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);
// Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;
// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;
// Chrome 1+
var isChrome = !!window.chrome && !!window.chrome.webstore;
// Blink engine detection
var isBlink = (isChrome || isOpera) && !!window.CSS;
return browser.prototype._cachedResult =
isOpera ? 'Opera' :
isFirefox ? 'Firefox' :
isSafari ? 'Safari' :
isChrome ? 'Chrome' :
isIE ? 'IE' :
isEdge ? 'Edge' :
isBlink ? 'Blink' :
"Don't know";
};
console.log(browser());
window.chrome.webstore
В Chrome 71 було видалено властивість , тому такий підхід вже не працює.
Короткий варіант
var browser = (function() {
var test = function(regexp) {
return regexp.test(window.navigator.userAgent);
}
switch (true) {
case test(/edg/i): return "edge";
case test(/opr/i) && (!!window.opr || !!window.opera): return "opera";
case test(/chrome/i) && !!window.chrome: return "chrome";
case test(/trident/i): return "ie";
case test(/firefox/i): return "firefox";
case test(/safari/i): return "safari";
default: return "other";
}
})();
console.log(browser)
Ось коригувана в 2016 році версія відповіді Роба, включаючи Microsoft Edge та виявлення Blink:
( редагувати : я оновив відповідь Роба вище з цією інформацією.)
// Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Firefox 1.0+
isFirefox = typeof InstallTrigger !== 'undefined';
// Safari 3.0+
isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);
// Internet Explorer 6-11
isIE = /*@cc_on!@*/false || !!document.documentMode;
// Edge 20+
isEdge = !isIE && !!window.StyleMedia;
// Chrome 1+
isChrome = !!window.chrome && !!window.chrome.webstore;
// Blink engine detection
isBlink = (isChrome || isOpera) && !!window.CSS;
/* Results: */
console.log("isOpera", isOpera);
console.log("isFirefox", isFirefox);
console.log("isSafari", isSafari);
console.log("isIE", isIE);
console.log("isEdge", isEdge);
console.log("isChrome", isChrome);
console.log("isBlink", isBlink);
Краса такого підходу полягає в тому, що він покладається на властивості двигуна браузера, тому він охоплює навіть похідні браузери, такі як Яндекс або Вівальді, які практично сумісні з основними браузерами, двигуни яких вони використовують. Виняток становить Opera, яка покладається на нюхання агента користувача, але сьогодні (тобто версії 15 і вище) навіть Opera сама по собі є лише оболонкою для Blink.
!!window.MSAssertion;
Тест не працює для мене в прикордонних бета через віддалений робочий стіл. Він повертає помилкове.
MSAssertion
Трюк налаштовано на версію 25. Але оскільки багато розробників покладаються на VM, я спробую налаштувати цю стару версію. Гарний дзвінок. Дякую.
StyleMedia
(з великої літери) специфічний для IE та Edge і, схоже, нікуди не йде.
Ви можете використовувати try
та catch
використовувати різні повідомлення про помилки браузера. IE і край були змішані, але я використовував типи качок від Rob W (на основі цього проекту тут: https://www.khanacademy.org/computer-programming/i-have-opera/2395080328 ).
var getBrowser = function() {
try {
var e;
var f = e.width;
} catch(e) {
var err = e.toString();
if(err.indexOf("not an object") !== -1) {
return "safari";
} else if(err.indexOf("Cannot read") !== -1) {
return "chrome";
} else if(err.indexOf("e is undefined") !== -1) {
return "firefox";
} else if(err.indexOf("Unable to get property 'width' of undefined or null reference") !== -1) {
if(!(false || !!document.documentMode) && !!window.StyleMedia) {
return "edge";
} else {
return "IE";
}
} else if(err.indexOf("cannot convert e into object") !== -1) {
return "opera";
} else {
return undefined;
}
}
};
Дякую всім Я протестував фрагменти коду в останніх браузерах: Chrome 55, Firefox 50, IE 11 і Edge 38, і я придумав таку комбінацію, яка працювала для мене для всіх. Я впевнений, що його можна вдосконалити, але це швидке рішення для тих, хто потребує:
var browser_name = '';
isIE = /*@cc_on!@*/false || !!document.documentMode;
isEdge = !isIE && !!window.StyleMedia;
if(navigator.userAgent.indexOf("Chrome") != -1 && !isEdge)
{
browser_name = 'chrome';
}
else if(navigator.userAgent.indexOf("Safari") != -1 && !isEdge)
{
browser_name = 'safari';
}
else if(navigator.userAgent.indexOf("Firefox") != -1 )
{
browser_name = 'firefox';
}
else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )) //IF IE > 10
{
browser_name = 'ie';
}
else if(isEdge)
{
browser_name = 'edge';
}
else
{
browser_name = 'other-browser';
}
$('html').addClass(browser_name);
Він додає CSS-клас до HTML із назвою браузера.
Немає думки, чи корисно це комусь, але ось варіант зробити TypeScript щасливим.
export function getBrowser() {
// Opera 8.0+
if ((!!window["opr"] && !!["opr"]["addons"]) || !!window["opera"] || navigator.userAgent.indexOf(' OPR/') >= 0) {
return 'opera';
}
// Firefox 1.0+
if (typeof window["InstallTrigger"] !== 'undefined') {
return 'firefox';
}
// Safari 3.0+ "[object HTMLElementConstructor]"
if (/constructor/i.test(window["HTMLElement"]) || (function(p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof window["safari"] !== 'undefined' && window["safari"].pushNotification))) {
return 'safari';
}
// Internet Explorer 6-11
if (/*@cc_on!@*/false || !!document["documentMode"]) {
return 'ie';
}
// Edge 20+
if (!(/*@cc_on!@*/false || !!document["documentMode"]) && !!window["StyleMedia"]) {
return 'edge';
}
// Chrome 1+
if (!!window["chrome"] && !!window["chrome"].webstore) {
return 'chrome';
}
// Blink engine detection
if (((!!window["chrome"] && !!window["chrome"].webstore) || ((!!window["opr"] && !!["opr"]["addons"]) || !!window["opera"] || navigator.userAgent.indexOf(' OPR/') >= 0)) && !!window["CSS"]) {
return 'blink';
}
}
Виявлення браузерів на робочому столі та мобільних пристроях: Edge, Opera, Chrome, Safari, Firefox, IE
Я вніс деякі зміни в код @nimesh, тепер він працює і для Edge, і проблема Opera виправлена:
function getBrowserName() {
if ( navigator.userAgent.indexOf("Edge") > -1 && navigator.appVersion.indexOf('Edge') > -1 ) {
return 'Edge';
}
else if( navigator.userAgent.indexOf("Opera") != -1 || navigator.userAgent.indexOf('OPR') != -1 )
{
return 'Opera';
}
else if( navigator.userAgent.indexOf("Chrome") != -1 )
{
return 'Chrome';
}
else if( navigator.userAgent.indexOf("Safari") != -1)
{
return 'Safari';
}
else if( navigator.userAgent.indexOf("Firefox") != -1 )
{
return 'Firefox';
}
else if( ( navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true ) ) //IF IE > 10
{
return 'IE';
}
else
{
return 'unknown';
}
}
Дякуємо користувачеві @nimesh: 2063564
Існує також менш "хакітний" метод, який працює для всіх популярних браузерів. Google включив перевірку браузера у свою бібліотеку закриття . Зокрема, подивіться на goog.userAgent
та goog.userAgent.product
. Таким чином, ви також є в курсі, якщо щось зміниться в тому, як браузери представляють себе (враховуючи, що ви завжди запускаєте останню версію компілятора закриття.)
Якщо вам потрібно знати, що є числовою версією певного браузера, ви можете скористатися наступним фрагментом. Наразі він розповість вам версію Chrome / Chromium / Firefox:
var match = $window.navigator.userAgent.match(/(?:Chrom(?:e|ium)|Firefox)\/([0-9]+)\./);
var ver = match ? parseInt(match[1], 10) : 0;
UAParser - це одна з легких бібліотек JavaScript для виявлення браузера, двигуна, ОС, процесора та типу / моделі пристрою з рядка userAgent.
Є CDN доступний. Тут я включив приклад коду для виявлення браузера за допомогою UAParser.
<!doctype html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/ua-parser-js@0/dist/ua-parser.min.js"></script>
<script type="text/javascript">
var parser = new UAParser();
var result = parser.getResult();
console.log(result.browser); // {name: "Chromium", version: "15.0.874.106"}
</script>
</head>
<body>
</body>
</html>
Тепер ви можете використовувати значення result.browser
щоб умовно запрограмувати свою сторінку.
Підручник з джерелом: Як виявити браузер, двигун, ОС, процесор та пристрій за допомогою JavaScript?
var BrowserDetect = {
init: function () {
this.browser = this.searchString(this.dataBrowser) || "Other";
this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown";
},
searchString: function (data) {
for (var i = 0; i < data.length; i++) {
var dataString = data[i].string;
this.versionSearchString = data[i].subString;
if (dataString.indexOf(data[i].subString) !== -1) {
return data[i].identity;
}
}
},
searchVersion: function (dataString) {
var index = dataString.indexOf(this.versionSearchString);
if (index === -1) {
return;
}
var rv = dataString.indexOf("rv:");
if (this.versionSearchString === "Trident" && rv !== -1) {
return parseFloat(dataString.substring(rv + 3));
} else {
return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
}
},
dataBrowser: [
{string: navigator.userAgent, subString: "Edge", identity: "MS Edge"},
{string: navigator.userAgent, subString: "MSIE", identity: "Explorer"},
{string: navigator.userAgent, subString: "Trident", identity: "Explorer"},
{string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
{string: navigator.userAgent, subString: "Opera", identity: "Opera"},
{string: navigator.userAgent, subString: "OPR", identity: "Opera"},
{string: navigator.userAgent, subString: "Chrome", identity: "Chrome"},
{string: navigator.userAgent, subString: "Safari", identity: "Safari"}
]
};
BrowserDetect.init();
var bv= BrowserDetect.browser;
if( bv == "Chrome"){
$("body").addClass("chrome");
}
else if(bv == "MS Edge"){
$("body").addClass("edge");
}
else if(bv == "Explorer"){
$("body").addClass("ie");
}
else if(bv == "Firefox"){
$("body").addClass("Firefox");
}
$(".relative").click(function(){
$(".oc").toggle('slide', { direction: 'left', mode: 'show' }, 500);
$(".oc1").css({
'width' : '100%',
'margin-left' : '0px',
});
});
Це поєднує в собі оригінальну відповідь Роба та оновлення Пілау за 2016 рік
var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
var isFirefox = typeof InstallTrigger !== 'undefined'; // Firefox 1.0+
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
// At least Safari 3+: "[object HTMLElementConstructor]"
var isChrome = !!window.chrome && !isOpera; // Chrome 1+
var isIE = /*@cc_on!@*/false || !!document.documentMode;
// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;
// Chrome 1+
var output = 'Detecting browsers by ducktyping:<hr>';
output += 'isFirefox: ' + isFirefox + '<br>';
output += 'isChrome: ' + isChrome + '<br>';
output += 'isSafari: ' + isSafari + '<br>';
output += 'isOpera: ' + isOpera + '<br>';
output += 'isIE: ' + isIE + '<br>';
output += 'isIE Edge: ' + isEdge + '<br>';
document.body.innerHTML = output;
Тут ви дізнаєтеся, який браузер працює.
function isValidBrowser(navigator){
var isChrome = navigator.indexOf('chrome'),
isFireFox= navigator.indexOf('firefox'),
isIE = navigator.indexOf('trident') ,
isValidChromeVer = parseInt(navigator.substring(isChrome+7, isChrome+8)) >= 4,
isValidFireForVer = parseInt(navigator.substring(isFireFox+8, isFireFox+9)) >= 3,
isValidIEVer = parseInt(navigator.substring(isIE+8, isIE+9)) >= 7;
if((isChrome > -1 && isValidChromeVer){ console.log("Chrome Browser")}
if(isFireFox > -1 && isValidFireForVer){ console.log("FireFox Browser")}
if(isIE > -1 && isValidIEVer)){ console.log("IE Browser")}
}
Нижче ми можемо використовувати корисні методи
utils.isIE = function () {
var ver = navigator.userAgent;
return ver.indexOf("MSIE") !== -1 || ver.indexOf("Trident") !== -1; // need to check for Trident for IE11
};
utils.isIE32 = function () {
return (utils.isIE() && navigator.appVersion.indexOf('Win64') === -1);
};
utils.isChrome = function () {
return (window.chrome);
};
utils.isFF64 = function () {
var agent = navigator.userAgent;
return (agent.indexOf('Win64') >= 0 && agent.indexOf('Firefox') >= 0);
};
utils.isFirefox = function () {
return (navigator.userAgent.toLowerCase().indexOf('firefox') > -1);
};
const isChrome = /Chrome/.test(navigator.userAgent)
const isFirefox = /Firefox/.test(navigator.userAgent)
Простий, єдиний рядок коду JavaScript дасть вам назву браузера:
function GetBrowser()
{
return navigator ? navigator.userAgent.toLowerCase() : "other";
}
navigator.userAgent
повідомляє вам кожен можливий браузер, який у вас є. Отже, це дійсно не є надійним, єдиний випадок, який би працював, це якщо у користувача є лише один браузер.