Loading jQuery if not loaded - failed approach

Question

This is what I have in :

<script src="myscript.js" type="text/javascript"></script> <script type="text/javascript">testfunction("hello");</script>

Inside myscript.js:

if(!window.jQuery) { var script = document.createElement('script'); script.type = "text/javascript"; script.src = 'jquery-1.9.0.min.js'; document.getElementsByTagName('head')[0].appendChild(script); } function testfunction(str) { $(document).ready(function () { alert(str); }); }

Of course jQuery is not needed for the current testfunction, but it will be needed. Using this approach, jQuery is downloaded but NOT loaded to the browser when calling to testfunction() (Uncaught ReferenceError: $ is not defined).

What I could do is to load jQuery in a different script before my JS is loaded. In that case, it will work, but I would have three different scripts and that seems to be not elegant in my honest opinion.

Is there any other way to achieve this?

Thanks!

Just add the script tag with jQuery first, then the scripts that depends on jQuery, and it should work out of the box without any trickery ? — adeneo
– adeneo, Commented Mar 5, 2013 at 17:21
Just add the script the "normal" way. It's much more elegant than any attempt at loading it dynamically. — JJJ
– JJJ, Commented Mar 5, 2013 at 17:22
I don't want to load jQuery twice for the user (this is a JS embedded into another webpage, which is out of control for me, and that's why I'm checking if the webpage has forced the user to load jQuery already). — Jonhas
– Jonhas, Commented Mar 5, 2013 at 17:24

Community · Accepted Answer · 2017-05-23 12:21:31Z

3

You might want to try looking at this answer. It may not be waiting until jQuery is fully loaded.

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Mar 5, 2013 at 17:25

RenegadeMatrix

1413 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Christophe · Accepted Answer · 2013-03-05 17:46:03Z

With your code, the script will be loaded asynchronously. You need to add to the script tag an onload event that will trigger the parts that are dependent on jQuery.

If you want the script to be loaded in a synchronous way, use document.write:

window.jQuery||document.write(unescape("%3Cscript src='"+jQueryURL+"' type='text/javascript'%3E%3C/script%3E"));

The document.write technique is very common, just keep in mind that you cannot use it after your document has loaded (or else it will overwrite the whole page).

If you want to use dynamic loading on a larger scale, look at existing loader or AMD libraries.

Collectives™ on Stack Overflow

Loading jQuery if not loaded - failed approach

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related