web-dev-qa-db-ja.com

ReactJSでのブラウザー検出

IEブラウザでReactを使用し、ページにリダイレクトするか、役立つメッセージを提供する方法はありますか。JavaScriptで何かを見つけましたが、 React + TypeScriptで使用します。

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

javascriptreactjstypescript
11
Hafiz Temuri

あなたはこれらを使用して条件付きでjsxをレンダリングしたり、ルーティングを支援したりすることができます...

以下を大成功で使用しました。

元々- Safari、Chrome、IE、Firefox、および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;

ブラウザの変更により廃止される可能性があることに注意してください。

Reactで次のように使用します。

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

次に、メインコンポーネントで{this.Content（）}を呼び出して、さまざまなブラウザー固有の要素をレンダリングします。

擬似コードは次のようになります...（テストなし）：

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()}
        )
    }
}
31
Shawn Matthews

これは、JS/Browserベースのブラウザー検出を行うときに常に使用するサービスです。 http://is.js.org/

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

IEのようにテストを書くことができます。

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

試してください：

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

等.

各ブラウザには、確認できる個別のユーザーエージェントがあります。

もちろん、これらはクライアントによって偽装される可能性がありますが、私の意見では、より信頼性の高い長期的なソリューションです。

0
Lev