admin管理员组

文章数量:1418697

Hello my questions is about how a webpage is loaded! Here is my code:

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

I cannot for the life of me figure out why the alert is running before the heading is displayed. It is my understanding that since the alert is right above the closing body tag it will be the last thing run. Why is the page waiting for me to close out the alert before displaying the heading?

Thanks for the help!

Edit: I ran this code in firefox rather than chrome and it worked how I wanted it to - the heading displayed first before the alert ran.

Hello my questions is about how a webpage is loaded! Here is my code:

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

I cannot for the life of me figure out why the alert is running before the heading is displayed. It is my understanding that since the alert is right above the closing body tag it will be the last thing run. Why is the page waiting for me to close out the alert before displaying the heading?

Thanks for the help!

Edit: I ran this code in firefox rather than chrome and it worked how I wanted it to - the heading displayed first before the alert ran.

  • javascript
  • html
Share Improve this question edited Jul 28, 2018 at 20:06 DougL asked Jul 28, 2018 at 18:57 DougLDougL 631 silver badge5 bronze badges 3
  • Possible duplicate: stackoverflow./questions/1307929/… – Bob Commented Jul 28, 2018 at 19:04
  • I saw that page before posting, and it is part of the reason I am confused. They say that "javascript is executed as seen". I was understanding that to mean that because the h1 tag is above the script tag, the heading would be parsed and displayed first before the alert pops up. – DougL Commented Jul 28, 2018 at 19:11
  • fair point, this Q/A drills down much further: stackoverflow./questions/1795438/… – Bob Commented Jul 28, 2018 at 19:54
Add a ment  | 

4 Answers 4

Reset to default 1

You need to execute your script after the page loads with 

<body onload="script();">

An external script will execute before the page loads. 

<body onload="script();">

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

You can use setTimeout() to show the alert after a few seconds (when the page should have loaded).

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

You can check if the header (the h1 tag) is there and only alert if it is there.

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

The simplest workaround code without using JQuery I could write is this. Please check it.

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

The cleanest way to do this seems like it would be to put your javascript in a separate file, and load it with the defer attribute. This will cause it to fire after the DOM loads (technically, just before DOMContentLoaded, but it doesn't work consistently across browsers unless there is a src attribute, which is why you would need to move it to an external file.

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

Oddly, adding some CSS to your heading could also affect this since JS is supposed to execute in order after any pending CSS.

The timeout function or a $(document).ready() function will do what you need in theory, but a timeout could need to be adjusted based on the plexity of the page, and if you aren't already using jQuery, you probably won't want to add it just to use $(document).ready().

本文标签： javascriptalert is executing before html loadsStack Overflow

版权声明：本文标题：javascript - alert is executing before html loads - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745295379a2652044.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。