web-dev-qa-db-ja.com

IE9の無​​効な文字DOM例外

IE8で使用されていた次のJSの部分は、現在IE9で失敗しています。

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>');

次の例外が表示されます：SCRIPT5022：DOM Exception：INVALID_CHARACTER_ERR（5）

上記のコードは標準に準拠していませんか？この問題の修正は何ですか？

javascriptdominternet-explorer-9domexception
29
Pramanat

CreateElementのAPIは、コンストラクターが要素の名前を指定するstringを必要とすることを指定します。 IE9はより厳密に標準に従っているようです。次のコードを使用して、同じことを実行できます。

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

29
Adam Ayres

JQuery.bgiframe.jsの場合、間違ったIE6テストを修正するより良い解決策でしょうか？

これを置き換えるのはどうですか：

if($.browser.msie&&/6.0/.test(navigator.userAgent)

このようなもので：

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

Jquery.bgiframe.jsの場合：

バージョン1.1.3を事前にダウンロードしました

https://github.com/brandonaaron/bgiframe/blob/master/jquery.bgiframe.js

これで問題は解決しました。

7
Tillito

このエラーは、名前空間を使用しない場合、誤って標準のJavaScript関数名を独自の関数名として使用すると発生する可能性があります。たとえば、「属性」という概念があり、それらの新しい関数を作成する新しい関数を試してみました。

_<button onclick="createAttribute('Pony')">Foo</button>
<button onclick="createAttribute('Magical pony')">Bar</button>
<script type="text/javascript">
    function createAttribute(name) { alert(name); } 
</script>
_
  • 「Foo」をクリックしても何も表示されません
  • Fooをクリックすると、INVALID_CHARACTER_ERR (5)または_InvalidCharacterError: DOM Exception 5_が表示されます
  • 開発コンソールを開いてcreateAttribute('Django')を実行すると、アラートが表示されます

起こっているのは、ボタンが document.createAttribute() を呼び出しており、開発者コンソールが宣言した関数を呼び出していることです。

解決策：別の関数名を使用するか、名前空間を使用します。

0
Nenotlep

パフォーマンスを少し犠牲にして、外部ライブラリを使用できる場合は、以下を使用することをお勧めします。

プロトタイプ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];

これにより、ブラウザー間のすべての不整合が処理され、かなりきれいになります:-)

注：これはテストされていない擬似コードです。詳細については、 プロトタイプJS および jQuery の公式ドキュメントページを参照してください。

0
Niko