0

I believe the script tag is running before the DOM elements are loaded. How would I go about waiting for the elements to be loaded first? I've tried wrapping the script tag's content in window.onload = () => {} but no luck. I've also tried <body onload="myFunc()">.

My logic is to hide the React content in root if the browser is Edge/IE and show the unsupportedBrowser content to let the user know that this browser is not supported.

Note this only happens in 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>
Simon Wong
  • 236
  • 1
  • 2
  • 13

2 Answers2

1

Maybe React is giving you a hard time, since it gets still executed when you include the source for it.

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

A side note: I don't get why you exclude the Edge browser. Edge != Internet Explorer. These days all major browser support the standard browser APIs. For browser compatibility you should also use Babel to transpile it down.

Citrullin
  • 2,093
  • 11
  • 26
  • I'm actually targeting both Edge and IE. Edge has some support for React but some plugins aren't showing up, such as Semantic UI cards. The solution you provided works well in Edge, but not in IE. Nothing seems to happen in IE. – Simon Wong Aug 28 '20 at 22:20
  • @SimonWong Internet Explorer has a different user agent. http://useragentstring.com/pages/useragentstring.php?name=Internet+Explorer – Citrullin Aug 28 '20 at 22:21
  • I edited my original post. I'm using `window.document.documentMode` to target IE browsers – Simon Wong Aug 28 '20 at 22:24
1

Change this line:

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

with:

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

Last version of Edge returns:

"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"
gaetanoM
  • 39,803
  • 6
  • 34
  • 52