WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:innerHTMLの代用

0:[投稿] 小倉 [2006/09/21 06:36 ] [環境:Apache WindowsXP SP2+FireFox1.5]

現在、動的に編集されたタグ付きのHTMLソースをinnerHTMLを用いて指定箇所に表示させるページを作ろうとしています。

普通ならばこれでも問題なかったのですが、実際に表示させるページがXHTMLであった場合はinnerHTMLによる出力が出来ないようです(FireFox1.5の場合)。
そうなると、DOMとしてJavascriptから操作して書き加えるという方法が思いついたのですが、入力ソースの構造が不定ということでなかなかよい方法が思いつきません。

Firefox上で動く、innerHTMLの代用に使えるような汎用的な(タグの入れ子構造を保った)出力方法はないものでしょうか。
またそういった関数を公開されているサイトがあれば是非教えていただきたく存じます。


1:[回答] m035 [2006/09/21 13:31 ][URL]

XHTMLはよく分かりませんが、iframeにdocument.writeすることが出来れば出来るかと思います。
ボーダーを消せば見栄えも何とかなるでしょうし。
http://www.geocities.jp/ram0kb/js/html_previewer.html


2:[回答] 燕雀 [2006/09/21 23:01 ]

具体的にどのようなタグが解釈されないのですか?
innerHTMLによる出力が出来ない例を公開いただけますか?


3:[回答] 鳩 [2006/09/22 02:16 ]

innerHTML は DOM における公式のプロパティではないものの,多くのブラウザの HTMLElement に便宜上実装されています。しかし当然ながら,XML な Document,Element 上では使用できません(名前空間を XHTML のものにすれば DOM HTML の API を使える実装もありますが,innerHTML は期待できません)。

// Opera, cf. http://www.w3.org/TR/DOM-Level-3-LS/
if (document.implementation.hasFeature('LS', '3.0')) {
 var input = document.implementation.createLSInput();
 input.stringData = '<p><em>Hello<\/em><\/p>'; // 接頭辞は必要に応じて
 var parser = document.implementation.createLSParser(document.implementation.MODE_SYNCHRONOUS, null);
 var doc = parser.parse(input);
 var node = doc.documentElement;
}

// Gecko, cf. http://developer.mozilla.org/en/docs/DOMParser
if (typeof DOMParser != 'undefined') {
 var parser = new DOMParser;
 var doc = parser.parseFromString('<p><em>Hello<\/em><\/p>', 'application/xhtml+xml');
 var node = doc.documentElement;
}


4:[回答] 小倉 [2006/09/22 02:43 ]

> m035さん

簡単なサンプルにて試してみたのですが、どうもXHTMLではdocument.writeも無効となっているようです。

念のため調べてみたのですが、やはり使えないようです。
参考:http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite
この記事を見ると、innerHTMLが使えないのも同様の理由かも知れません。

> 燕雀さん

テスト用に簡素化したものでは、スクリプト部分で、

teststring1 ="<math xmlns=\"&mathml;\"><mfrac><mi>a</mi><mi>b</mi></mfrac></math>";
alert(teststring1);
document.getElementById(matharea).innerHTML= teststring1;

と記述し、
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN"
              "http://www.w3.org/TR/MathML2/dtd/xhtml-math11-f.dtd" [
 <!ENTITY mathml "http://www.w3.org/1998/Math/MathML">
]>  

 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
といった宣言を行っています。
そしてbody内に
<div id="matharea"> </div>
を記述し、上記の簡略化されたスクリプトを動かしたのですが、やはりinnerHTMLでは値そのものが渡されないようです。(当然ながらalert()までは動くのですが)


5:[回答] 小倉 [2006/09/22 03:29 ]

> 鳩さん

回答有り難うございます!

やはりXMLのdocumentにinnerHTMLで直接書き出せるというのは不味いのでしょうね。
ソースを拝見したのですが、var nodeが入力文のルートノードでこれを出力先に子ノードとして追加するという解釈で宜しいのでしょうか。
確かにこれなら出来るような気がしてきました。
重ね重ね、本当にありがとうございます。


6:[回答] 鳩 [2006/09/22 05:19 ]

>>3
補足ですが,Firefox だと現状,

(a) application/xhtml+xml として読み込んだ XHTML では,innerHTML を使用できます。
(b) text/xml,application/xml として読み込んだ XHTML では,
・ルートノードが HTMLDocument ではないので,HTMLDocument のメンバである document.write や document.body などは使用できません。
・名前空間が XHTML の Element は HTMLElement と見なされ,DOM HTML の API が使えます(この動作が妥当かどうかは議論の余地がある)。ただし,innerHTML は使用できません。

ですから,どうしても innerHTML が必要なら MIME 型を変更してみるのも手かもしれません……が,お勧めはしません。

>>5
そうですね。Firefox の parser.parseFromString の戻り値は Document なので,生成された p 要素ノードは doc.documentElement に格納されます。

Opera(および DOM3-LS)も同様です。もっとも,Opera は parser.parseWithContext で直接 Node を取得することも可能です。

なお,DOM とは別のアプローチとして,Firefox 1.5 なら ECMAScript for XML(E4X)が使えます。私はあまり触ったことがないのですが,DOM 操作よりは遥かに楽そうです。仕様の邦訳も公開されています。
http://www.ne.jp/asahi/nanto/moon/specs/ecma-357.html


7:[回答] 鳩 [2006/09/22 10:42 ]

>>6
すみません,誤りがあります。

> 名前空間が XHTML の Element は……ただし,innerHTML は使用できません。

Firefox 1.5 は,MIME 型にかかわらず,要素の名前空間が XHTML であれば innerHTML を使用できるはずです。

# Firefox 1.0x 以前では,application/xhtml+xml な XHTML で innerHTML を使用できないバグがあったので,いろいろごっちゃになっていました。すみません。

Firefox 1.5/Windows XP で以下の動作を確認しました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "http://www.w3.org/TR/MathML2/dtd/xhtml-math11-f.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink">
<head><title>TEST</title></head>
<body>
<div id="matharea"></div>
<script type="text/javascript"><![CDATA[
var src = '<math xmlns="http://www.w3.org/1998/Math/MathML"><mfrac><mi>a</mi><mi>b</mi></mfrac></math>';
document.getElementById('matharea').innerHTML = src;
]]></script>
</body>
</html>


8:[完了] 小倉 [2006/09/23 04:37 ]

確かに今確認したところ…なんかFirefox1.5でも出来ました。
何だったんだろう(苦笑)

回答(必須): 状態:

お名前(必須):

URL:




[戻る]