Question

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

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

我无法终生显示标题前为何运行警报。据我了解，由于该警报就在结束标签的上方，因此它将是最后一件事。为什么页面在显示标题之前等待我关闭警报？

感谢您的帮助！

编辑：我在firefox中而不是在chrome中运行此代码，并且按我希望的方式工作-警报运行前首先显示标题。

Answer 1

页面加载完成后，您需要执行

<body onload="script();">

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

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

Answer 2

选中此JavaScript: DOM load events, execution sequence, and $(document).ready()

Answer 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>

Answer 4

执行此操作的最干净方法似乎是将javascript放在单独的文件中，并使用defer属性进行加载。这将导致它在DOM加载后触发（从技术上讲，就在DOMContentLoaded之前，但是除非在src属性下，否则它无法在浏览器中一致地工作，这就是为什么需要将其移动到外部文件

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

奇怪的是，在标题中添加一些CSS也可能会影响此效果，因为JS应该在任何未决的CSS之后按顺序执行。

理论上，超时功能或$(document).ready()函数将满足您的要求，但是可能需要根据页面的复杂度来调整超时，如果您尚未使用jQuery，则可能不想仅使用$(document).ready()添加它。

Answer 5

您可以使用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>

html加载之前执行警报

5 个答案: