How to Dynamically Insert a <Script> Tag via Jquery After Page Load

Loading scripts after page load?

So, there's no way that this works:

window.onload = function(){
  <script language="JavaScript" src="http://jact.atdmt.com/jaction/JavaScriptTest"></script>
};

You can't freely drop HTML into the middle of javascript.

---

If you have jQuery, you can just use:

$.getScript("http://jact.atdmt.com/jaction/JavaScriptTest")

whenever you want. If you want to make sure the document has finished loading, you can do this:

$(document).ready(function() {
    $.getScript("http://jact.atdmt.com/jaction/JavaScriptTest");
});

---

In plain javascript, you can load a script dynamically at any time you want to like this:

var tag = document.createElement("script");
tag.src = "http://jact.atdmt.com/jaction/JavaScriptTest";
document.getElementsByTagName("head")[0].appendChild(tag);

Dynamically added script tag doesn't execute when moved with jQuery

In general

It seems that from jQuery 1.9.0, when dynamically inserting DOM elements that include script tags, jQuery first scans/parses the input DOM and tags scripts as executed. It then traverses the DOM and evaluates the scripts.

See: http://jquery.com/upgrade-guide/1.9/#loading-and-running-scripts-inside-html-content

When the script tag is moved with jquery.append(), it is already tagged as executed and thus won't be evaluated.

It is not important where in the DOM hierarchy the script tag is moved to/from. The first $.html() tags it as executed, and when moving it, the subsequent $.append() doesn't know that it in fact wasn't executed yet.

To evaluate it explicitely one can do eval($("#source script").text()), i.e.:

$("body").html('<div id="target"><script>alert("dynamic dom 1");$("#target").append($("#source"));eval($("#source script").text());</script></div><div id="source"><script>alert("dynamic dom 2");</script></div>');

For Asp.net MVC

This will help Asp.net MVC partial views where you want to keep the JS close to the DOM elements it manipulates (i.e. in the same file), e.g.:

$("body #someContainer").html('@Html.Partial("_myWidget")');

with "_myWidget.cshtml":

<div id="target">@Html.Partial("_myWidgetContent")</div>
<script>
    alert("dynamic dom 1");
    $("#target").append($("#source")); //or some other setup that manipulates the widget DOM
    eval($("#source script").text();
</script>

and "_myWidgetContent.cshtml":

<div id="source"></div>
<script>
    alert("dynamic dom 2");
    //Something specific to this partial view
    $("#source").click(function() { alert("clicked") });
</script>

Script not loading when added dynamically with jQuery

I found solution,

First of all you can not write anything to document from external loaded script,

Failed to execute 'write' on 'Document':
It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened

There are two ways to solve this.

1).

You are creating Iframe as html content and writing into document as

document.write(htmlCode)

Above line creating issue for dynamic loading your content.

Instead of your code try something like below.

var htmlCode = document.createElement("iframe");
 htmlCode.setAttribute("title", title.replace(/[\\"']/g,'\\$&').replace(/&/g,'&'));
 htmlCode.setAttribute("src","");
 htmlCode.setAttribute("allowtransparency","true");
 htmlCode.setAttribute("allow","geolocation; microphone; camera");
 htmlCode.setAttribute("allowfullscreen","true");
 htmlCode.setAttribute("name",this.formId);
 htmlCode.setAttribute("id",this.iframeDomId);

 document.body.appendChild(htmlCode);

And add following Js code in your html

<script type="text/javascript">
   var s = document.createElement("script");
   s.type = "text/javascript";
    s.src = "https://form.jotform.com/jsform/81003857231348";
   document.getElementsByTagName("head")[0].appendChild(s);
</script>

2).

instead of

document.write(htmlCode)

Try

document.body.innerHTML=htmlCode

Let me know if you still face any issue.

---

Related Topics