I'm aware of dynamic script/css loading by adding <style>
or <link>
tags to head or body of the page, but then it will be executed by browser once downloaded. I was thinking about other ways to download but do not execute javascript/css code. First what comes in my mind was XMLHttpRequest:
//simple execution received script
var executeScript = function(code){
eval(code);
};
//create XMLHttpRequest in cross-browser manner
var xhr = createXMLHTTPObject();
//check whether file is loaded
var checkStatus = function(){
if(xhr.readyState == 4){
if(xhr.status >= 200 && xhr.status < 300 || xhr == 304){
executeScript(xhr.responseText);
}
else {//error
}
}
};
//do request
xhr.open('get','http://podlipensky.com/examples/dynamicscript/hey.js', true);
xhr.onreadystatechange = checkStatus;
xhr.send(null);
But in this case we're limited with scripts from the same domain because of the Same Origin Policy (although we can try workaround it with CORS)
Another approach, I was thinking about is to add dynamically iframe
to the page and then add script
tag to the iframe
, so the script will be executed once it downloaded, but it happens in context of another page - iframe
.
Are there any other ways to download and not execute the script?
UPDATE:
One of the reasons why it would be useful to download, but not execute javascript/css is to pre-load third-party libraries, but use them only on demand.
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…