Downloaded 15 times
![XHR + injection
var xhrObj = new XMLHttpRequest();
xhrObj.onreadystatechange =
function() {
if ( xhrObj.readyState == 4 ) {
var scriptElem = document.createElement('script');
var headElem = document.getElementsByTagName('head')[0];
headElem.appendChild(scriptElem);
scriptElem.text = xhrObj.responseText;
}
};
xhrObj.open('GET', 'A.js', true);
xhrObj.send('');](https://image.slidesharecdn.com/javascriptdynamicloading-110421032635-phpapp02/85/JavaScript-Dynamic-Loading-22-320.jpg)
![dom element
var scriptElem = document.createElement('script');
scriptElem.type= 'text/javascript';
scriptElem.src = 'http://anydomain.com/A.js';
var headElem = document.getElementsByTagName('head')[0];
headElem.appendChild(scriptElem);](https://image.slidesharecdn.com/javascriptdynamicloading-110421032635-phpapp02/85/JavaScript-Dynamic-Loading-23-320.jpg)
![dom element (not execute)
var scriptElem = document.createElement('script');
scriptElem.type= 'text/html';
scriptElem.src = 'http://anydomain.com/A.js';
var headElem = document.getElementsByTagName('head')[0];
headElem.appendChild(scriptElem);](https://image.slidesharecdn.com/javascriptdynamicloading-110421032635-phpapp02/85/JavaScript-Dynamic-Loading-24-320.jpg)
JavaScript Dynamic Loading
- 1.
- 3.
- 4. 0 0.1 1 Jakob Nielsen 10
- 5. 0 0.1 1 Jakob Nielsen 10
- 7.
- 8.
- 10.
- 12. Heavy loading Quick response
- 13.
- 14.
- 18. <html> <body> : <script src=”jQuery.js”></script> <script src=”jq-plugin-x.js”></script> <script src=”jq-plugin-y.js”></script> <script src=”prototype.js”></script> <script src=”pt-plugin-x.js”></script> <script src=”pt-plugin-y.js”></script> <script src=”init-rendering.js”> <script src=”facebook-plugin.js”> <script src=”twitter-plugin.js”> </body> </html>
- 19. <html> <head> <script src=”loader.js”></script> <script> document.onload = function() { /* do loading */ }; </script> </head> </html>
- 20.
- 21. XHR + eval varxhrObj = new XMLHttpRequest(); xhrObj.onreadystatechange = function() { if ( xhrObj.readyState == 4 ) { eval(xhrObj.responseText); } }; xhrObj.open('GET', 'A.js', true); xhrObj.send('');
- 22. XHR + injection varxhrObj = new XMLHttpRequest(); xhrObj.onreadystatechange = function() { if ( xhrObj.readyState == 4 ) { var scriptElem = document.createElement('script'); var headElem = document.getElementsByTagName('head')[0]; headElem.appendChild(scriptElem); scriptElem.text = xhrObj.responseText; } }; xhrObj.open('GET', 'A.js', true); xhrObj.send('');
- 23. dom element var scriptElem= document.createElement('script'); scriptElem.type= 'text/javascript'; scriptElem.src = 'http://anydomain.com/A.js'; var headElem = document.getElementsByTagName('head')[0]; headElem.appendChild(scriptElem);
- 24. dom element (notexecute) var scriptElem = document.createElement('script'); scriptElem.type= 'text/html'; scriptElem.src = 'http://anydomain.com/A.js'; var headElem = document.getElementsByTagName('head')[0]; headElem.appendChild(scriptElem);
- 27. XHR var xhrObj =new XMLHttpRequest(); xhrObj.onreadystatechange = function() { if ( xhrObj.readyState == 4 ) { /* eval or injection */ /* JavaScript onload */ } }; xhrObj.open('GET', 'A.js', true); xhrObj.send('');
- 28. dom element var scriptElem= document.createElement('script'); scriptElem.src = 'http://anydomain.com/A.js'; scriptElem.onload = function() { /* JavaScript onload */ }; document.getElementsByTagName('head').appendChild(scriptElem);
- 29. with IE :) varscriptElem = document.createElement('script'); scriptElem.src = 'http://anydomain.com/A.js'; scriptElem.onload = function() { if ( !scriptElem.onloadDone ) { scriptElem.onloadDone = true; /* JavaScript onload */ } }; scriptElem.onreadystatechange = function() { /* for IE */ if ( xhrObj.readyState == 4 || xhrObj.readyState == 2 ) { if ( !scriptElem.onloadDone ) { scriptElem.onloadDone = true; /* JavaScript onload */ } } }; document.getElementsByTagName('head').appendChild(scriptElem);
- 31.
- 36. The three thingsyou should know
- 37.
- 39.
- 41.
- 43.
- 44.
- 46.
- 50.