在 html 加载之前执行警报答案

【问题标题】：alert is executing before html loads在 html 加载之前执行警报
【发布时间】：2019-01-05 13:05:16
【问题描述】：

您好，我的问题是关于如何加载网页的！这是我的代码：

<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title> 
</head>
<body>
<h1>Waiting</h1>
<script type="text/javascript">
    alert("Why?");
</script>
</body>
</html>

我一生都无法弄清楚为什么在标题显示之前警报正在运行。据我了解，由于警报位于结束正文标记的正上方，因此它将是最后运行的东西。为什么页面在显示标题之前等待我关闭警报？

感谢您的帮助！

编辑：我在 firefox 而不是 chrome 中运行了这段代码，它按照我想要的方式运行——在警报运行之前首先显示标题。

【问题讨论】：

可能重复：stackoverflow.com/questions/1307929/…
我在发布之前看到了该页面，这也是我感到困惑的部分原因。他们说“javascript 执行如所见”。我的理解是因为 h1 标签在脚本标签之上，所以在弹出警报之前会先解析和显示标题。
公平点，这个问答进一步深入：stackoverflow.com/questions/1795438/…

标签： javascript html

【解决方案1】：

执行此操作的最简洁方法似乎是将您的 javascript 放在一个单独的文件中，并使用 defer 属性加载它。这将导致它在 DOM 加载后触发（从技术上讲，就在 DOMContentLoaded 之前，但除非有 src 属性，否则它不能在浏览器中始终如一地工作，这就是您需要将其移动到外部文件的原因。

<script src="myScript.js" defer></script>

奇怪的是，在标题中添加一些 CSS 也会影响这一点，因为 JS 应该在任何待处理的 CSS 之后按顺序执行。

超时函数或$(document).ready() 函数理论上可以满足您的需求，但可能需要根据页面的复杂性调整超时时间，如果您还没有使用 jQuery，您可能不会不想添加它只是为了使用$(document).ready()。

【讨论】：

非常方便的快速参考：html5rocks.com/en/tutorials/speed/script-loading/…
我尝试添加 defer 属性，但警告仍然显示在标题之前。我从几年前发现了这个问题。我正在使用 chrome - 是浏览器的问题吗？ stackoverflow.com/questions/3952009/defer-attribute-chrome 似乎通常的做法是将脚本放在正文中以避免此类问题，但我一直遇到问题。
我认为我的 chrome 版本存在问题。我在 Firefox 中运行它，它按预期工作。
可能是浏览器支持仍然存在问题，但我认为除了旧的 IE 之外这个是安全的......对于所有的转变似乎远离 jQuery，它做得好的一件事是规范化所有这些浏览器的怪癖...... .ready() 函数“正常工作”，所以如果你已经在你的应用程序中包含了 jQuery，那么这是一个使用它的地方。

【解决方案2】：

您可以使用setTimeout() 在几秒钟后显示警报（当页面应该已经加载时）。

<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title> 
</head>
<body>
<h1>Waiting</h1>
<script type="text/javascript">
setTimeout(function(){
    alert("Why?");
}, 1000);//wait 1000 milliseconds
</script>
</body>
</html>

您可以检查标头（h1 标记）是否存在，如果存在则仅发出警报。

<!DOCTYPE html>
    <html>
    <head>
    <title>JavaScript</title> 
    </head>
    <body>
    <h1 id="header">Waiting</h1>
    <script type="text/javascript">
    var x;
    x = setInterval(function(){
        if(document.getElementById("header")){
        alert("Why?");
        clearInterval(x);
        }
    }, 100);
    </script>
    </body>
    </html>

【讨论】：

【解决方案3】：

我可以编写的不使用 JQuery 的最简单的解决方法代码是这样的。请检查一下。

<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title> 
</head>
<body>
<h1>Waiting</h1>
<script type="text/javascript">

    window.onload = function(){ 
        setTimeout(()=>{
            alert("Why?");

        },10)

}
</script>
</body>
</html>

【讨论】：

【解决方案4】：

你需要在页面加载后执行你的脚本

<body onload="script();">

一个外部脚本将在页面加载之前执行。

<body onload="script();">

<h1>Waiting</h1>
<script type="text/javascript">
   function script() {alert("Why?");}
</script>
</body>

【讨论】：

感谢您的信息。这是在弹出警报之前显示标题的唯一方法吗？
我认为有很多方法可以做到这一点。例如，您可以使用方法 setTimeOut()