Introduction to Html content loading and JS execution sequence, Introduction to html loading js

Introduction to Html content loading and JS execution sequence, Introduction to html loading js

My colleague told me that he could not use jQuery to obtain the value of the hidden element input on the page. The following figure shows the content of his html page.

<! DOCTYPE html> 
The JS script on the page is in the head, and the input to be read by the JS script is in the body. The browser loads the html page content sequentially, that is, loading the content before the html page. Therefore, when loading the content to the JS script, the input is not loaded to the browser. JS is an explanatory script that is executed from top to bottom. Because this JS code is executed immediately, when Javascript is executed, it cannot read the input value.
The most direct modification method is to put JS at the bottom of the web page for execution.

<! DOCTYPE html> Place JS at the bottom of the Web page. In this way, when Javascript is executed, the web page content has been loaded. Putting JavaScript on the bottom of a webpage is not the best solution. In most cases, JavaScript is not always placed at the bottom of the webpage. In this case, the onload event of window can be used. The onload event is triggered only after the whole page is loaded. The JS script can be executed in onload. The onload events of different browsers are added in different ways.

Internet Explorer events:

window.attachEvent('onload', function(){var userId = $('#hiddenUserId').val();var contextPath = $('#hiddenContextPath').val();var userName = $('#hiddenUserName').val();});


Standard DOM events such as Chrome and Firefox:



window.addEventListener('load', function(){var userId = $('#hiddenUserId').val();var contextPath = $('#hiddenContextPath').val();var userName = $('#hiddenUserName').val();});

JQuery provides a common Initialization Method for adding events in different browsers. This method is triggered when page loading is complete.


$(function(){var userId = $('#hiddenUserId').val();var contextPath = $('#hiddenContextPath').val();var userName = $('#hiddenUserName').val();});
In essence, the above method adds an onload listener event.



Last Modified PAGE

<! DOCTYPE html> 


 
Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.