load javascript src dynamically

Question

I have a javascript code as below:

<script type="text/javascript"
src="https://secure.echosign.com/public/widget?f=8KX2X55PXF274A"
></script>

I get the src attribute value from the above javascript and added this into a div tag after the page has been loaded using javascript like that:

var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", src);
var div = document.getElementById("dialog");
div.appendChild(script);

The script added into the div at runtime like that:

<script type="text/javascript"
src="https://secure.echosign.com/public/widget?f=8JWIPSI2G2T2FG"></script>

but this javascript code is not executed / loaded at runtime. its src is pointing to 3rd party content.

What are you actually trying to acheive here? If the script is already loaded then you do not need to load it again? Nor does which div it is in play a role. Why do you want it in this dic? Usually javscript files are either loaded in the head or as the last elements in the body. — Adam, Apr 17 '14 at 10:11
[it works for me...](http://jsfiddle.net/6e9TE/), are you sure `src` is correct and `dialog` div exists? — Peter, Apr 17 '14 at 10:12
Its `javascript` not `jqurey`(page has been loaded using jqyery like that ) — Rohan Kumar, Apr 17 '14 at 10:12
script having src that pointing to adobe echo sign and return iframe. but it not loaded at run time, if a add this script into my html (hardcoded) and refresh the page it reload the data from adobe but this way not displaying anything. "dialog" is a div and i am showing it as popup. — Asad Iqbal, Apr 17 '14 at 10:13
my target is to add the above script into div and load its content at runtime — Asad Iqbal, Apr 17 '14 at 10:14
`src`in `script.setAttribute("src", src);` is not defined, so this can't work — Black, Apr 15 '16 at 08:04

score 0 · Answer 1 · edited May 23 '17 at 10:33

I answered something like this yesterday as well. I think you are looking for something like this.

window.onload = function() {
   alert('Page Loaded. Loading script now ....');
   var url = 'https://secure.echosign.com/public/widget?f=8KX2X55PXF274A';
   loadScript(url, callback)
}

var callback = function() {
    alert('Script Loaded !');
}

function loadScript(url, callback){

    var script = document.createElement("script")
    script.type = "text/javascript";

    if (script.readyState){  //IE
        script.onreadystatechange = function(){
            if (script.readyState == "loaded" ||
                    script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        };
    } else {  //Others
        script.onload = function(){
            callback();
        };
    }

    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}

JsFiddle : https://jsfiddle.net/nikdtu/Lgg1sqnk/

if you want to load multiple script dynamically read this link Dynamically load several JS files and fire a callback when all are ready

load javascript src dynamically

1 Answers1