如何检查某个 JS 文件是否包含在网页中？

Question

In my custom JS code file I use various plugins, for instance, the Masonry plugin for JQuery. However, I don't include the plugin on every page or at the master page file level (in some yes, in some no) but I do include my custom file on every page. Therefore, the code in my JS file will issue an error if the Masonry plugin is missing.

If someone could reply with a solution of how to:

1. Check if certain JS plugin was referenced (included) and only run the code then,
2. (optionally) include the file at runtime if it is missing.

I have it working with JQuery and JQuery UI because they both introduce a class into DOM structu (jquery and jquery.ui objects) but there are other plugin's like lightbox scripts, the forementioned Masonry etc..

Answer 1

Rather than checking whether a particular JavaScript file has been 'included', I'd just check if the functionality that you need is available (ie if you need a function named foo , just do something along the lines of typeof foo == 'undefined' to see if it is there...).

Answer 2

What you are trying to do is probably a bad idea, but anyway here's how to determine if a given plugin has been defined. In jQuery they are just namespaces to the jQuery scope :

if(!jQuery().somePlugin) {
    // the plugin is not loaded => load it:
    jQuery.getScript('/url_of_the_plugin', function() {
        // the plugin is now loaded => use it
    });
}

Answer 3

You can only check if its class or methods are defined, in your case:

if (typeof($.fn.masonry) == 'undefined') ...

Anyway, I'll recommend including every script at every page, compressed into one file. The cost of downloading and parsing potentially not needed code is often far less than penalty of having multiple HTTP requests.