JavaScript in a Web browser (ii)

1. Client Javascript Time Line:

1) The Web browser creates the Document object and begins parsing the web pages, parsing the HTML elements and their textual content, and adding the element object and the Text node into the document. At this stage the Documen.readystate property value is "loading"

    2)   parser encountered no async and defer< Span style= "font-family: ' The song Body '; The <script> element when it adds these elements to the document, and then executes inline or external scripts. These scripts are executed synchronously, and the parser pauses when the script is downloaded (if needed) and executed. This allows the script to insert text into the input stream using documen.wrte () <script> elements and their previous document contents.

3) When the parser encounters the <script> element with the Async attribute set , it starts downloading the script text and continues parsing the document. The script executes as soon as it is downloaded, but the parser does not stop waiting for it to be downloaded. Asynchronous scripting prohibits the use of the document.write () method. They can see their own <script> elements and all the document elements that precede it, and might or simply not be able to access other document content.

4) When the document finishes parsing,the Document.readystate property becomes "interactive".

5) all scripts that have defer attributes are executed in the order in which they appear in the document. Asynchronous scripts may also be executed at this time. The deferred script can access the complete document tree and prohibits the use of the document.write () method.

6) The browser triggers the domcontentloaded event on the Document object . This marks the execution of the program from the synchronous script execution phase to the event-driven phase. Note, however, that there may be asynchronous scripts that do not complete

7) at this point, the document has been fully parsed, but the browser may still be waiting for other content to load, slices. When all these contents are loaded and all asynchronous scripts are loaded and executed,the Document.readystate property changes to "complete" andthe Web browser triggers the window the load time on the object .

8) from now on, asynchronous events are invoked to respond asynchronously to user input events, network events, timer expiration, and so on.

This is an ideal timeline, but all browsers don't have all the details to support it. All browsers generally support the load event, triggering it, which is the most common technology that determines the document's full load and can be manipulated. domcontentloaded time is triggered at load time, and all browsers currently support this event.

2. Client Javascript compatibility and interactivity issues can be summarized in the following three categories:

1) Evolution: The WEB platform has been evolving and evolving. A standard specification advocates a new feature or API. If the feature looks useful, the browser developer implements it. If enough developers are satisfied to implement it, developers start experimenting with this feature, and this feature is widely used in WEB platforms. Sometimes browser developers and Web developers lead the designation of this standard specification and develop the official version, which has become a fact standard. In another case, the new feature has been added to the Web , and the new browser supports it but the old browser does not support it. Web developers must weigh a large number of users with older browsers and a small number of users using modern browsers.

2) not implemented: Sometimes, browser developers can be useful to a particular feature to realize the difference in opinion. Some developers have implemented this feature, while others have not implemented it. Some modern browsers do not implement the functionality in the old browser, this is fine, but the same implementation of a function in different browsers, for example,IE does not support <canvas> elements, Although all other browsers have implemented it. A worse example is Microsoft's decision not to implement the Dom Level 2 Event specification, which defines AddEventListener() and related methods. The specification was standardized 10 years ago and has been supported by other browser vendors for a long time.

3) bug: Each browser has a bug anddoes not implement all client Javascript APIs exactly as per the specification . Sometimes it's a bad job to write Javascript programs that are compatible with each browser , and it's important to study the various bugs in existing browsers.

3. On the client the way to detect browser types and versions in Javascript is to use the Navigator object, which determines that the current browser's vendor and version of the code is often called a browser sniffer or a client sniffer. The sniffer can also be done on the server side, andthe WEB server can selectively return specific JavaScript code to the client based on the user_agent header .

4.IE Condition Comment:

1) Introduction:

The conditional annotation (conditionalcomments) in IE has excellent distinguishing ability to IE 's version and ie non ie, is the WEB the hack method commonly used in design .

conditional annotations can only be used for IE5 above.

If you have installed more than one IE, conditional comments will be the highest version of ie as the standard.

the basic structure of conditional annotations and Comments for HTML (<! – >) is the same. browsers outside of IE will therefore treat them as plain annotations and ignore them entirely.

2) IE will determine whether the content in the conditional comment is parsed as if the normal page content is parsed, based on the IF condition.

Gt:greater than, select the condition version above, do not include the conditional version

Lt:lessthan, select the following version of the condition version, not including the conditional version

Gte:greater than or Equal, select the condition version above, including the conditional version

Lte:less than or Equal, select the following version of the condition version, including the conditional version

! : Select all versions except the condition version, regardless of high or low

3) How to use conditional annotations

<!--[Ifie 5]> only IE5.5 visible <! [endif]-->

<!--[IFGT ie 5.5]> only IE 5.5 above visible <! [endif]-->

<!--[Iflt ie 5.5]> only IE 5.5 below visible <! [endif]-->

<!--[Ifgte IE 5.5]>ie 5.5 and above visible <! [endif]-->

<!--[Iflte IE 5.5]>ie 5.5 and the following visible <! [endif]-->

<!--[if! IE 5.5]> non- ie 5.5 ie visible <! [endif]-->

<!--[if! ie]><!--> you are not using Internet Explorer <!--<! [endif]-->

<!--[if IE 6]><!--> you are using InternetExplorer version 6 or a non- IE browser

<!--<! [endif]-->

5.javascript cannot do:

1) JavaScript does not have permissions to write or delete arbitrary files on client computers or to list any directory. This means that JavaScript programs cannot delete data or implant viruses.

2) client-side JavaScript does not have any common network capabilities

3) javascript programs can open a new browser window, but in order to prevent advertisers from abusing pop-ups, many browsers restrict this feature so that it can only be used in response to a user triggering an event with a mouse click.

4) JavaScript program can close its own open browser window, but does not allow it to close other windows without user confirmation

5) The Value property of the HTML FileUpload element is read-only. If you can set this property, the script can set it to any desired file name, causing the form to upload the contents of the specified file (such as the password file) to the server

6) The script cannot read the contents of a document loaded from a different server, unless this is the document that contains the script. Similarly, a script cannot register an event listener on a document from a different server. This prevents the script from stealing user input from other pages (for example, the click process of the keyboard that makes up a password entry). This restriction is called a homologous strategy.

2. Same-origin policy: the same-origin policy is a complete security restriction on what Web content JavaScript code can manipulate . This strategy usually works when a Web page uses multiple <iframe> elements or opens other browser windows. In this case, the same-origin policy is responsible for managing JavaScript code in Windows or forms , and interacting with other windows or frames. Specifically, a script can read only the properties of windows and documents that belong to the same source as the document.

the source of the document includes the Protocol, the host, and the URL port in which the document is loaded . documents that are loaded from different Web servers have different sources. Documents loaded by different ports on the same host have different sources. Use HTTP: protocol-loaded documents and documents loaded using the HTTPS protocol have different sources, even if they are from the same server.

The source of the document itself is not related to the same Origin policy, and is related to the source of the document that the script embeds. For example, suppose a script from host A is included in a Web page of host B (using the <script> tag's src attribute) . The source of this script is host B, and it has full access to the contents of the document containing it. If the script opens a new window and loads another document from host B , the script has full access to the content page of the document. However, if the script opens a third window and loads a document from host C (or from host a), the same-origin policy will work to prevent the script from accessing the document.

3. The same-Origin policy use case: can prevent the script to steal information, if there is no such restriction, malicious script (through the firewall into the security company intranet browser) may open an empty window, deceive the user to enter and use this window to browse the file online. A malicious script can read the contents of a window and send it back to its own server, which is prevented by the same-origin policy.

This article is from "Tiger Brother's Blog" blog, please be sure to keep this source http://7613577.blog.51cto.com/7603577/1570223

JavaScript in a Web browser (ii)