2009-07-01 7 views
10

Ich versuche, die folgende (ich bin mit der Prototyp-Bibliothek) zu tun:Warum kann nicht füge ich eine Zeichenfolge, die einen Skript-Tag innerHTML- in IE enthält

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

In IE, div.innerHTML Eigenschaft ist immer gleich "", nachdem ich die Eigenschaft in der zweiten Zeile gesetzt habe.

Dieses Snippet befindet sich in einer Funktion, die document.write() in einem externen Vendor-Skript überschreibt, deshalb mache ich es auf diese Weise, anstatt ein Skriptelement zu erstellen und direkt an das div-Element anzuhängen.

Jede Hilfe würde wirklich geschätzt werden, das gibt mir graue Haare!

+0

(+1) gute Frage. –

Antwort

6

Sie könnten versuchen, so etwas wie dies zu tun, statt:

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

oder tun

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

+1 für die erste Option. –

+0

Ich bevorzuge auch die erste. Es ist viel sauberer und wiederverwendbar. They 2nd war nur ein "try-it" Vorschlag, wenn er nicht den ersten Ansatz verwenden möchte :) – Juri

+0

Ich habe ein vages Gefühl, dass das OP-Problem tatsächlich ein Sicherheitsmerkmal bei der Arbeit ist und Ihre erste Antwort hier ist die konventionelle (und nicht blockierende!) Lösung. – annakata

1

Haben Sie versucht, inline JS hinzuzufügen, anstatt eine .js-Datei zu laden? Ich habe das in der Vergangenheit gemacht und es hat gut für mich funktioniert. Nicht sicher, ob das immer noch mit den neuesten Browsern/Sicherheitsfehlern funktionieren würde.

HTH.

7

Ihr Script-Tag wahrscheinlich unabhängig interpretiert werden verwaltet. Versuchen Sie:

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

Dies ist ein häufiges Problem bei der Verwendung von Skript-Tags im Code und sehr wahrscheinlich das Problem – jcoder

+0

Dies ist interessant. Kannst du es ausarbeiten? – bitsprint

+0

+1 Das klingt nach dem Problem für mich. – RedFilter

11

Dieser hatte mich für ein bisschen als auch gesperrt. Es stellt sich heraus, dass IE das Einfügen von JS direkt über innerHTML nicht erlaubt, es sei denn, Sie fügen die "Defer" -Eigenschaft hinzu (siehe den zweiten Link unten). Diese Eigenschaft ist einzigartig für IE und erlaubt IE anscheinend, die Ausführung von JS solange zu verzögern, bis das andere Markup geladen wurde. Eine Warnung, obwohl ... wenn Sie zwei Skript-Tags einschließen (wie ich es getan habe), gibt es keine Garantie, welche zuerst ausgeführt wird, da die Skripte scheinbar asynchron geladen werden. Dies sollte nur dann ein Problem sein, wenn Ihre Skripte voneinander abhängig sind (so wie ich).

Es gibt noch einen zusätzlichen Vorbehalt ... Sie müssen zum Zeitpunkt des Einfügens des Skripts Nicht-Skript-Markup einfügen. Ich konnte die Skript-Tags nicht selbst einfügen, mit oder ohne die Eigenschaft "Defer". Schließlich müssen die Skript-Tags nach dem Einfügen aller anderen Nicht-Skript-Markups platziert werden. Andernfalls werden die Skript-Tags aus dem eingefügten HTML entfernt.

Hier sind ein paar Hinweise:

MS innerHTML- Referenz:

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

MS Aufschieben Property Referenz:

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

Beispiel Script einfügen über Code (ja, es funktioniert tatsächlich):

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

Mein Testcode:

// 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; 
}