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 es 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','.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.

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 es 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./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.

• javascript
• html
• optimization

• 9 Is it really true that only 23% of the 83 other questions you've asked have received acceptable answers? – T.J. Crowder Commented Jan 12, 2012 at 22:17
• 3 Just because the css/javascript is downloaded doesn't mean that it is executed right away. That's what methods/classes are for. Also, if you are going to use ajax, use jQuery – Darcy Commented Jan 12, 2012 at 22:17
• 1 Here is a unique way, but definitely not practical for normal usage blog.nihilogic.dk/2008/05/pression-using-canvas-and-png.html – qw3n Commented Jan 12, 2012 at 22:18
• 2 Paul: The big question here is why? What's your end goal? If we know your end goal, we can help you better. – T.J. Crowder Commented Jan 12, 2012 at 22:20
• 1 @DavidNguyen - Yes. All I'm saying is that just because those files are downloaded, they don't have to be applied right away. For example you can use javascript to add css classes to html elements. The same thing applies to javascript. You can download the js file but that doesn't mean all of your functions get executed. – Darcy Commented Jan 12, 2012 at 22:21

4 Answers 4

Just found out one more option to load script/css asynchronously (without conflicting to SOP) - is to use <object> tag:

<object data="http://podlipensky./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 your script simplty defines a function then it can be executed without actually running anything. Of course, this would require collaboration from both sides ala JSONP

//jsonp
var result = {/*...*/};

//missingnonp
var f = function(){ /**/ };

Assuming you control the server that delivers the page, into which you want to load the JS in question, the easiest way is to submit the URL via AJAX to your server, load it from there (e.g. via PHP file_get_contents($url);) and get it back as a result of the AJAX call.