Verify A, b two point doubts:
A.<script src= "./main.js" ></script> is the window.onload executed after the HTML is all loaded, or is it loaded before it is in the HTML position?
B. <script src= "./main.js" ></script> What is the difference between window.onload and no?
Conclusion:
A.
Answer: Executes when the HTML is all loaded.
B.
Answer: The difference is that window.onload is the HTML page when all the documents are loaded, and the contents of the window.onload are executed. Therefore, the window.onload main.js, no matter where in the HTML is introduced, will not appear the HTML element cannot find the error. there is no window.onload js file that needs to be introduced after the part of the code that it is associated with, otherwise, there will be an error that the HTML element could not find.
The following is the whole process of validation:
Code Structure Preview
Main.js:
window.onload=function() { var app=New Vue ({ el:"# App-4 ", data:{ todos:[{ text:" first one " },{ text:" Second One " },{ text:"third one" }] } ) alert ("app did!" )}Index.html:
<HTML> <Head> <title>Xx</title> <Scriptsrc= "./vue.js"></Script> <Scriptsrc= "./main.js"></Script> <ahref= "./vue.js"></a> </Head><Body> <DivID= "App-4"> <ol> <Liv-for= "Todo in Todos">{{Todo.text}}</Li> </ol> </Div> </Body></HTML>
Execution process (listed in the real order of execution in Chrome)
1.
2.
Note: First go to the main.js in the Window.onload, and then show the rest of the HTML.
========================================================================================================
Now the HTML <script src= "./main.js" ></script> code location slightly adjusted , for the sake of prudence, add a row of <div>html dom loading ... </div>
Index.html:
<!DOCTYPE HTML><HTML> <Head> <title>Xx</title> <Scriptsrc= "./vue.js"></Script> <ahref= "./vue.js"></a> </Head> <Body> <Div>Loading of DOM in HTML ...</Div> <DivID= "App-4"> <ol> <Liv-for= "Todo in Todos">{{Todo.text}}</Li> </ol> </Div> <Scriptsrc= "./main.js"></Script> </Body></HTML>
1.
2.
Description: main.js where window.onload are introduced are the same . "Note: there are no errors that HTML elements cannot find "
=========================================================================
The above mentioned, is main.js in Window.onload.
=========================================================================
Now, remove the window.onload!!!
=========================================================================
As described below, when there is no window.onload in Main.js.
=========================================================================
Main.js:
var app=New Vue ({ el:"#app-4", data:{ todos:[{ Text:"first one" },{ text:"Second One" },{ text:"third one" }] } }) Alert ("app did!" )// }Index.html:
<!DOCTYPE HTML><HTML> <Head> <title>Xx</title> <Scriptsrc= "./vue.js"></Script> <Scriptsrc= "./main.js"></Script> <ahref= "./vue.js"></a></Head> <Body> <Div>Loading of DOM in HTML ...</Div> <DivID= "App-4"> <ol> <Liv-for= "Todo in Todos">{{Todo.text}}</Li> </ol> </Div> </Body></HTML>
1.
2.
Description: Load the contents of the Main.js, at which time the HTML is not loaded (the content that needs to be displayed is not loaded)"Note: at this point, there is an error that the HTML element could not find (2. Figure)"
=============================================================
Adjust <script src= "./main.js" ></script> code position in index.html
Index.html:
<!DOCTYPE HTML><HTML> <Head> <title>Xx</title> <Scriptsrc= "./vue.js"></Script> <ahref= "./vue.js"></a> </Head> <Body> <Div>Loading of DOM in HTML ...</Div> <DivID= "App-4"> <ol> <Liv-for= "Todo in Todos">{{Todo.text}}</Li> </ol> </Div> <Scriptsrc= "./main.js"></Script> </Body></HTML>
1.
2.
Description: HTML is loaded (the content that needs to be displayed is not loaded yet), then the content in Main.js is loaded " at this point, the rendering order is consistent with the scene with Window.onload "
Window.onload execution After document loading is complete
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
