Javascript 强制更改出现在页面完全加载之前

Question

我编写了一个由 Javascript 建模的网站。我在网页中写了一条消息来阻止用户激活JS。在我的 JS 代码中，我第一步删除了这个节点。问题是该效果要等到页面完全加载后才会出现...

var modelerBody = null;

var loadingNode = document.createElement("div");

loadingNode.appendChild(document.createTextNode(messageGeneric['loading']));
loadingNode.setAttribute("id", "loading");

window.onload = function() {

    document.getElementById("jsDisabled").remove()

    var body = document.getElementsByTagName("body")[0];
    body.insertBefore(loadingNode, body.childNodes[0]);
    inflateForms();
    modelerBody = new Modeler.Screen(body.childNodes[1]);
    modelerBody.modelize();
    // Remove Loading message
    body.childNodes[0].remove();

}

我该如何解决这个问题？抱歉我的英语我正在学习......

Answer 1

您可以通过将 script 标签放在要删除的 div 上方，在元素加载之前运行 Javascript，但它将无法找到该 div，因为它尚未加载。在元素加载之前无法对其进行编辑。

<noscript>标签可用于此目的。包装一个元素以显示用户是否未启用 Javascript。

<noscript>
  <div>Javascript isn't enabled</div>
</noscript>
<script>
  let jsenabled = document.createElement("div");
  jsenabled.innerText = "Javascript is enabled";
  document.body.appendChild(jsenabled);
</script>