Dynamically include javascript code from within javascript file

Question

I'm inserting the following script, which is on my own server, into an external page of a 3rd party: www.test.com/test.html:

<script type="text/javascript">
(function() {
  var protocol = (("https:" == document.location.protocol) ? "https://" : "http://");
  var ttScript = document.createElement('script');ttScript.async = true;
  ttScript.src = '//www.example.com/script/mycode.js';
  (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ttScript);
})();
</script>

This is the other script I want to dynamically inject, please note that it can't just be added to the above script! I want this script to be dynamically available. This complete code, will later be stored within object message.jsScript

<script type="text/javascript">
var tt_totalordervalue;
function tt_getordervalue(){
    tt_totalordervalue=$('#subtotal');
    console.log(tt_totalordervalue);
}
</script>

In file mycode.js:

I want to dynamically add the above script and call the function tt_getordervalue defined in there, I'm now trying to do this as below. Notice that I also want to assign the value of variable tt_totalordervalue which is defined in the dynamic script, to a variable in my mycode.js:

(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(message.jsScript);
console.log('script added');
tt_getordervalue();
console.log('function called');
var val = tt_totalordervalue;

I however then get the error Uncaught NotFoundError: Failed to execute 'appendChild' on 'Node': The new child element is null.

Why?

If you're set on doing this (not sure I understand WHY) and you really don't want to define the second script in a file to be dynamically added (like you did with the first one) I believe it is possible to create the script element and then set the innerHTML with the desired code to be run. Its still going to wind up in the global scope though. — Jared Smith
– Jared Smith, Commented Oct 13, 2014 at 1:44
@JaredSmith The reason is that I want to keep the implementation of this code consistent across any 3rd party site and that the 2nd dynamic script is site specific. When I do it like this: var ttScript = document.createElement('script'); ttScript.async = true; ttScript.innerHTML(message.jsScript); I get error Uncaught TypeError: string is not a function on the line where I try to set the innerHTML... And I want it to be in the global scope so that the variables I declare in that script are available everywhere (mainly in mycode.js) — Adam
– Adam, Commented Oct 13, 2014 at 1:51
innerHTML is an attribute, not a method: ttScript.innerHTML = message.jsScript — Jared Smith
– Jared Smith, Commented Oct 13, 2014 at 1:57
Ok, that was kinda stupid of me :) I now get Uncaught ReferenceError: tt_getordervalue is not defined I also don't see the script anywhere when I view page source or inspect the page (not sure if I should). — Adam
– Adam, Commented Oct 13, 2014 at 2:00

Jared Smith · Accepted Answer · 2014-10-13 02:07:26Z

1

Following works on chrome on a Mac (sorry, was too lazy to cross test):

var script = document.createElement('script');
script.innerHTML = 'window.doStuff = function(){alert("do")}';
document.getElementsByTagName('body')[0].appendChild(script);
doStuff();

answered Oct 13, 2014 at 2:07

Jared Smith

22.3k5 gold badges50 silver badges98 bronze badges

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

3 Comments

Adam Over a year ago

That works...even without the window.doStuff line...does that add any value btw?

slebetman Over a year ago

@Flo: window.doStuff ... declares a global variable called doStuff which is a function that alerts "do". It is intended as a sample code. Obviously you should replace it with your code instead.

Jared Smith Over a year ago

I usually use the google closure compiler with advanced optimizations which more or less requires explicitly declaring globals as properties of the global object. Force of habit.

Collectives™ on Stack Overflow

Dynamically include javascript code from within javascript file

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related