2011-03-17 17 views
29

IE8'de çalışmak için kullanılan aşağıdaki JS parçası IE9'da başarısız oluyor.IE9'da Geçersiz Karakter DOM Özel Durumu

document.createElement('<iframe id="yui-history-iframe" src="../../images/defaults/transparent-pixel.gif" style="position:absolute;top:0;left:0;width:1px;height:1px;visibility:hidden;"></iframe>'); 

Aşağıdaki özel durum almak: SCRIPT5022: DOM İstisna: INVALID_CHARACTER_ERR (5)

standartlarına göre değil kod yukarıdaki parça mı. Sorunun çözümü nedir?

+0

Eğik çizgilerden kaçmayı deneyin '\ /' – meouw

+4

Bu, DOM Öğeleri oluşturmanın standart bir yolu değildir. –

+2

Ancak, eski IE'ler için bunu yapmanın önerilen yolu: | – mplungjan

cevap

29

createElement öğesi için API, kurucunun bir öğenin adını türeten bir string olmasını istediğini belirtir. IE9'un standartlara daha sıkı uyulduğu görülecektir.

var iframe = document.createElement("iframe"); 
iframe.setAttribute("id", "yui-history-iframe"); 
iframe.setAttribute("src", "../../images/defaults/transparent-pixel.gif"); 
iframe.setAttribute("style", "position:absolute;top:0;left:0;width:1px;height:1px;visibility:hidden;"); 

http://msdn.microsoft.com/en-us/library/ms536389(v=vs.85).aspx

+0

+1. –

+3

Bu, daha eski IE sürümleri için de bir düzeltme görevi görecek mi? – Jason

-6

Bu jQuery'nin jquery.bgiframe.js için bir çözümdür: Sen şu kodla yapmaya çalışıyorsun aynı şeyi başarabilirsiniz.

if ($.browser.msie && /9.0/.test(navigator.userAgent)) { 
       var iframe = document.createElement("iframe"); 
       iframe.setAttribute("class", "bgiframe"); 
       iframe.setAttribute("frameborder", "0"); 
       iframe.setAttribute("style", "display:block;position:absolute;z-index:-1;filter:Alpha(Opacity=\'0\');top:expression(((parseInt(this.parentNode.currentStyle.borderTopWidth)||0)*-1)+\'px\');left:expression(((parseInt(this.parentNode.currentStyle.borderLeftWidth)||0)*-1)+\'px\');width:expression(this.parentNode.offsetWidth+\'px\');height:expression(this.parentNode.offsetHeight+\'px\');"); 
       this.insertBefore(iframe, this.firstChild); 
      } else { 
       this.insertBefore(document.createElement(html), this.firstChild); 
      } 
+0

Bunun için /5.0/.test(navigator.userAgent) kötüye kullandığım için downvoted ve bu hatanın ilk etapta IE9'da ortaya çıkmasının tüm sebebi bgiframe içerdiği /6.0/.test(navigator.userAgent) ve birçok IE9 UA dizeleri "6.0" alt dizesini içerir. – greim

+2

muhtemelen IE9 –

+1

içinde bgiframe istemiyorum ne dedi greim. Kullanmayın, standart DOM'a tutun ve özellik tespitini kullanın. – madr

13

jQuery.bgiframe.js için yanlış IE6 testini düzeltmek için daha iyi bir çözüm olur mu?

Bunun yerine hakkında:

böyle bir şey ile
if($.browser.msie&&/6.0/.test(navigator.userAgent) 

:

if ($.browser.msie && $.browser.version=="6.0") 
0

Bu hata, ad alanı kullanmıyorsanız, yanlışlıkla standart JavaScript işlev adlarını kendi işlev adlarınız olarak kullanarak gelebilir. Mesela ben "Özellik" denen bir kavram var ve yeni onlardan biri oluşturulan yeni bir fonksiyon denemek istedim: "Foo"

  • tıklamak Foo size INVALID_CHARACTER_ERR (5) verir sana bir şey
  • verir tıklandığında

    <button onclick="createAttribute('Pony')">Foo</button> 
    <button onclick="createAttribute('Magical pony')">Bar</button> 
    <script type="text/javascript"> 
        function createAttribute(name) { alert(name); } 
    </script> 
    
    • ya InvalidCharacterError: DOM Exception 5
    • senin dev konsolu açma ve createAttribute('Django') çalışan size

    ne oluyor düğmeleri 01 çağırarak olmasıdır uyarısı verirve dev konsolunuz bildirdiğiniz işlevi çağırıyor.

    Çözüm: farklı bir işlev adı veya daha iyisi, bir ad alanı kullanın.Biraz performanstan ödün hazırız ve harici kitaplık kullanabiliyorsa

    0

    kullanıyorum öneririm:

    Prototip JS

    var el = new Element('iframe', { 
        id: "<your id here>", 
        src: "<your source here>", 
        style: "<your style here>" 
    }); 
    

    jQuery

    var el = jQuery('<iframe>', { 
        id: '<your id here>', 
        src: "<your source here>", 
        style: "<your style here>" 
    })[0]; 
    

    Bu tarayıcılar arasındaki tüm tutarsızlıkları dikkate alır ve aynı zamanda daha da güzeldir :-)

    Not: Bu test edilmemiş pseudocode'tır - daha fazla bilgi için Prototype JS ve jQuery numaralı resmi belgeleme sayfalarına bakın.