Causes and Solutions of Failure of js in head

  • 2021-07-26 06:55:10
  • OfStack

1. Today, I encountered a strange problem when writing js. The written js was put into body for execution, but it had no effect when put into head. Why did this happen?

Look at the invalidation code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title> new document </title>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <style type="text/css">
 .login{width:40px;height:25px;line-height:25px;background-color:#4E74A5;margin-top:30px;text-align:center;color:#FFF;}
 </style>
 <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
 <script type="text/javascript">
 $(".login").click(function(){
   alert(1);
   });
 </script>
 </head>
 <body>
 <input type="text" class="pass" />
 <div id="enter" class="login">  Login </div>
 </body>
</html>

2. Solution: Put the js code in body, or use the window. onload = function () {} code package to execute after the document is loaded, and it is not recommended to put it in head in the future.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title> new document </title>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <style type="text/css">
 .login{width:40px;height:25px;line-height:25px;background-color:#4E74A5;margin-top:30px;text-align:center;color:#FFF;}
 </style>
 <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
 <script type="text/javascript">
 window.onload = function(){
 $(".login").click(function(){
   alert(1);
   });
 } 
 </script>
 </head>
 <body>
 <input type="text" class="pass" />
 <div id="enter" class="login">  Login </div>
 </body>
</html>

3. Reason:

Because the document hasn't been loaded yet, after reading js, js doesn't work. If you want to use it in head, use window. onload = function () {//Wrap your code here}

js can be divided into external and internal, and the external js1 is put into head. The internal js is also called the JS script on this page, and the internal js1 is put into body like this, which has many purposes:

1. Do not block the loading of the page (in fact, js will be cached).

2. You can operate dom directly in js, and dom is ready at this time, that is, dom exists when js runs.

3. The recommended approach is to place it at the bottom of the page and listen for window. onload or readystate to trigger js.

4. Extension:

js within head blocks page transfer and page rendering. JavaScript in head needs to finish execution before rendering body, so try not to put JS files in head. You can choose to introduce and execute JavaScript when document is complete, or after a specific block. JavaScript in head needs to finish execution before rendering body, so try not to put JS files in head. You can choose to introduce and execute JavaScript at the completion of document, or after a specific block.

Therefore, js1 in head should be executed before rendering body pages. In order to avoid the js script introduced by head blocking the parsing work of dom by the main parsing engine in the wanderer and rendering dom, the general principle is that the style is in front, and the dom document and script are in the back. Follow the order of parsing, rendering and executing script.


Related articles: