Question

有没有办法通过React检测IE浏览器并重定向到页面或提供任何有用的消息。我在JavaScript中找到了一些东西，但不确定如何将它与React + TypeScript一起使用。

var isEdge = !isIE && !!window.StyleMedia;

Answer 1

您在正确的轨道上可以使用这些来有条件地渲染jsx或帮助路由...

我使用了以下内容并取得了巨大成功。

最初来自 - How to detect Safari, Chrome, IE, Firefox and Opera browser?

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

请注意，由于浏览器的更改，他们每个人都有机会弃用。

我在这样的反应中使用它们。

 content(props){
    if(!isChrome){
     return (
      <Otherjsxelements/>
     )
    }
    else { 
     return (
      <Chromejsxelements/>
     )
    }
  }

然后通过调用主组件中的{this.Content（）}来呈现不同的浏览器特定元素。

Sudo代码可能看起来像这样......（未经测试）。

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

Answer 2

不知道为什么，但没有人提到此软件包：react-device-detect 该软件包有很多浏览器检查，以及版本和一些其他相关信息。它很小，而且已经更新。

您可以使用：

import { isIE } from 'react-device-detect';
isIE // returns true or false

反应设备检测它也很小bundlephobia link

Answer 3

这是我在进行基于JS /浏览器的浏览器检测时经常使用的服务：http://is.js.org/

if (is.ie() || is.edge()) {
  window.location.href = 'http://example.com';
}

Answer 4

这几乎让我感到震惊，但是我发现使用供应商名称看起来很简单直接。即。 Google，Apple等。navigator.vendor.includes('Apple') 我希望这对外面的人有帮助。

Answer 5

尝试：

const isEdge = window.navigator.userAgent.indexOf('Edge') != -1
const isIE = window.navigator.userAgent.indexOf('Trident') != -1 && !isEdge

等

每个浏览器都有一个可以检查的独特用户代理。

这些当然可以由客户伪造，但是我认为这是一种更可靠的长期解决方案。

Answer 6

您可以像这样为IE编写测试。

<script>
     // Internet Explorer 6-11
          const isIE = document.documentMode;
          if (isIE){
            window.alert(
              "Your MESSAGE here."
            )
          }
</script>

Answer 7

这是您可以从客户端的浏览器（使用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)

浏览器为browserName

Answer 8

我在 React 网站上使用 Gatsby 并且构建给我接受的答案带来了麻烦，所以我最终在加载时使用了 useEffect 以至少无法为 IE 呈现：

  const [isIE, setIsIE] = React.useState(false);

  React.useEffect(() => {
    console.log(`UA: ${window.navigator.userAgent}`);
    var msie = window.navigator.userAgent.indexOf("MSIE ");
    setIsIE(msie > 0)
  }, []);

  if(isIE) {
    return <></>
  }

// In my component render

if(isIE) { return <></> }

最初的想法来自：

https://medium.com/react-review/how-to-create-a-custom-usedevicedetect-react-hook-f5a1bfe64599

和

Check if user is using IE

ReactJS中的浏览器检测

8 个答案: