1

3rd party websites can place my script tag on their websites, like so on for example ExternalSite.html in the head section:

<script type="text/javascript">
(function () {
    var ttScript = document.createElement('script'); ttScript.async = true;
    ttScript.src = '//www.example.com/script/myscript.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ttScript);
})();
</script>

On my own server, in the file myscript.js I have this code:

$.ajax({
    url: "http://www.example.com/iplookup.php",
    data: null,
    type: 'GET',
    crossDomain: true,
    dataType: 'jsonp'
}).done(function (json) {
    self.ip = json;
});

But once a user visits the 3rd party site, on the first line here I get Uncaught ReferenceError: $ is not defined

Now this is probably because I don't reference jQuery on the 3rd party site, where I include the myscript.js file. The problem is that:

  1. I do not know if this 3rd party site even has jQuery running
  2. I don't know how to reference jQuery from myscript.js, also without possibly interfering with an existing jQuery reference on the 3rd party site
durron597
  • 31,968
  • 17
  • 99
  • 158
Adam
  • 6,041
  • 36
  • 120
  • 208
  • Instead of $.ajax use plain javascript - XMLHttpRequest is your friend :-) You will get several examples of XMLHttpRequest use on internet. – RaviH Sep 10 '14 at 02:27
  • 1
    Already asked and answered. http://stackoverflow.com/questions/10113366/load-jquery-with-javascript-and-use-jquery – Chris Caviness Sep 10 '14 at 02:28
  • @ChrisCaviness: thanks! And how would I avoid conflicting jQuery libraries if jQuery is already defined on the 3rd party website? – Adam Sep 10 '14 at 02:51
  • See if window.jQuery is already defined – Chris Caviness Sep 10 '14 at 02:53
  • Generally speaking, it's a bad idea to dynamically add libraries that are not yours, especially something as common as jquery. You have no idea if the page is calling your script prior to adding jquery on its own. Your best bet is to explicitly require jquery, and then have the 3rd party site add your library by calling $.getScript() after jquery is added. http://api.jquery.com/jquery.getscript/ – Redtopia Sep 10 '14 at 04:12

1 Answers1

0

First make a check for jQuery load using javaScript

    window.onload = function() {
        if (window.jQuery) {
            // jQuery is loaded  
            // Now insert your scripts        
        } else {
            // jQuery is not loaded
            // Load it manually from any cdn e.g., //ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js        
        }
    }

There are some other similar ways of checking which we can use

    if (typeof jQuery != 'undefined') {
        // jQuery is loaded  
    } else {
        // jQuery is not loaded
    }

    if (jQuery) {
        // jQuery is loaded  
    } else {
        // jQuery is not loaded
    }

There 's a working fiddle available by atornblad which also tells the time jQuery took to load.

You can have a look for a better reference.

Hope this helps..

xxbinxx
  • 1,527
  • 11
  • 18
  • Does this line 'window.onload = function() {' not overwrite existing functions that are called onload (for example by the 3rd party website)? – Adam Sep 10 '14 at 13:49
  • @Flo yes it will... But in that case you can remove this `window.onload` line... and make a check after some time using `setInterval` and if jQuery is not loaded say after 40 seconds then you can load it by your own script and don't forget to stop the Interval otherwise your script will reload it. I think this example may help http://stackoverflow.com/questions/1293367/how-to-detect-if-javascript-files-are-loaded – xxbinxx Sep 11 '14 at 05:47