Include external <script> and prevent loading jQuery multiple times

Question

I have to include a script from an external site into my site.

<script src='http://widgets.something.de/clientidblablabla?parameters=2324' type='text/javascript'></script>

Too bad, that with that script they also include jQuery 1.4.1. As I am using jQuery 1.8.3 so far some of my scripts break.

Is there a way to prevent loading an external jQuery file? I could for example use the url http://widgets.something.de/resources/jquery-1.4.1.js and block it?

Although this script is quite huge, but only needed on desktop computers. How can I implement this <script src=""> tag into an if($(window).width() > 768px) { // fire script };

kosmos · Accepted Answer · 2015-07-03 08:11:36Z

2

I think you can simply use another alias to load your jquery and let the plugin to use the common alias $.

The usually is to load all plugins and use them when you need. So if($(window).width() > 768) { // fire script } sounds well. Another way is using jQuery getScript() method, which allows you to load scripts asynchronously:

(function(j){

    if( $(window).width() > 768 ){
        j.getScript('http://widgets.something.de/clientidblablabla?parameters=2324', function(){
            // script loaded, you can play with it from here
        });
    }
})(jQuery);

Edit:

I made an example (jsFiddle) to explain it better.

(function(j213){

    // right now j213 and $ are aliases of the same version (2.1.3)
    j213('body').append( 'j213 = ' + j213().jquery + '<br/>' );
    $('body').append( '$ = ' + $().jquery + '<br/>' );

    j213.getScript('https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js', function(){

        // once another version of jQuery has been loaded, $ becomes an alias for 1.4.1 while j213 still holds for 2.1.3
        $('body').append( '$ = ' + $().jquery + '<br />' );    

        // you can also remove an alias
        delete $; // or $ = undefined; 
                  // or $ = null;
                  // or $ = 'whatever you want';

        j213('body').append(typeof($) + '<br />'); // returns undefined

        // or assign a new one easily
        $ = jQuery; // $ is now 1.4.1 - the last jQuery loaded
        $('body').append( '$ = ' + $().jquery + '<br />' );

        $ = j213; // $ is now 2.1.3
        $('body').append( '$ = ' + j213().jquery + '<br />' );

    });


})(jQuery);

edited Jul 3, 2015 at 8:11

answered Jul 1, 2015 at 8:14

kosmos

4,2881 gold badge21 silver badges38 bronze badges

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

6 Comments

marstato Over a year ago

Please tell me what i am missing... if you load both jQuery 1.4.1 and jQuery 1.8.1, which one is in the jQuery variable that you are passing into your function?

kosmos Over a year ago

In this case, to match OP request, $ is already assigned by the plugin, while we assign j to our own jQuery. You can also (un)set any jQuery alias using the $.noConflict() method (see doc).

marstato Over a year ago

The call to $.noConflict() is 100% neccessary for your code to work. If $.noConflict() is not called, the $ inside the function will also point to 1.8.3

kosmos Over a year ago

I disagree: jsfiddle.net/kmsdev/yptLha3s. Remember that the last loaded jQuery version persists @marstato

marstato Over a year ago

With that example it is clear to me. However, your first code will not work - which is what i criticized.

|

kosmos · Accepted Answer · 2015-07-01 22:03:16Z

1

If jQuery 1.4.1 is within the same file as the widget you are loading, i see no way of not loading it. But you can get rid of jQuery 1.4.1 in the browser by first loading that widget, then "removing" the $ and jQuery Variables (delete $; delete jQuery;) and then loading your jQuery 1.8.3.

You can conditionally load the file using document.write or by loading it via an XHR-Request and passing it to eval()

edited Jul 1, 2015 at 22:03

kosmos

4,2881 gold badge21 silver badges38 bronze badges

answered Jul 1, 2015 at 8:08

marstato

3652 silver badges13 bronze badges

4 Comments

dandavis Over a year ago

with that, plugins might hard-code $, which could refer to a different version of jq than the plugin was written for...

Marian Rick Over a year ago

the script loads a whole lot of html tags as well, includes a form etc. So I do have to load this script inside my body tag. If its important, I am using wordpress as cms.

marstato Over a year ago

@danavis: Using two jQuery Versions peacefully at the same time is impossible imo, therefore the widget will have to work with 1.8.3 if the TE can't work with 1.4.1; a test will tell, hopefully If you load the widget within your body, you will have to load jQuery 1.8.3 in the body, too, if you want to overwrite the 1.4.1

kosmos Over a year ago

I have to say that you can use as much jquery versions as you want without problems. The way is to assign each framework to a different alias. So you can use jq141('body').html('hello') and below jq183('body').html('byebye') and both work. See my answer to see it a little more detailed.

Collectives™ on Stack Overflow

Include external <script> and prevent loading jQuery multiple times

2 Answers 2

6 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related