12

Here is the JS code:

var wrap = document.createElement("div");
wrap.innerHTML = '<script type="text/javascript" src="'+scriptUrl+'"></script>';
var wrapscript = wrap.childNodes[0];
document.body.appendChild(wrapscript)

The body did insert the script element, but the JS resource wasn't loaded, there isn't even an http request.

Could someone explain why this is happening?

The problem is with Zeptojs's $ method

$('<script type="text/javascript" src="'+scriptUrl+'"></script>').appendTo($("bdoy"))

It works like the code above, and causes the bug.

4
  • this happens because the browser ignores the addition, thinking it is just html and not executable code. create a new script element using document.createElement or $("<script/>")
    – SoWhat
    Nov 15, 2012 at 3:28
  • $("bdoy") is a typo, I guess.
    – inhan
    Nov 15, 2012 at 3:48
  • Also, .appendChild("wrapscript") will not do what you're after. wrapscript there, is only a string (because you've wrapped it in quotes).
    – inhan
    Nov 15, 2012 at 3:50
  • hehe,so sorry,the quotes is a typo,i have fixed it,and it's not the reason.
    – Maxingchi
    Nov 15, 2012 at 10:02

3 Answers 3

26

This one was trivial.

As stated in spec (8.4 Parsing HTML fragments and 8.2.3.5 Other parsing state flags,) quote:

when using innerHTML the browser will

  1. Create a new Document node, and mark it as being an HTML document.

  2. If there is a context element, and the Document of the context element is in quirks mode, then let the Document be in quirks mode. Otherwise, if there is a context element, and the Document of the context element is in limited-quirks mode, then let the Document be in limited-quirks mode. Otherwise, leave the Document in no-quirks mode.

  3. Create a new HTML parser, and associate it with the just created Document node. ...

and when parsing a <script> inside

The scripting flag is set to "enabled" if scripting was enabled for the Document with which the parser is associated when the parser was created, and "disabled" otherwise.

The scripting flag can be enabled even when the parser was originally created for the HTML fragment parsing algorithm, even though script elements don't execute in that case.

So it won't be executed, as long as you inject it with innerHTML.

And using innerHTML will prevent the <script> element created from being executed permanently.

As stated in spec (4.3.1 The script element,) quote:

Changing the src, type, charset, async, and defer attributes dynamically has no direct effect; these attribute are only used at specific times described below.

Concluding the described below is that, it only parse the src attribute when injecting the <script> to the document (no matter which, including the temporary one created when using innerHTML.)

So, as long as you want to inject a script to the document and make it executed, you have to use script = document.createElement('script').

Set its attributes like src and type, possibly the contents inside (by using script.appendChild(document.createTextNode(content))), then append it to the document.body.

5

A possible solution, when you don't have control over the insertion mechanism and you are forced to use innerHTML with script beacons, is to rebuild DOM Nodes from the "ghost" ones.

This is a recurring problem in the ad-tech industry, in a which many automated systems duplicate arbitrary HTML code (aka. adservers ^^).

works fine in Chrome:

var s = wrap.getElementsByTagName('script');
for (var i = 0; i < s.length ; i++) {
  var node=s[i], parent=node.parentElement, d = document.createElement('script');
  d.async=node.async;
  d.src=node.src;
  parent.insertBefore(d,node);
  parent.removeChild(node);
}

(you can test it in JSFiddle)

2
  • 2
    if the script tag contains the javascript directly then you need to assign the textContent field instead of (or in addition to) the src field. In any case, +1 for an actual real solution which works for the case where javascript is used client side on a pre-existing HTML template where calling document.createElement is not feasible.
    – Michael
    Apr 13, 2016 at 23:05
  • 2
    And also of coure if textContent is used, d.setAttribute('type','text/javascript') is also required to make sure the text content is evaluated as javascript.
    – Michael
    Apr 13, 2016 at 23:29
4

You can try this instead:

var wrap = document.createElement('div');
var scr = document.createElement('script');
scr.src = scriptUrl;
scr.type = 'text/javascript';
wrap.appendChild(scr);
document.body.appendChild(wrap);

By creating the script tag explicitly you're telling JS that the innerHTML is not a text but instead it's an executable script.

1
  • hehe,I know that.if you create the script tag with document.createElement('script') it just works.and create with innerHTML is how Zepto's $ method realize it
    – Maxingchi
    Nov 15, 2012 at 3:46

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.