Question

我相信脚本标签在加载DOM元素之前正在运行。我将如何等待首先加载元素？我试过将脚本标签的内容包装在window.onload = () => {}中，但是没有运气。我也尝试过<body onload="myFunc()">。

我的逻辑是，如果浏览器是Edge / IE，则将React内容隐藏在root中，并显示unsupportedBrowser内容，以使用户知道不支持此浏览器。

请注意，这仅在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>

Answer 1

也许React给您带来了麻烦，因为当您包含它的源代码时它仍然会执行。

MouseDoubleClick

旁注：我不明白为什么您排除Edge浏览器。边缘！= Internet Explorer。如今，所有主流浏览器都支持标准浏览器API。为了与浏览器兼容，您还应该使用Babel将其下潜。

Answer 2

更改此行：

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

具有：

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

Edge的最新版本返回：

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

脚本标签在加载DOM之前运行

2 个答案: