为什么我不能在IE中向innerHTML添加包含脚本标记的字符串

时间:2009-07-01 11:04:55

标签: javascript innerhtml

我正在尝试执行以下操作(我正在使用原型库):

var div = document.createElement('div');
div.innerHTML = '<script src="somescript.js"></script>';
$('banner').insert(div);

在IE中,在第二行设置属性后,div.innerHTML属性总是等于“”。

这个代码片段在一个函数中,它覆盖了外部供应商脚本中的document.write(),这就是为什么我这样做而不是创建一个脚本元素并直接将它附加到div元素。

真的很感激任何帮助,这给了我白发!

5 个答案:

答案 0 :(得分:12)

这个让我有点陷入困境。事实证明IE不允许直接通过innerHTML插入JS,除非你包含'defer'属性(参见下面的第二个链接)。这个属性是IE独有的,显然允许IE推迟执行任何JS,直到加载了其他标记。但是有一个警告......如果你包含两个脚本标签(正如我所做的那样),则无法保证首先执行哪一个,因为脚本似乎是异步加载的。如果你的脚本彼此依赖(就像我的那样),这应该只是一个问题。

还有一个警告......您必须在插入脚本的同时插入非脚本标记。无论是否有“defer”属性,我都无法自行插入脚本标记。最后,必须在插入所有其他非脚本标记之后放置脚本标记。否则,脚本标记将从插入的HTML中删除。

以下是一些参考文献:

MS innerHTML参考:

http://msdn.microsoft.com/en-us/library/ms533897%28v=vs.85%29.aspx

MS Defer Property Reference:

http://msdn.microsoft.com/en-us/library/ms533719%28v=vs.85%29.aspx

通过代码插入脚本的示例(是的,它确实有效):

http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/insertScript_2.htm

我的测试代码:

// I downloaded the MS example file above and tweaked their script a bit, 
// resulting in this.  Using the proper approach to the defer property 
// (namely: defer="defer") did not provide me with consistent results, so 
// sticking with 'DEFER' may be necessary.
// Note:  Try moving the 'sHTML' variable to the end of the script string.
function insertScript2()
{
    var sHTML="<input type=button onclick=" + "go2()" + " value='Click Me'><BR>";
    var sScript = sHTML + "<SCRIPT DEFER type='text/javascript'> function go2(){ alert('Hello from inserted script.') } </SCRIPT" + ">";
    ScriptDiv.innerHTML = sScript;
}

答案 1 :(得分:7)

您的脚本标记可能需要独立解释。尝试:

div.innerHTML = '<scr' + 'ipt src="somescript.js"></scr' + 'ipt>';

答案 2 :(得分:6)

你可以尝试做这样的事情:

function loadScript(src) {
       var script = document.createElement("script");
       script.type = "text/javascript";
       document.getElementsByTagName("head")[0].appendChild(script);
       script.src = src;
}

或做

..
div.innerHTML = "<script src=\"somescript.js\"></script>";
..

答案 3 :(得分:6)

您需要为</script>

使用转义字符
div.innerHTML = '<script src="somescript.js"><\/script>';

请参阅why escaping / in javascript '<\/script>'?

答案 4 :(得分:1)

您是否尝试过添加内联JS而不是加载.js文件?我过去做过这个,对我来说很好。不确定这是否仍适用于最新的浏览器/安全性错误。

HTH。