Je crois que la balise de script est en cours d'exécution avant le chargement des éléments DOM. Comment pourrais-je attendre que les éléments soient chargés en premier? J'ai essayé d'encapsuler le contenu de la balise de script dans window.onload = () => {} mais pas de chance. J'ai également essayé <body onload="myFunc()">.

Ma logique est de masquer le contenu React dans root si le navigateur est Edge / IE et d'afficher le contenu unsupportedBrowser pour informer l'utilisateur que ce navigateur n'est pas pris en charge.

Notez que cela ne se produit que dans IE.

<html>
  <body>
    <div id="root">React Content</div>
    <div id="unsupportedBrowser" style="display: none;">
       Microsoft Edge is NOT supported.
    </div>


    <script type="text/javascript" defer>
       document.addEventListener("DOMContentLoaded", function(){
        if (window.document.documentMode || window.navigator.userAgent.indexOf("Edge") > -1) {
             alert("Edge browser");
             document.getElementById("root").style.display = "none";  //ERROR here, rest doesn't run
             document.getElementById("unsupportedBrowser").style.display = "block";
             // do other things
        };
      });
    </script>
  </body>
</html>
0
Simon Wong 29 août 2020 à 00:55

2 réponses

Meilleure réponse

Peut-être que React vous donne du fil à retordre, car il est toujours exécuté lorsque vous en incluez la source.

<html>
  <body>
    <script type="text/javascript">
            document.addEventListener("DOMContentLoaded", function(){
             if (window.navigator.userAgent.indexOf("Edge") > -1) {
                 alert("Edge browser");
             
                 document.body.innerHTML = '<div id="unsupportedBrowser" style="display: none;">Microsoft Edge is NOT supported.</div>'
            }else{
                var root = document.createElement("div");
                root.setAttribute("id", "root");
                document.body.appendChild(root);
                
                var react_script = document.createElement("script");
                react_script.setAttribute("src", "your_script");
                document.body.appendChild(react_script);
            }
        });
    </script>
  </body>
</html>

Remarque: je ne comprends pas pourquoi vous excluez le navigateur Edge. Edge! = Internet Explorer. De nos jours, tous les principaux navigateurs prennent en charge les API de navigateur standard. Pour la compatibilité du navigateur, vous devez également utiliser Babel pour le transpiler.

1
Citrullin 28 août 2020 à 22:12

Modifiez cette ligne:

if (window.navigator.userAgent.indexOf("Edge") > -1) {

Avec:

if (window.navigator.userAgent.indexOf("Edg") > -1) {

La dernière version d'Edge renvoie:

"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like 
  Gecko) Chrome/85.0.4183.83 Safari/537.36 Edg/85.0.564.41"
1
gaetanoM 28 août 2020 à 22:13