我相信脚本标签在加载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>
答案 0 :(得分:1)
也许React给您带来了麻烦,因为当您包含它的源代码时它仍然会执行。
MouseDoubleClick
旁注:我不明白为什么您排除Edge浏览器。边缘!= Internet Explorer。如今,所有主流浏览器都支持标准浏览器API。为了与浏览器兼容,您还应该使用Babel将其下潜。
答案 1 :(得分:1)
更改此行:
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"