2010-03-26 10 views
11

Ich habe unten Code zum Einfügen eines Stils in DOM (es gibt einen Anwendungsfall für Stil in DOM injizieren also bitte nicht fragen, warum oder sagen, um die CSS in. CSS-Datei zu laden).Chrome-Fehler mit NO_MODIFICATION_ALLOWED_ERR DOM Exception 7

<script type="text/javascript"> 
window.onload = function() 
{ 
    var bmstyle = document.createElement('style'); 
    bmstyle.setAttribute('type', 'text/css'); 
    var styleStr = "#test-div {background:#FFF;border:2px solid #315300;"; 
    bmstyle.innerHTML = styleStr; 
    document.body.appendChild(bmstyle); 
} 

</script> 

Wenn ich in Firefox laufe, funktioniert es gut. Aber ich habe diesen Fehler in Google Chrome:

Line bmstyle.innerHTML = styleStr; 
Uncaught Error: NO_MODIFICATION_ALLOWED_ERR: DOM Exception 7 

Hat jemand eine Lösung? Danke

+1

sehen wie mein Problem hier beschrieben wird http://code.google.com/p/chromium/issues/detail?id=3976#makechanges so frage ich mich, wenn „es gibt eine Weg zur Arbeit? " Danke –

Antwort

9

Ich denke es ist, weil Sie innerHTML verwenden, wenn Sie überall sonst XML-Syntax verwenden. Versuchen:

bmstyle.nodeValue = styleStr; 

Vorschlag 2:

Es könnte auch sein, weil Sie die Innerhtml eines ein Element zu setzen versuchen, noch nicht im HTML-DOM. Wenn das der Fall ist, sollte mein erster Vorschlag noch halten, oder können Sie gehen mit:

document.body.appendChild(bmstyle); 
bmstyle.innerHTML = styleStr; 

Ich bin nicht sicher, wenn Sie eine Linie dazwischen brauchen würden, um das Element zu zurückfordern, oder wenn die bmstyle noch zeigen würden zu ihm.

+0

Ich sollte erwähnen, dass da das DOM in diesem Fall ein HTML-DOM ist, sollte es keine Rolle spielen. Aber Chrome kann sauer sein, wenn Sie die DOM-Element-Variable nicht explizit als HTML einrichten. – Anthony

+0

Ich habe Ihren Vorschlag 2 verwendet und es hat immer noch Fehler. Ich habe Vorschlag 1 mit nodeValue verwendet, es hat keinen Fehler, aber das style-Tag enthält nichts (am Ende habe ich korrigiert, um hinzuzufügen). Soll ich stattdessen in den Header einfügen und wie? –

+0

Danke dafür!Sehr hilfreich –

1

Es könnte sein, weil es ungültig ist <style> Elemente im Inneren des Körpers zu setzen, aber um ehrlich zu sein würde ich

2

mich auch überrascht sein, ich hatte dieses Problem, versuchen Sie dieses:

bmstyle.value = styleStr; 
1

Versuchen Sie es mit:

<f:view xmlns:f="http://java.sun.com/jsf/core" contentType="text/html" /> 
1

Nutzung innertext/textcontent. Oder erstellen Sie einen Textknoten mit den Stilen und fügen Sie ihn dem Stil-Tag hinzu. Es ist nicht, weil der Stil im Körper ist, plus Sie können es immer dem Kopf hinzufügen, der das Problem nicht behebt.

3

Nur eine Anmerkung für zukünftige Referenz ... Ich verwende die folgende Funktion, um dynamisch CSS-Stile zu erstellen. Ich fand, dass die Verwendung von TextContent am besten funktioniert.

Dies bricht auf Safari

el.innerHTML = css.join('\n'); 

Dies bricht auf FireFox

el.innerText = css.join('\n'); 

Das folgende ist meine letzte Code, der auf beiden Browsern funktioniert. IE nicht getestet ...

/** 
* Write out stylesheets to the page. 
* 
* @param {array} css 
*/ 
function print_css(css) { 
    var headTag = document.getElementsByTagName('head')[0], 
     el = document.createElement('style'); 

    el.type = 'text/css'; 
    el.textContent = css.join('\n'); 
    headTag.appendChild(el); 
}