What are the ways to load JavaScript or CSS without executing them?

Question

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 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, Jan 12 '12 at 22:17
Is it really true that only 23% of the 83 other questions you've asked have received acceptable answers? — T.J. Crowder, Jan 12 '12 at 22:17
Here is a unique way, but definitely not practical for normal usage http://blog.nihilogic.dk/2008/05/compression-using-canvas-and-png.html — qw3n, Jan 12 '12 at 22:18
@Darcy: If you add a `script` element referencing a JavaScript file, the contents of that file **are** evaluated and the results added to the global execution context. (CSS isn't "executed" at all, but rather *applied*.) I can't immediately see why you'd want to retrieve JavaSript without running it, but... — T.J. Crowder, Jan 12 '12 at 22:18
um...not sure about the css part @Darcy, isn't css processed it is declared? — David Nguyen, Jan 12 '12 at 22:18
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, Jan 12 '12 at 22:20
@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, Jan 12 '12 at 22:21
@Darcy: your comment doesn't make sense. If you use the script tag, everything is executed right away. Of course, if your script doesn't call any of your defined functions, then the functions won't do anything until some other piece of code calls it. — Ruan Mendes, Jan 12 '12 at 22:32
@Darcy - jQuery is a good library, but not a panacea. I understand your concern about real-world appliance of such approach, but in my case this is the requirement. — Pavel Podlipensky, Jan 12 '12 at 22:56
@PaulPodlipensky: Gah! Looked at the number of answers instead. Sorry. The question still holds, but with less weight. — T.J. Crowder, Jan 12 '12 at 22:57
@qw3n - thanks for the link, it really helpful, not sure about the performance of such approach, but definitely it worth to try. — Pavel Podlipensky, Jan 12 '12 at 22:58
@qw3n looks like the performance isn't good: reading and parsing the 69 KB PNG compressed from the 255 KB code of javascript, takes about 5-6 seconds... — Pavel Podlipensky, Jan 12 '12 at 23:06
related: http://stackoverflow.com/questions/11102625/preload-script-without-execute/42487099#42487099 — mathheadinclouds, Feb 27 '17 at 13:52

score 4 · Answer 1 · answered Jan 13 '12 at 05:57

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.com/examples/dynamicscript/hey.js" />

Found this approach here. So I'm just sharing with you my findings, hope it will be useful.

answered Jan 13 '12 at 05:57

Pavel Podlipensky

8,201
5
42
53

This really is more reliable than an iframe because of the issues mentioned in the answer by @TJCrowder with the iframe running the script. Not compatible with IE<=8, but the linked post explains a different approach for IE. – Kevin Borders Aug 14 '13 at 21:32

T.J. Crowder · Accepted Answer · 2012-01-12T23:32:08.863

1

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.

edited Jan 12 '12 at 23:32

answered Jan 12 '12 at 22:20

T.J. Crowder

1,031,962
187
1,923
1,875

Well, it doesn't matter how exactly to load scripts into iframe, but anyway thanks... – Pavel Podlipensky Jan 12 '12 at 23:24
@PaulPodlipensky: Not following you. It matters a great deal if you don't want the script executed immediately upon load, which is what your question seems to ask. There's a **lot** a script can do from within an `iframe` if you run it (like take the browser somewhere else entirely). If you want to *load* it without running it, it matters how you do that, surely? :-) – T.J. Crowder Jan 12 '12 at 23:29
I meant that if script loaded into iframe, it doesn't really matters if it executes or not - because it can't do a lot in iframe and the context is the iframe, not my page. So both my and yours approaches are viable. I'm just wondering if there is something else we can find out in this field... – Pavel Podlipensky Jan 12 '12 at 23:47
@PaulPodlipensky: I don't think there is. :-) – T.J. Crowder Jan 12 '12 at 23:52
Crowser just in case - it wasn't me ;) I did upvote from the very beginning... Thanks again for your contribution. – Pavel Podlipensky Jan 12 '12 at 23:55
@PaulPodlipensky: Thanks, didn't think it was (and not sweating it in any case). :-) Answer's a bit feeble, really, given it is still subject to the SOP (just at a different stage than standard ajax). – T.J. Crowder Jan 12 '12 at 23:56

score 0 · Answer 3 · answered Jan 12 '12 at 22:26

0

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(){ /**/ };

answered Jan 12 '12 at 22:26

hugomg

68,213
24
160
246

score 0 · Answer 4 · answered Jan 12 '12 at 22:30

0

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.

answered Jan 12 '12 at 22:30

Eugen Rieck

64,175
10
70
92

The OP covered this in the question. The question is *"Are there any **other** ways to download and not execute the script?"* (my emphasis). – T.J. Crowder Jan 12 '12 at 22:50
@T.J.Crowder I can't see any part of the OQ referring to a SERVER side processing ... could you be a bit more specific? – Eugen Rieck Jan 12 '12 at 22:52
The OP talks about using Ajax to retrieve the contents, and talks about the issues around that (the SOP, CORS, etc.). If you mean using his/her own server as a proxy, the answer is unclear about that. – T.J. Crowder Jan 12 '12 at 22:56
@T.J.Crowder My answer is just that: A way to get around the SOP problem by server-sided processing. This is fundamentally different to loading it directly from the page. I am not suggesting a proxy setup, but a specialized AJAX call. – Eugen Rieck Jan 12 '12 at 23:03
You need to clarify that. (And that's what a proxy is.) – T.J. Crowder Jan 12 '12 at 23:08

What are the ways to load JavaScript or CSS without executing them?

4 Answers4

Linked