无法在 Javascript 之前加载 HTML答案

【问题标题】：Unable to load HTML before Javascript无法在 Javascript 之前加载 HTML
【发布时间】：2018-12-28 04:07:34
【问题描述】：

我是 Javascript 新手，知道如何在执行 javascript 之前加载 html。

我确实检查了有关 stackoverflow 的问题，并尝试实施给出的解决方案，但没有奏效。

以下是我尝试过的各种代码的代码。

在正文结束前写脚本标签
在函数中编写了 javascript 代码并在 body 的 onload 中调用它，但它也不起作用。（还尝试评论 documnet.onload = cal(); 并执行）。

<!DOCTYPE html>
<html>
<head>
<title>Age Calculator</title>

</head>
<body onload="cal();">
<h1>Age Calculator</h1>
<p>Enter your age and find how many days you have been alive</p>
<script type="text/javascript" src="Age.js"></script>
</body>
</html>

//Javascript code
function cal(){
  var age = prompt("How old are you?");
  var days = age * 365.25;
  alert("You are approx " + days + " days");
}

documnet.onload = cal();

我希望在询问用户你几岁之前显示 html？

【问题讨论】：

开发时始终打开浏览器控制台。这样你会看到像 "Uncaught ReferenceError: documnet is not defined" 之类的错误（仅供参考，它是document）
看developer.mozilla.org/en-US/docs/Web/API/Document/readyState
看看小提琴jsfiddle.net/vks9009/8w24k3xv。如果长 html 代码，此代码也将起作用

标签： javascript html

【解决方案1】：

问题在于 prompt 和类似的功能，如警告 block 浏览器 - 它们会阻止呈现，直到弹出框被提交或取消。

<h1>Age Calculator</h1>
<p>Enter your age and find how many days you have been alive</p>
<script>
  var age = prompt("How old are you?");
</script>

如果您想确保在 prompt 出现之前显示 HTML，您可以使用 setTimeout，让浏览器有机会在调用 prompt 之前绘制 HTML：

<h1>Age Calculator</h1>
<p>Enter your age and find how many days you have been alive</p>
<script>
  setTimeout(() => {
    var age = prompt("How old are you?");
  });
</script>

但更好的解决方案是使用适当的模式，例如带有submit 按钮的输入框，它不会阻塞浏览器。（如果可能，最好不要使用alert、prompt 和confirm）

【讨论】：

谢谢你的帮助，但是我看到的教程只在body end(

【解决方案2】：

首先，我建议阅读this的文章。现在，根据本文档的来源，在执行某些代码之前等待文档完全呈现的最佳方法（仅使用 Javascript）是在 window 元素的 load 事件上使用侦听器，例如这个：

window.addEventListener('load', function() {
  // Everything has loaded!
});

我在您的代码中添加了一个图像，只是为了测试这种方法如何在向用户提示之前等待图像呈现：

<h1>Age Calculator</h1>
<p>Enter your age and find how many days you have been alive</p>
<img src="https://via.placeholder.com/500?text=Test+Image">

<script>

function cal()
{
    var age = prompt("How old are you?");
    var days = age * 365.25;
    alert("You are approx " + days + " days");
}

window.addEventListener('load', function()
{
    // Everything has been rendered and loaded!
    cal();
});

</script>

【讨论】：