Question

Say I have a web component that uses jQuery and I want to distribute it as a packaged component.

I need a way to ensure that the jQuery library is available on or after the page loads, but I also want to check that the containing html page, or another unknown component that may reference jQuery hasn’t already added the library to the page.

At the moment the best example I’ve seen is this

http://www.squidoo.com/load-jQuery-dynamically

It would need a little tweaking, but I was wondering if there were any other best practices.

Answer 1

You can use two approaches to solve this.

1. Just use jQuery’s noConflict() mode this way you can always load your jQuery and the worst that could happen is that jQuery gets loaded twice but as you use noConflict() mode no problems will arise because of that.

2. Or you simply check like this

Code to check

if (typeof($) !== "undefined" && typeof($.fn) !== "undefined" && typeof($.fn.jquery) !== "undefined")
  // don't do anything jQuery already loaded
  // or check if the version included is "new" enough
  // hint: $.fn.jquery --> version number of jQuery
  // if jQuery too old load your version with noConflict mode
else
  //load your jQuery (e.g. insert programmatically a `script` tag)