用户单击元素时加载第三方JavaScript

Question

I know I can inject the script when the user clicks an element by creating a script element and injecting it on the page via document.appendChild. However, the script is listening for onload and onDOMContentReady (or their own home grown domReady event, not sure).

If I inject the script only when the user clicks an element, the callbacks for onload/onDOMContentReady will never fire because those events have already passed.

Any ideas? This 3rd party script pulls in all these other requests and it's not optimal for page loading.

Answer 1

EDIT: I read the question again...and if you are using something like jQuery, it will fire your handler function in any other document ready calls even if document ready has already been fired. It will just execute the function right away. If you are looking for a pure javascript way to do it, you need to take extra consideration to check to see if dom ready has already been fired, and fire your function yourself, otherwise attach it to the dom ready callback.

I don't see a problem with just doing something like this (with jquery for brevity):

// on document ready
$( function() {

    // attach the click handler
    $('#loadScript').click( function( e ) {

        // on click, get the script
        $.getScript('path/to/your/script.js', function() {

            // your script is loaded, so what you need from here
            // to handle this click event.
        });
    });
});

I think you are over thinking it a bit. You only need to worry about making it possible to load the script once the dom elements are ready. You could look at using something like require.js as well.