2

私は今数日間立ち往生しているというこの問題を抱えています。DOM に svg を追加しようとしています。カスタム名前空間があり、それらがDOMに追加され、それらを追加した親要素のinnerHTMLプロパティを取得しようとすると、いくつかのランダムな名前空間で取得されます。これは IE9 でのみ発生します。

例：

$(document).ready(function () {
 var svg = '<svg xmlns="http://www.w3.org/2000/svg" ns:attr="val" />';
 alert($("div").append(svg).html());
});

出力は次のようになります。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:NS1="" NS1:a:b="val" />

これをどのように解決できますか？名前空間を定義しようとしましたが、再び機能しません。ここにjsfiddleリンクがありますhttp://jsfiddle.net/RwNqk/3/

前もって感謝します。

4

1 に答える 1

2

まず、JSFiddle に XHTML ではなく HTML ドキュメントがあります。HTML にはカスタム名前空間がなく、XML/XHTML だけがそれを持っています。

次に、ns名前空間が何であるかを定義せずに名前空間プレフィックスを使用しています。他のブラウザがまったく機能するのは不思議です。

第三に、これらの問題を修正したとしても、(残念ながら) jQuery を使用して、以前に定義された名前空間プレフィックスを使用して要素を DOM に詰め込むことはできません。

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:foo="hello"><head>
  <title>Using jQuery to add namespaced attribute</title>
</head><body>
  <div><p foo:bar="yes">one</p></div>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript"><![CDATA[
    var xhtml = '<p foo:bar="no">two</p>';
    alert($('div').html());
    try{ $('div').append(xhtml); }
    catch(e){ alert(e);          }
  ]]></script>
</body></html>

最初のアラートは、カスタム名前空間が機能していることを示しています。
<p xmlns="http://www.w3.org/1999/xhtml" foo:bar="yes" xmlns:foo="hello">one</p>

2 番目のアラートは失敗を示しています。

[Firefox] "An invalid or illegal string was specified"  code: "12"
[Chrome]  Error: SYNTAX_ERR: DOM Exception 12
[IE9]     DOM EXception: SYNTAX_ERR (12)

これは IE9 や SVG とは関係ありません。主にjQueryと関係があります。( .innerHTMLIE9 と FF で DOM 要素の を設定すると、希望どおりに動作しますが、Chrome では動作しません。)

于 2012-08-15T15:42:19.663 に答える