2010-03-26 24 views
11

Mam poniżej kod, aby wstawić styl do DOM (istnieje przypadek użycia do wstrzykiwania stylu do DOM, więc proszę nie pytać dlaczego lub powiedzieć załadować css w pliku .css).Błąd Chrome z NO_MODIFICATION_ALLOWED_ERR DOM Wyjątek 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> 

Jeśli działam w Firefoksie, działa dobrze. Ale mam ten błąd w Google Chrome:

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

Czy ktoś ma poprawkę? Dzięki

+1

wyglądać mój problem jest opisany tutaj http://code.google.com/p/chromium/issues/detail?id=3976#makechanges więc zastanawiam się, czy „istnieje sposób na pracę? " Dzięki –

Odpowiedz

9

Myślę, że to dlatego, że używasz innerHTML wszędzie, gdzie używasz składni XML. Spróbuj:

bmstyle.nodeValue = styleStr; 

Propozycja 2:

Być może również dlatego, że staramy się ustawić innerHTML o element jeszcze w DOM HTML. Jeśli o to chodzi, moja pierwsza propozycja powinna nadal trzymać się, czy można przejść z:

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

Nie jestem pewien, czy należałoby linię pomiędzy nimi, aby odzyskać elementu lub jeżeli bmstyle nadal wskazywać do tego.

+0

Należy wspomnieć, że ponieważ DOM w tym przypadku jest HTML DOM, nie powinno to mieć znaczenia. Ale Chrome może być wulgarny, gdy nie definiujesz bezpośrednio elementu DOM jako zmiennej HTML. – Anthony

+0

Użyłem twojej sugestii 2 i nadal ma błąd. Użyłem sugestii 1 z nodeValue, nie ma błędu, ale tag stylu nie ma w nim nic (btw, poprawiłem, aby dodać} na końcu). Czy zamiast tego powinienem wstawić nagłówek i jak? –

+0

Dzięki za to!Bardzo pomocny –

1

To mógłby być, bo to nieważne umieścić <style> elementów wewnątrz organizmu, ale szczerze mówiąc byłbym zaskoczony

2

Ja też miałem ten problem, spróbuj tego:

bmstyle.value = styleStr; 
1

Spróbuj użyć:

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

Używaj innerText/textContent. Lub utwórz węzeł tekstowy ze stylami i dodaj go do znacznika stylu. Nie dlatego, że styl jest w ciele, ale zawsze można go dodać do głowy, co nie rozwiązuje problemu.

3

Notatka na przyszłość ... Używam następującej funkcji do dynamicznego tworzenia stylów CSS. Stwierdziłem, że przy użyciu textContent działało najlepiej.

To łamie na Safari

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

To łamie na FireFox

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

Poniżej jest mój ostateczny kod, który działa na obu przeglądarkach. IE nie testowane ...

/** 
* 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); 
} 
Powiązane problemy