Javascript ReactJS 中的浏览器检测
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49328382/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Browser Detection in ReactJS
提问by Hafiz Temuri
Is there any way to detect IE browser with React and either redirect to a page or give any helpful message. I found something in JavaScript, but not sure how would I use it with React+TypeScript.
有什么方法可以使用 React 检测 IE 浏览器并重定向到页面或提供任何有用的消息。我在 JavaScript 中找到了一些东西，但不确定如何将它与 React+TypeScript 一起使用。
var isEdge = !isIE && !!window.StyleMedia;
var isEdge = !isIE && !!window.StyleMedia;
回答by Shawn Matthews
You are on the right track you can use these to conditionally render jsx or help with routing...
您走在正确的轨道上，您可以使用这些来有条件地呈现 jsx 或帮助路由...
I have used the following with great success.
我已经成功地使用了以下内容。
Originally from - How to detect Safari, Chrome, IE, Firefox and Opera browser?
最初来自 -如何检测 Safari、Chrome、IE、Firefox 和 Opera 浏览器？
// Opera 8.0+
const isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Firefox 1.0+
const isFirefox = typeof InstallTrigger !== 'undefined';
// Safari 3.0+ "[object HTMLElementConstructor]"
const isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification));
// Internet Explorer 6-11
const isIE = /*@cc_on!@*/false || !!document.documentMode;
// Edge 20+
const isEdge = !isIE && !!window.StyleMedia;
// Chrome 1 - 71
const isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);
// Blink engine detection
const isBlink = (isChrome || isOpera) && !!window.CSS;
Please be aware they each stand a chance to deprecated due to browser changes.
请注意，由于浏览器的变化，它们都有可能被弃用。
I use them in React like this:
我在 React 中像这样使用它们：
content(props){
if(!isChrome){
return (
<Otherjsxelements/>
)
}
else {
return (
<Chromejsxelements/>
)
}
}
Then by calling {this.Content()} in my main component to render the different browser specific elements.
然后通过在我的主要组件中调用 {this.Content()} 来呈现不同的浏览器特定元素。
Pseudo code might look something like this... (untested):
伪代码可能看起来像这样......（未经测试）：
import React from 'react';
const isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);
export default class Test extends React.Component {
content(){
if(isChrome){
return (
<div>Chrome</div>
)
} else {
return (
<div>Not Chrome</div>
)
}
}
render() {
return (
<div>Content to be seen on all browsers</div>
{this.content()}
)
}
}
回答by Tallboy
This is the service I always use when doing JS/Browser based browser-detection: http://is.js.org/
这是我在进行基于 JS/Browser 的浏览器检测时总是使用的服务：http: //is.js.org/
if (is.ie() || is.edge()) {
window.location.href = 'http://example.com';
}
回答by Lev
Try:
尝试：
const isEdge = window.navigator.userAgent.indexOf('Edge') != -1
const isIE = window.navigator.userAgent.indexOf('Trident') != -1 && !isEdge
etc.
等等。
Each browser has a distinct user agent you can check.
每个浏览器都有一个不同的用户代理，您可以检查。
These can be faked by the client of course, but in my opinion, are a more reliable long term solution.
这些当然可以由客户伪造，但在我看来，这是一个更可靠的长期解决方案。
回答by Qui-Gon Jinn
You can write test for IE like this.
您可以像这样为 IE 编写测试。
<script>
// Internet Explorer 6-11
const isIE = document.documentMode;
if (isIE){
window.alert(
"Your MESSAGE here."
)
}
</script>
回答by Alan
This is all information you can get from your the browser of you client (using react):
这是您可以从客户端的浏览器中获得的所有信息（使用 react）：
let latitude
let longitude
const location = window.navigator && window.navigator.geolocation
if (location) {
location.getCurrentPosition(position => {
latitude = position.coords.latitude
longitude = position.coords.longitude
})
}
var info = {
timeOpened: new Date(),
timezone: new Date().getTimezoneOffset() / 60,
pageon: window.location.pathname,
referrer: document.referrer,
previousSites: window.history.length,
browserName: window.navigator.appName,
browserEngine: window.navigator.product,
browserVersion1a: window.navigator.appVersion,
browserVersion1b: navigator.userAgent,
browserLanguage: navigator.language,
browserOnline: navigator.onLine,
browserPlatform: navigator.platform,
javaEnabled: navigator.javaEnabled(),
dataCookiesEnabled: navigator.cookieEnabled,
dataCookies1: document.cookie,
dataCookies2: decodeURIComponent(document.cookie.split(';')),
dataStorage: localStorage,
sizeScreenW: window.screen.width,
sizeScreenH: window.screen.height,
sizeDocW: window.document.width,
sizeDocH: window.document.height,
sizeInW: window.innerWidth,
sizeInH: window.innerHeight,
sizeAvailW: window.screen.availWidth,
sizeAvailH: window.screen.availHeight,
scrColorDepth: window.screen.colorDepth,
scrPixelDepth: window.screen.pixelDepth,
latitude,
longitude
}
console.log(info)
The browser is browserName
浏览器是 browserName
回答by Muganwas
This almost broke me, but I found something which seems pretty simple and straight forward, use the vendor name. ie. Google, Apple etc. navigator.vendor.includes('Apple')I hope this helps someone out there.
这几乎让我崩溃，但我发现了一些看起来非常简单直接的东西，使用供应商名称。IE。谷歌、苹果等。navigator.vendor.includes('Apple')我希望这对那里的人有所帮助。
