0

My html page dynamically loads pages via Ajax for dynamic panels on the page. I need the script tags in the dynamically loaded pages to be executed. I fixed the code from a SO question. It works fine on FF/Safari/Chrome.

But dom nodes of type script work differently on IE. -- I can't seem to add text to a script node in IE 7:

//  variable "data" holds the script element's content from an
//  incoming html page loaded via ajax   
var script = document.createElement("script");        
script.type = "text/javascript";
script.appendChild(document.createTextNode(data)); // doesn't work on ie      

// also doesn't work on IE 7:
script.innerHTML = data;
script.innerText = data;

Any ideas for getting the sw to work on IE? (Other than using eval.)

Community
  • 1
  • 1
Larry K
  • 47,808
  • 15
  • 87
  • 140
  • 1
    Why don't you want to use eval? – SLaks Jul 14 '10 at 20:02
  • 1
    Apparently this weird voodoo works in IE: http://stackoverflow.com/questions/703705/how-do-i-inject-javascript-to-a-page-on-ie-8/#704432. However, not sure if this would be better than eval. – Pat Jul 14 '10 at 20:02
  • @pat: That boils down to `script.text = data;`. No, it's not better than `eval`. – SLaks Jul 14 '10 at 20:07
  • 1
    It's slightly better than eval because it's not evaluated in the local scope of the function where it was called, so it can't manipulate 'private' values. Same deal with `new Function(data)()`. – Dagg Nabbit Jul 14 '10 at 20:25
  • @SLaks -- eval is not preferred due to the scope issue as @no says. Code purity is also a nice to have, but I was willing to accept eval if I couldn't find an alternative. @Pat's and your answer of using .text is the right answer for me. – Larry K Jul 14 '10 at 20:31

2 Answers2

2

You should simple call eval(data).

Although it is true that eval should usually be avoided, this is one of the few exceptions.

EDIT: Without eval, you can do it like this:

    var scriptNode = document.createElement('script');
    scriptNode.type = 'text/javascript';
    scriptNode.text = data;
    document.head.appendChild(scriptNode); 
    document.head.removeChild(scriptNode); //Optional
Community
  • 1
  • 1
SLaks
  • 868,454
  • 176
  • 1,908
  • 1,964
  • 1
    Is there any kind of formal reference explaining the `text` property of a script element? I can't seem to find this anywhere... Chrome has both script.text and script.textContent, I wonder if some browsers only have textContent? – Dagg Nabbit Jul 14 '10 at 20:16
  • I found a ref to text attribute here: http://msdn.microsoft.com/en-us/library/ms535892(v=VS.85).aspx But I wouldn't try it on a non-IE browser. The fact that appendChild doesn't work with IE 7 script nodes is the root bug. – Larry K Jul 14 '10 at 20:35
2

You have a few options I can think of (other than using eval).

  • The script could be served from a separate path; setting the src of the script element instead of its content should work, even in IE.

  • The script to be executed could be attached to the onload listener of an image or other element, which can be appended to the document as you are doing with the script element.

  • use Function instead of eval. This will at least keep the evaluated code out of the local scope: new Function(data)();

Dagg Nabbit
  • 75,346
  • 19
  • 113
  • 141