How to run received JavaScript from the client side(html, js)?

Question

I'm using a JS promised based library (axios) to get a response from backend which returns a complete JS file. Once I receive this file how do I actually use it in my current page?

this the code:

axios.get('/foobar')
     .then(jsFile => {
          //use jsFile on current webpage       
      })

I have read some answers using eval(), but I would prefer to avoid this method. Anyone has an idea how to proceed?

@gurvinder372 yes it is when I console.log it I see printed in console all the text within the js file — CommonSenseCode, Mar 28 '18 at 09:28
What is wrong with `eval` that isn't wrong with injectecting the script though other mechanisms? — Quentin, Mar 28 '18 at 09:30
@Quentin because it's a progressive app, I need to load this script only when user clicks on X button — CommonSenseCode, Mar 28 '18 at 09:30
@gurvinder372 I can execute whatever I need inside the then method axios.get().then(()=>{}) — CommonSenseCode, Mar 28 '18 at 09:32

score 3 · Accepted Answer · answered Mar 28 '18 at 09:34

3

Make a script tag with contents as jsFile

function addScriptToSession( jsFile )
{
    var s = document.createElement('script');
    s.type = 'text/javascript';
    try {
      s.appendChild(document.createTextNode(jsFile));
      document.body.appendChild(s);
    } catch (e) {
      s.text = jsFile;
      document.body.appendChild(s);
    }
}

Use it as

  axios.get('/foobar')
 .then(jsFile => {
      addScriptToSession(jsFile)     
  })

answered Mar 28 '18 at 09:34

gurvinder372

66,980
10
72
94

Cool but how is this any different than `eval`..? – Redu Mar 28 '18 at 15:01
1

@Redu with eval you can't use properly the debugger. Every call to eval() produces a new instance of the JS interpreter. https://stackoverflow.com/questions/86513/why-is-using-the-javascript-eval-function-a-bad-idea – CommonSenseCode Mar 29 '18 at 09:29

How to run received JavaScript from the client side(html, js)?

1 Answers1