Load JavaScript from HTML text dynamically?

Question

I have a modular single page html that dynamically loads content html based on a wide variety of attributes which are not important. The code below works great except the script is not loaded. I have a place in the dynamic load function to insert script but can't find any examples of this type of loading. Everything assumes an src file however I know you can do something like below with element.text but not sure how to load that from the html text.

Note that all the references I have found load via an .src and not the .text which I need.

function dynamicLoad(elem, sourceCode) {
        // load html not the issue        
        elem.innerHTML = sourceCode;
        // load JS -- this is with solution ---
        var doc = document.implementation.createHTMLDocument(); // Sandbox
        doc.body.innerHTML = sourceCode; // Parse HTML properly
 // --- This is the solution below, will load all scripts found    
        [].map.call(doc.getElementsByTagName('script'), function(el) {       
          var e = document.createElement('script');
          e.text = el.textContent;
          document.body.appendChild(e);        
        }
  }

Does this answer your question? [How do I include a JavaScript file in another JavaScript file?](https://stackoverflow.com/questions/950087/how-do-i-include-a-javascript-file-in-another-javascript-file) — PM 77-1, Mar 19 '21 at 20:19
https://stackoverflow.com/questions/14521108/dynamically-load-js-inside-js — PM 77-1, Mar 19 '21 at 20:20
Do you want to execute the loaded script tag? then you could use the `eval` function to execute the javascript inside — Adnane Ar, Mar 19 '21 at 20:26
@AdnaneAr will that load the script? Using the above code, would that be eval(data) ? This gives an error "VM: Uncaught (in promise) SyntaxError: Unexpected token ' — user1607416, Mar 19 '21 at 20:58
You can try to get the js script as string and execute it like that `eval(jsString)` — Adnane Ar, Mar 19 '21 at 21:04
Why exactly are you using javascript, to create a script tag, that will contain static text that you then immediately append with the intent to execute as javascript? isn't that just a roundabout way of... just executing some javascript? If you're gonna fetch the script's content... you mightaswell just append a script element with a src. — Kevin B, Mar 19 '21 at 21:09
@KevinB this is part of a very large enterprise dynamic application where different html and scripts need to be loaded based on attributes as I explained above. Customer A gets one script while customer B gets different html/js. Think of it as a CMS in the browser wo the CMS. Pure HTML/JS no external dependencies. — user1607416, Mar 19 '21 at 21:14
It is not as this is a function included in modern browsers. Your nitpicking on the why not the how. Problem solution is posted. — user1607416, Mar 19 '21 at 21:51

score 0 · Answer 1 · answered Mar 19 '21 at 21:07

Referring to my comment over this answer, I don't know if that is actually what you are looking for but I hope it will help!

var loadedScript = "alert('Eval is working!')";

function evalScript() {
  return eval(loadedScript);
}

<button onclick="evalScript()">Eval script</button>

score 0 · Answer 2 · answered Mar 19 '21 at 22:10

Answer is posted inline code above but here it is:

// Insert JS 
var doc = document.implementation.createHTMLDocument(); // Sandbox
doc.body.innerHTML = data; // Parse HTML properly
[].map.call(doc.getElementsByTagName('script'), function(el) {       
  var e = document.createElement('script');
  e.text = el.textContent;
  document.body.appendChild(e);        
});

Load JavaScript from HTML text dynamically?

2 Answers2