Injecting JQuery Cross-Domain

Question

Hello,

Is it safe to inject JQuery's script using JsonP?

The installation of my web application is - adding a script to a customer's website (like google analytics). I was thinking of using JQuery on the customer's website, as part of my own injected script.

I was wondering, if there is some kind of risk? The application needs to support any kind of website.

Thank you Yaron

Answer 1

If you're just after a reference to the library, why wouldn't you just link to the API hosted on Google Code?

Answer 2

You can add jQuery to a website by simply adding a <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.js" /> element.

However, make sure to call jQuery.noConflict() in case they use a different $ keyword.

Answer 3

Its hard to tell what you are doing with your library, but it seems you are building some type of widget for use on multiple sites.

From here down has been updated after an enlightening comment from @K Prime caused me research exactly how you could include two copies of jQuery if needed:

It is generally bad to use jQuery if you are building a widget that will live on a site outside your control, and will be added to the site with a "copy this embed code and paste onto your site" type of functionality. (Of course jQuery widgets and plugins abound, but these are normally chosen and installed/implemented by developers not a generic "copy-n-paste" widget type implementation)

Probably the biggest reason (after realizing you can run two copies of jQuery on the same page) is the file size increase. Whether it is warranted will depend on your particular needs and function. Simple small widget = straight JS. Complex website front-end extension, then it probably is worth the file-size increase.

To include it properly (so you don't run into conflicts on their site) follow a workflow that looks something like this:

1. Dynamically add jQuery to their page using the Google APIs as mentioned on the other answers here.
2. Run var mywidget_jQuery = $.noConflict( true ); which will restore the original meaning of $ and restore the original meaning of window.jQuery.
3. Dynamically add your script file, but be sure to wrap the entire thing in a self executing anonymous function like this:

JS

(function($){
    ... Your code here ...
})(mywidget_jQuery);

Now, you can safely use $ inside your special function and all the jQuery features you want without issue.

Extra credit You could wrap steps 1 and 2 in an if statement that tests if window.jQuery is defined and if it, test if jQuery.fn.version is high enough to run your code. If either test fails, then run steps 1 and 2. If it passes, however, then just run var mywidget_jQuery = window.jQuery so the script you include in step 3 will still run.