标签云

微信群

扫码加入我们

WeChat QR Code


stackoverflow.com/questions/21294/…

2018年11月17日42分04秒

Daniel, I do not want to use an AJAX call.

2018年11月17日42分04秒

Why not declaring the imported file before the other one that requires it, simply using ordered script tags?

2018年11月17日42分04秒

Claudiu That wouldn't help to import anything, but it should work as well. If you have a JS file that depends of another JS file, just declare the script tags of the dependency files first, so the later will already have its dependencies loaded. If you have a situation where it isn't a possible approach, the answers here should be helpful.

2018年11月18日42分04秒

what is the practical advantage of doing this? either way the code base dependent on javascript file isn't going to load and start working in any case it is not loaded !

2018年11月18日42分04秒

Nope but somebody that uses something as advanced as Rhino or else wouldn't ask this question.

2018年11月17日42分04秒

Just to be complete, there is a third way: In certain solutions when you control both javascript files, you can just make 1 giant javascript file which combines the content of both files.

2018年11月18日42分04秒

Shouldn't "document.createElement("my_lovely_script.js");" in the example be "document.createElement("script")" ?

2018年11月18日42分04秒

How does eval open the door to hacks if it's your code that you're executing?

2018年11月17日42分04秒

Your answer requires some modification for IE (onreadystatechange event and the readyState property). Also, dynamic script loading does not benefit from the broswer's preload scanners. Recommend this HTML5Rocks article: html5rocks.com/en/tutorials/speed/script-loading

2018年11月18日42分04秒

+1 for citing the right way to do it :-) It would be even better if you included an example!

2018年11月17日42分04秒

Sean per your suggestion - I added a short example

2018年11月18日42分04秒

aaaidan: MattDmo's reason plus it relies on an external library which in return rely on the accepted answer.

2018年11月17日42分04秒

To overcome require.js the most latest would be angular js which is more stable and easy to use with along with other binding and rich HTML features.

2018年11月18日42分04秒

-1: Those abstractions -- "some_dependency" -- are really poor, with indexes adding to confusion. I struggle to understand what a working code example looks like. If author supplied working example, almost anybody would be able to tailor and generalize it to his needs.

2018年11月17日42分04秒

I am trying this method, but is not working for me, the element just does not appear in head tag.

2018年11月17日42分04秒

juanpastas - use jQuery.getScript, that way you don't have to worry about writing the plugin...

2018年11月18日42分04秒

Does this technique really block until the imported script is both loaded and executed?

2018年11月18日42分04秒

Hmm, according to this article, appending a script element to head will cause it to run asynchronously, unless the async is specifically set to false.

2018年11月17日42分04秒

Shouldn't the script variable have html entities encoded? If the link contains the ", code will break

2018年11月18日42分04秒

Good solution, the head include is async unfortunately, the ajax solution works.

2018年11月17日42分04秒

As someone else mentioned, requirejs.org does this and also has a pre-compiler that puts js files together so they load faster. You may want to check it out.

2018年11月18日42分04秒

Found I could do debug it by adding this directive at the bottom of the file for Chrome : // sourceURL=view_index.js

2018年11月18日42分04秒

unfortunatelly, async:false is now deprecated in jQuery. Might break in the future, so i'd avoid.

2018年11月18日42分04秒

katsh We are not using jqXHR objects here. Your quote doesn't seem to back up your previous comment stating that async: false supposedly is deprecated. It is not! As your quote states, only the jqXHR related stuff is.

2018年11月18日42分04秒

require/import on the jsfile has been way too long in the coming. (IMO).

2018年11月18日42分04秒

rwheadon yeah seems appalling that this isnt part of the language! How js people get anything done is beyond me! Im new to it and this seems the worst (of many) bits of madness

2018年11月17日42分04秒

jonny-leeds Even without built-in module-loading, JavaScript in the browser is flexible enough that we can implement a library like RequireJS for our module management.

2018年11月18日42分04秒

mid 2015- Still not implemented in any browsers, developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

2018年11月17日42分04秒

yeah you are right. now I'm starting to feel bad for this :(. Thouh, once implemented in all browsers this will be a great feature built in to javascript.

2018年11月17日42分04秒

It does work, but has serious issues because of the asynchonous loading.

2018年11月17日42分04秒

Um... which exactly?

2018年11月17日42分04秒

e-satis - Actually, this is an advantage, a sync script would be blocking. Horses for courses, but 9 times in 10 you want the non-blocking option.

2018年11月17日42分04秒

Svitlana - script elements created like this are async. Currently this could be viewed as exploiting a loophole so it might not be future proof, I've not seen anything in any standard which clarifies this.

2018年11月18日42分04秒

e-satis asynchronous is good because it wont freeze your page. Use callback to be notified when it's done js.onload = callback;

2018年11月17日42分04秒

... but is not supported by any browser to date, according to the compatibility table on the page you linked to.

2018年11月17日42分04秒

You can now write ES6 code and compile it with Babel.js (babeljs.io) to whatever your preferred current module system is (CommonJS/AMD/UMD): babeljs.io/docs/usage/modules

2018年11月17日42分04秒

Zero3 Apparently the new IE (Edge) is the only one

2018年11月18日42分04秒

is there a way to do this without ES6? Browser compatibility and those who don't have ES6 demands it.

2018年11月18日42分04秒

Should be useful to add script.onload = callback;

2018年11月18日42分04秒

SvitlanaMaksymchuk so, if I don't use var, the variable will be global ?

2018年11月18日42分04秒

FranciscoCorrales yes.

2018年11月18日42分04秒

It ends up in global with or without the var :)

2018年11月17日42分04秒

This fails if the page has no head.

2018年11月18日42分04秒

Excellent function! Loads the JavaScript before any additional JS is written after the body. Very important when loading multiple scripts.

2018年11月17日42分04秒

heinob : What can I do to get it working for cross-domain? (loading script from http://web.archive.org/web/20140905044059/http://www.howtocreate.co.uk/operaStuff/userjs/aagmfunctions.js)

2018年11月18日42分04秒

user2284570: If you are the owner of the foreign domain: set `allow-origin' header in server answer. If you are'nt the owner: nothing. Sorry! That is cross-origin-policy.

2018年11月18日42分04秒

user2284570: I understand your comment in that way, that you are not the owner of the domain from which you want to load the script. In that case you only can load a script via an inserted <script> tag, not via XMLHttpRequest.

2018年11月18日42分04秒

For those planning to use this in Firefox (say for imacros scripting), add this line to the top of the file: const XMLHttpRequest = Components.Constructor("mozilla.org/xmlextras/xmlhttprequest;1");

2018年11月17日42分04秒

jrburke wrote this as RequireJS. Github: requirejs.org/docs/requirements.html

2018年11月18日42分04秒

Isn't this putting the loaded script outside of the scope where require() is called? Seems like eval() is the only way to do it within scope. Or is there another way?

2018年11月17日42分04秒

Damn nice! Some of the methods here work too, but under a dynamic setting this works the best.

2018年11月18日42分04秒

wouldn't document.write remove everything else?

2018年11月17日42分04秒

Since this post I came up with much better solution - CommonJS module compiler - github.com/dsheiko/cjsc So you can simply write CommonJs or NodeJs modules and access each other yet keeping them in isolated scopes. The benefits: No need of multiple HTTP requests that affect performance You don't need manually wrapping you module code - it is responsibility of the compiler (so better source code readability) You don't need any external libraries It is compatible with UMD- and NodeJs modules (e.g. you can address jQuery, Backbone as modules without touching their code)

2018年11月17日42分04秒

Sounds like the point is to keep this all in javascript in the front end

2018年11月18日42分04秒

Thanks for reminding this. You can also have PHP write <script> tags in your HTML header, so that the js files you need (and only those) will be loaded.

2018年11月18日42分04秒

the eval is what's wrong with it. From Crockford, "eval is evil. The eval function is the most misused feature of JavaScript. Avoid it. eval has aliases. Do not use the Function constructor. Do not pass strings to setTimeout or setInterval." If you haven't read his "JavaScript: The Good Parts" then go out and do it right now. You will not regret it.

2018年11月17日42分04秒

MattDMo "Someone said it was bad" isn't really an argument.

2018年11月18日42分04秒

emodendroket I take it you're not aware of who Douglas Crockford is.

2018年11月17日42分04秒

MattDMo I'm fully aware of who he is, but he's a human being, not a god.

2018年11月18日42分04秒

tggagne : What can I do to get it working for cross-domain? (loading script from http://web.archive.org/web/20140905044059/http://www.howtocreate.co.uk/operaStuff/userjs/aagmfunctions.js)

2018年11月17日42分04秒

Browserify is far more popular than Sprockets.

2018年11月18日42分04秒

The problem with this answer is that it is not something like import. You need an HTML file to get stuff from one js file to another.

2018年11月17日42分04秒

Agreed. What is your use case?

2018年11月17日42分04秒

This would be awesome if it were a node module.

2018年11月18日42分04秒

b01 Sounds like a challenge ;) If only I had the time... perhaps someone else does?

2018年11月17日42分04秒

This is the simplest code, but will fail in some edge cases when body doesn't yet exist or can't be modified. Also, it helps to explain answers.

2018年11月18日42分04秒

Nice. Good solution.

2018年11月17日42分04秒

Concise and only needs ES5, and elegantly avoids formally having a call back. Thank you Dmitry!

2018年11月17日42分04秒

Wow, works in the browser without server. pi.js = simply var pi = 3.14 . call the loadJS() function via loadJs("pi.js").then(function(){ console.log(pi); });

2018年11月17日42分04秒

will, your solution looks much cleaner than mine and I'm worried I might have some errors if I use mine, as it makes use of .append(). So to use this, you can just call that function once for each plugin file you wish to include?

2018年11月17日42分04秒

This is exactly what the currently accepted answer states: just not enough.

2018年11月18日42分04秒

The main difference is that if there is a missing dependency it will add the script tag for the dependency, then also add the script tag for the calling file, and throw an error which halts execution. This causes the scripts to be processed and ran in the correct order and removes the need for callbacks. So the dependent script will be loaded and executed before the calling script while supporting nesting.

2018年11月17日42分04秒

The jQuery docs say that the callback passed to getScript will run "once the script has been loaded but not necessarily executed".

2018年11月17日42分04秒