ページが完全に読み込まれる前にJavascriptの変更が表示される

Question

JavaScriptを使用してモデル化されたウェブサイトを作成します。 Webページでは、ユーザーが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

削除する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>