How to load jQuery in isolation?

Question

I'm needing to load JS code on many different websites with different developer's code, and I want to load in jQuery into their site to manipulate the DOM. The only problem is they may or may not have jQuery already loaded on the page, and I don't want to conflict with that.

A lot of answers deal with checking if jQuery is already loaded on the page, or adding callbacks to when the entire dom is loaded. I don't want to go that approach, instead I want to know if I can directly load jQuery in as it's own variable which is completely isolated, so that I can use it directly without conflicting with whatever is outside.

This includes the fact that they may be using old, specific versions of jQuery that I can't go overwriting with my newer version. I really just want a complete isolated instance.

(function() {
  // load jQuery in isolation and call it "xxx"
  var divs = xxx('body').find('div');
})();

I also need to do this FROM JS itself, not by editing html (so I can't add jquery script tag in their HTML, i want to load it asyncronously with a callback)

Maybe [jQuery.noConflict()](https://api.jquery.com/jQuery.noConflict/)? — Alon Eitan, Nov 16 '19 at 20:15
I thought that, but I'm confused how to make this work (where exactly I add no conflict). It seems weird adding in jQuery over top of their version, as I don't want to clobber theirs. So I was asking here to be 100% sure — Tallboy, Nov 16 '19 at 20:16
He addresses my concern in this post: "We have a similar problem. We can not control how the primary owner of the page uses jquery or what version they have. Plus we would like to include our own version of jquery and jquery libraries/plugins and may need to do it later in the page load than the page owner does. It seems that the noConflict must be called on the first loading of jquery which in our case can't happen since we don't control the first loading of jquery" — Tallboy, Nov 16 '19 at 20:17
https://forum.jquery.com/topic/multiple-versions-of-jquery-on-the-same-page — Tallboy, Nov 16 '19 at 20:18
How are you adding jQuery to other people's sites? You can add a script element to the DOM using JavaScript easily enough... — Heretic Monkey, Nov 16 '19 at 20:31
Also, are you sure you need jQuery? The DOM has matured quite a bit over the years and through judicious use of `querySelectorAll` and similar constructs, a lot of what jQuery provides is available in the browser... — Heretic Monkey, Nov 16 '19 at 20:31
After looking at how to do ajax requests, it gave me a severe headache. @HereticMonkey how would you handle ajax in 2019 without leaving out IE, etc? — Tallboy, Nov 16 '19 at 20:43
Depends on the version of IE. IE11? [Axios](https://github.com/axios/axios). Otherwise, [it's not that hard to write a promise-based wrapper to `XMLHttpRequest`](https://stackoverflow.com/a/30008115/215552). :) — Heretic Monkey, Nov 16 '19 at 20:50

score 0 · Answer 1 · edited Nov 16 '19 at 21:22

0

You could do this ...

if(!window.jQuery)
{
    // load jquery here
}

Before you load your script. Declare no conflict. Then you can load your script.

After that is loaded, do ...

var myJq = jQuery.noConflict();

You can access your library using myJq.

edited Nov 16 '19 at 21:22

Heretic Monkey

10,498
6
45
102

answered Nov 16 '19 at 20:24

Benjamin James Kippax

319
1
12

I already addressed that in my question, I don't want to take that approach because t doesn't account for multiple versions of jQuery loading over top of each other – Tallboy Nov 16 '19 at 20:49

score 0 · Accepted Answer · answered Nov 17 '19 at 02:55

You might try this approach:

(function(xxx) { // add xxx as a paramters
  var divs = xxx('body').find('div');
})(jQuery); // Add jQuery as a value here.

As mentioned in other answers. You can check if jQuery is loaded using window.jQuery. And to check the version number you can use jQuery.fn.jquery.

I still however not sure what you mean by isolation. jQuery loads into window object which is global.

You might want to use another library like Zepto which has similar syntax to jQuery, or you can use vanilla JavaScript. See this link http://youmightnotneedjquery.com/

How to load jQuery in isolation?

2 Answers2