Asked  7 Months ago    Answers:  5   Viewed   97 times

How can you reliably and dynamically load a JavaScript file? This will can be used to implement a module or component that when 'initialized' the component will dynamically load all needed JavaScript library scripts on demand.

The client that uses the component isn't required to load all the library script files (and manually insert <script> tags into their web page) that implement this component - just the 'main' component script file.

How do mainstream JavaScript libraries accomplish this (Prototype, jQuery, etc)? Do these tools merge multiple JavaScript files into a single redistributable 'build' version of a script file? Or do they do any dynamic loading of ancillary 'library' scripts?

An addition to this question: is there a way to handle the event after a dynamically included JavaScript file is loaded? Prototype has document.observe for document-wide events. Example:

document.observe("dom:loaded", function() {
  // initially hide all containers for tab content
  $$('div.tabcontent').invoke('hide');
});

What are the available events for a script element?

 Answers

100

You may write dynamic script tags (using Prototype):

new Element("script", {src: "myBigCodeLibrary.js", type: "text/javascript"});

The problem here is that we do not know when the external script file is fully loaded.

We often want our dependant code on the very next line and like to write something like:

if (iNeedSomeMore) {
    Script.load("myBigCodeLibrary.js"); // includes code for myFancyMethod();
    myFancyMethod(); // cool, no need for callbacks!
}

There is a smart way to inject script dependencies without the need of callbacks. You simply have to pull the script via a synchronous AJAX request and eval the script on global level.

If you use Prototype the Script.load method looks like this:

var Script = {
    _loadedScripts: [],
    include: function(script) {
        // include script only once
        if (this._loadedScripts.include(script)) {
            return false;
        }
        // request file synchronous
        var code = new Ajax.Request(script, {
            asynchronous: false,
            method: "GET",
            evalJS: false,
            evalJSON: false
        }).transport.responseText;
        // eval code on global level
        if (Prototype.Browser.IE) {
            window.execScript(code);
        } else if (Prototype.Browser.WebKit) {
            $$("head").first().insert(Object.extend(
                new Element("script", {
                    type: "text/javascript"
                }), {
                    text: code
                }
            ));
        } else {
            window.eval(code);
        }
        // remember included script
        this._loadedScripts.push(script);
    }
};
Tuesday, June 1, 2021
 
RemiX
answered 7 Months ago
17

If you need to determine the base path of a set of scripts, you should not rely on the "current working directory." This can change from executing environment to executing environment.

Instead, base it on a known path.

/includes/class_bootstrap.php knows that it's going to be one directory down from where the base path is going to be, so it can do this:

define('CWD', realpath(dirname(__FILE__) . '/../') );

dirname gets the directory name given in the passed string. If __FILE__ returns C:/wamp/www/vb4/plugins/includes/class_bootstrap.php, then dirname will return C:/wamp/www/vb4/plugins/includes. We then append /../ to it and then call realpath, which turns that relative .. into a real directory: C:/wamp/www/vb4/plugins

Phew.

From that point forward, CWD will operate as you expect. You can require_once CWD . '/includes/init.php' and it will correctly resolve to C:/wamp/www/vb4/plugins/includes/init.php

Also, this may sound stupid but "vb4" may be referring to vBulletin 4, in which case your plugin may already have access to the configuration information that it exposes, including handy things like paths. This may make this entire exercise unnecessary. I intentionally know nothing about vB, otherwise I would point you at their dev docs.

Wednesday, March 31, 2021
 
Exoon
answered 9 Months ago
51

Include an external JavaScript file

Try including your (external) JavaScript into the mounted hook of your Vue component.

<script>
export default {
  mounted() {
    const plugin = document.createElement("script");
    plugin.setAttribute(
      "src",
      "//api.myplugincom/widget/mykey.js"
    );
    plugin.async = true;
    document.head.appendChild(plugin);
  }
};
</script>

Reference: How to include a tag on a Vue component

Import a local JavaScript file

In the case that you would like to import a local JavaScript in your Vue component, you can import it this way:

MyComponent.vue

<script>
import * as mykey from '../assets/js/mykey.js'

export default {
  data() {
    return {
      message: `Hello ${mykey.MY_CONST}!` // Hello Vue.js!
    }
  }
}
</script>

Suppose your project structure looks like:

src
- assets
    - js
      - mykey.js
- components
    MyComponent.vue

And you can export variables or functions in mykey.js:

export let myVariable = {};
export const MY_CONST = 'Vue.js';
export function myFoo(a, b) {
    return a + b;
}

Note: checked with Vue.js version 2.6.10

Tuesday, June 29, 2021
 
weegee
answered 6 Months ago
42
if (navigator.userAgent.match(/iPad/i) != null){ // may need changing?
  var js = document.createElement('script');
  js.type = "text/javascript";
  js.src = "/s/jquery.dropkick-1.0.0.js";

  var css = document.createElement('link');
  css.type = "text/css";
  css.rel = "stylesheet";
  css.href = "/c/dropkick.css";

  var h = document.getElementsByTagName('head')[0];
  h.appendChild(js);
  h.appendChild(css);
}

Or whatever would be in the User-Agent header for an iPad.

References:

  • window.navigator.userAgent
  • document.createElement
  • node.appendChild
Friday, July 30, 2021
 
Keat
answered 4 Months ago
70

The security model in modern browsers prevents JavaScript from making cross-domain requests. That has holes (see every website exploit since the beginning of the internet), but using them is more than a little shady and it's only a matter of time before they're patched.

Wednesday, August 18, 2021
 
user123444555621
answered 4 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :  
Share