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.
Just found out one more option to load script/css asynchronously (without conflicting to SOP) - is to use <object>
tag:
<object data="http://podlipensky.com/examples/dynamicscript/hey.js" />
Found this approach here. So I'm just sharing with you my findings, hope it will be useful.
You can also use an iframe
and use the script/css URL as the src
of the frame (so it isn't evaluated/applied at all), although you'd want to be sure in that case that the JavaScript/CSS was delivered with Content-Type text/plain
to avoid unfortunate things happening with <
characters and such. Although you should run into SOP issues with this approach as well, on a decent browser, if the iframe
src
is from a different origin.
Other than that, I think you largely have it covered with the options you list.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With