Dynamic Loading of JavaScript and CSS page 1/2 compatible with multiple browsers

Before introducing the implementation of ensure, let's take a look at its functions:

Ensure ({
HTML: "popup.html ",
Javascript: "Popup. js ",
CSS: "popup.css"
}, Function (){
Popup. Show ("Hello World ");
}
);
In this sectionCodeIn the middle, ensurewill first ensure that the three files popup.html?popup.js=popup.css are loaded. If they have not been loaded, ensure will dynamically load them. If they have already been loaded, ensure will not load them again. After these three files are loaded, ensure will call the following anonymous function, that is, execute Popup. Show ("Hello World ");.

Next, let's take a look at how ensure dynamically loads JavaScript and CSS.

Load Javascript
In ensure, loading javascript can be executed in two cases: safari and non-safari.

Load Javascript in IE, Firefox, and opera
To load Javascript in these three browsers, you only need to create a script element, point SRC to the URL to be loaded, and then append the script element to the head element. This task is completed in httplibrary. createscripttag. However, we should not only load JavaScript, but also know when it will be loaded. This can be achieved through the onload event or onreadystatechange event of the script element.

Load Javascript in Safari
Because Safari 2 does not support onload or onreadystatechange, you can only manually read the URL through xhr, and then manually run the eval code, this imposes a limit that only JavaScript files in the current domain can be loaded. In ensure, Eval works through httplibrary. globaleval. To make the JavaScript code eval in the global context, ensure still uses the method for creating the script element and places the eval Javascript in it, finally, append the script element to the head element.

Careful people must ask why httplibrary. globaleval () should be designed like this, rather than directly using window. eval or eval. Call. This is because, window. eval and eval. call cannot achieve the same effect as loading JavaScript code with the script tag in IE6. The eval of the two methods is still not executed in the global context in IE6. You will find some related discussions. For example, jqueryhas used window.exe cscript () to complete this task. However, we finally found that adding script elements is the best cross-browser solution, so jquery and ensure are implemented in this way.

Load CSS
Loading CSS is much easier than loading JavaScript, and the method is similar: directly add the link element to the head element. This is exactly the work done by loadcss.

In fact, ensure does not ensure that the CSS is loaded before execution. This is probably because all browsers can automatically apply the CSS to the page after loading. Therefore, Omar Al zabir considers that the loading sequence of CSS is irrelevant, however, if the CSS loading speed is too slow, the display effect will still be affected.

Load CSS in IE6
This time, IE6, rather than safari, should be taken special care. When adding a link element to the head element in IE6, it must be completed in the context of the window. Therefore, the function for adding a link switches the context through call.

conclusion
In fact, loading JavaScript and CSS dynamically is not difficult. In most cases, you only need to append the corresponding child element to the head element, only the old browsers safari2 and IE6 need special care.
official address
ensure