JavaScript in Web browser

1. Asynchronously loading a JS code
function LoadAsync (URL) {
var head = document.getElementsByTagName ("head") [0]; Find Head Node
var s = document.createelement ("script"); Create a SCRIPT tag
s.src = URL; Set a src attribute
Head.appendchild (s); Inserting tags into the head node
}
2. Event-driven JavaScript
2.1 Binding an event handler to a property on the target object
Window.onload = function () {};//1
var btn = document.getElementById (' button ');//2
Btn.onclick = function () {
....
}
function ReadS () {
.....
}
Request.onreadystatechange = ReadS ();//3
The above three kinds are more common
2.2. Event binding mode (Event listener)
Use under non-IE
Window.addeventlistener (' Load ', function () {},false);
IE under
Window.attachevent (' Load ', function () {});
3. After the onload document structure is loaded, a function is executed
Registers a function to execute when the document is loaded
Run a function asynchronously if the document is loaded
function OnLoad (f) {
if (onload.loaded)//If the document is already loaded complete
Window.settimeout (f, 0); Put the queue to execute as soon as possible
else if (window.addeventlistener)//Bind event listener function
Window.addeventlistener ("Load", F, false);
else if (window.attachevent)//ie8 the following execution
Window.attachevent ("onload", f);
}
Sets a marker bit to determine whether the document is loaded and completed
onload.loaded = false;
Register a load function to set the load tag
OnLoad (function () {onload.loaded = true;});
4. JavaScript Timeline Execution sequence
The 4.1 Web browser creates the document object and begins parsing the Web pages, parsing the HTML elements and their textual content, adding element elements and text to the document!
The value of the Document.readystate property at this stage is loading.
4.2 When the HTML parser encounters script without setting async and defer, it adds elements to the document and executes inline or external scripts. These scripts are executed synchronously, and when the script is downloaded and executed. The parser pauses parsing.
This allows the script to insert content into the page using the Documen.write () method. When the parser recovers, the content becomes part of the document.
4.3 When the HTML structure is set to script without async, it begins to download the scripts file and continues to parse the document. The script executes as soon as it is downloaded, but the parser does not stop waiting for his download to complete. Asynchronous scripts prohibit the use of documen.write ()
This method.
4.4 The value of the Document.readystate property is interactive when the document resolution is complete.
4.5 All defer scripts are executed in the order in which they appear in the document, at which time the asynchronous script may be executed, the deferred script can access the complete document tree structure, and the use of Document.weite () is forbidden.
4.6 The browser triggers the Domcontentloaded event on document. This marks the script from synchronous execution into an event-driven phase, noting that the asynchronous script may also execute at this time.
4.7 This time the document structure parsing is complete, but the browser may still be waiting for other content to load, slices. When all these are loaded and the asynchronous script is fully loaded and executed, the value of the Document.readystate property is the Complete.web browser triggering the OnLoad event on the Window Object!
4.8 From this moment, an asynchronous event is invoked to respond asynchronously to the user's input, network, timer, and so on!
5. IE Condition Comment
<!--[if IE 5]>
Only IE5.5 visible
<! [endif]-->
<!--[if GT IE 5.5]>
Only IE 5.5 above visible
<! [endif]-->
<!--[If Lt IE 5.5]>
Only IE 5.5 below visible
<! [endif]-->
<!--[if GTE IE 5.5]>
IE 5.5 and above visible
<! [endif]-->
<!--[If LTE IE 5.5]>
IE 5.5 and below are visible
<! [endif]-->
<!--[if! IE 5.5]>
ie visible in non IE 5.5
<! [endif]-->
The following code is a conditional comment that runs under a non-IE browser
<!--[if! ie]><!--> You are not using Internet Explorer <!--<! [endif]-->
<!--[if IE 6]><!--> You are using Internet Explorer version 6 or a non-ie browser <!--<! [endif]-->
6. Homologous strategy
In JavaScript, there is a very important security restriction called "Same-origin policy" (same-origin strategy).
This strategy is an important restriction on the page content that JavaScript code can access, meaning that JavaScript can only access content under the same domain as the document containing it.
The so-called homology refers to the same domain name, protocol, and port.
6.1 Non-strict homologous strategy
The same-origin policy can cause problems for sites that use multiple subdomains, such as a.home.com to access b.home.com or access C.sz.home.com's domain name.
Limitations of the same-origin policy.
To solve this problem, you can use the Document.domain property, which by default is the host name of the server that loads the document. You can set this property but use a string
Must have a valid domain prefix or itself. The properties of domain must have a point "." You cannot set up such as COM or CN. For example, the above a.home.com can be set to home.com,c.sz.home.com
Can be set to sz.home.com or home.com.
When we set up a.home.com, b.home.com, c.sz.home.com domain for home.com this time three can communicate data.
6.2 Non-strict homologous strategy the second item
This standard has been standardized, and the draft standard extends HTTP with the new Origin request header and the new Access-control-allow-origin response header. It allows the server to explicitly list the source. or use wildcard characters to match all sources
To request a file.
6.3 Non-strict homologous strategy the third item
Cross-document messages, allowing scripts from one document to pass text messages to scripts in another document, regardless of the source of the script. Call the Window.postmessage () method
The message can be delivered asynchronously.

JavaScript in Web browser