Loading JavaScript Inline

Question

I am trying to load some JavaScript files inside another JavaScript file in the following case:

js/script1.js

var script_1_method = function () {
   console.log("Hello Script 1");
}

js/init-script.js

console.log("Initiating Scripts...");
loadScriptMethod('js/script1.js');
script_1_method();
console.log("Hello Script 2");

index.html

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript" src="js/init-script.js"></script>
    </head>
    <body>

    </body>
    </html>

The Console output should be

Initiating Scripts...
Hello Script 1
Hello Script 2

I have looked into many JavaScript loaders like curl.js, RequireJS, JSL almost all of them do an Asynchronous way of loading files requiring callbacks for my scenario.

Is there a library to load the scripts in a synchronous way as in the above case without requiring callbacks.

Please let me know if there are any JavaScript loader libraries which cater to the above case.

No need to sign your posts; you're writing questions, not letters. — Lightness Races in Orbit
– Lightness Races in Orbit, Commented Nov 9, 2011 at 12:15

Andy E · Accepted Answer · 2011-11-09 12:08:45Z

2

It's possible to load same-origin scripts using a synchronous XHR:

var scr = getViaSynchronousXHR('js/script1.js'),
    el  = document.createElement("script");

el.appendChild(document.createTextNode(scr));
document.documentElement.firstChild.appendChild(el);
script_1_method();

A script element without a source is parsed and executed synchronously, because there is no wait for the file to be downloaded/fetched from cache.

answered Nov 9, 2011 at 12:08

Andy E

346k86 gold badges482 silver badges452 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dev Sahoo Over a year ago

Strangely only doing the getViaSynchronousXHR('js/script1.js') works without appending the script tag. I used this implementation of getViaSynchronousXHR stackoverflow.com/questions/4897193/…

Andy E Over a year ago

@Geek: if you're using jQuery, it automatically detects the script and uses much the same method to add it to the document. See api.jquery.com/jQuery.globalEval, which internally creates script elements and adds them to the document.

karnyj · Accepted Answer · 2011-11-09 12:00:14Z

1

if all your scripts are on the same domain, you can run a synchronous ajax call to get the script, use eval to run it, and then continue

answered Nov 9, 2011 at 12:00

karnyj

1,2321 gold badge10 silver badges10 bronze badges

3 Comments

Lajos Arpad Over a year ago

Are you sure eval is the best thing to use here? eval seems evil to me (it's dangerous).

Andy E Over a year ago

@Lajos: there's no difference in safety when executing a script with eval or just adding it to the document. Unfortunately, getting eval to execute in the global scope is a cross browser conundrum. Best to just create the script element and add it to the document.

hugomg Over a year ago

Other then being synchronous and only single-domain capable, the only big problem of using eval for script loading is that it often gives very bad error messages if you get an exception.

lauhub · Accepted Answer · 2011-11-09 12:40:39Z

The thing you want to do is quite difficult. I had a lot of problems with synchronous AJAX requests to correctly load my javascript files dynamically.

Actually I implemented something that worked synchronously on my project which is the same as you want.

It is only possible if you have a server-side scripting engine (e.g. PHP) to generate your HTML page.

The idea is to parse the init-scripts.js on server side prior to include them into the html code.

Instead of writing echo <script type="text/javascript" src="js/init-script.js"></script> in my PHP script I write : JavascriptLoader::addJavascript('js/init-script.js');

JavascriptLoader is a PHP class which manages scripts to be loaded.

This addJavascript function parses the init-script.js and, each time it encounters a line which starts with "loadScriptMethod(",

it parses and uses the string between brackets (e.g loadScriptMethod('thisString')) as the scriptToLoad
and then calls recursively JavascriptLoader::addJavascript($scriptToLoad);

JavascriptLoader::addJavascript then do an echo '<script type="text/javascript" src="'.$scriptToLoad.'"></script>' to write

I cannot publish the JavascriptLoader code from my project, but here is a simplified example of PHP code:

class JavascriptLoader{
...
public static function  addJavascript($filepath){

    self::init(); //Init to write the javascript loadScriptMethod definition into HTML output

    if (!self::isScriptAlreadyLoaded($filepath)){
        self::parseFile($filepath);
        echo '<script type="text/javascript" src="'.$urlScript.'"></script>',"\n";
        self::ajouterScriptDejaCharge($chemin);
    }
}
private static function parseFile($filepath){
    if (file_exists($filepath)){
        $lines = file($filepath, FILE_SKIP_EMPTY_LINES);

        foreach($lines as $line){
            $matches = array();
            $test = preg_match ('/^loadScriptMethod\(\s*[\'\"](.+)[\'\"]\s*\)/'  , $line , $matches);
            if ($test > 0){
                $scriptToLoad = $matches[1];

                //On inclut le fichier
                self::addJavascript($scriptToLoad);
            }
        }
    }
    else{
        throw new Exception('javascript source file '.$filepath.' does not exist.');
    }

This also stores the $scriptToLoad into an array to avoid loading twice the same script (functions isScriptAlreadyLoaded and addScriptToAlreadyLoadedList).

Collectives™ on Stack Overflow

Loading JavaScript Inline

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related