2011年03月31日

object要素で読み込んだ(X)HTMLから、読み込み元のparam要素の内容を取得する方法

XHTMLHTML(以下単にHTMLと表記)のobject要素は、例えばFlashや各種動画ファイル等を読み込む為に使われるが、HTMLファイルを指定する事で、そのファイルをインラインフレーム表示出来る。

そして、object要素へ渡すパラメータ群は、子要素のparam要素で指定する事になっている。

……という事は、object要素で開いたHTMLからparam要素の内容を取得出来る筈だよね?という訳で調べてみた。

コード

結論としては以下の手法で。前者がobject要素を使う方(main.html)、後者がobject要素で読み込まれる方(in.html)。Firefox 4.0、Palemoon 3.6.15、Opera 11.0にて確認。

Chrome?さぁ、動くんじゃね?(投げやり)(別記事で言及する予定別記事にまとめた。Google Chromeでは、ローカル環境(fileスキーマ)下だと、object要素で読まれたHTMLから親のHTMLを読む事が出来ない)

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>outer</title>
	<style type="text/css">/* <![CDATA[ */
		object { border: 1px dotted red; }
	/* ]]> */</style>
</head>

<body>
	<p>
		<object data="in.html" name="inner" id="inner">
			<param name="param1" value="value1" />
			<param name="param2" value="value2" />
		</object>
	</p>
</body>
</html>
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>inner</title>
	<style type="text/css">/* <![CDATA[ */
		/* objectで現れる境界線を消す
		 * via: http://www.usamimi.info/~geko/arch_web/03_memo/001_object/index.html
		 */
		html, body { border-style: none; }
	/* ]]> */</style>
	<script type="application/javascript"> // <![CDATA[
		function hoge() {
			var outerDoc = window.parent.document;	// 外部のHTMLのdocumentオブジェクト
			var obj;
			obj = outerDoc.getElementById("inner");
			var params = obj.getElementsByTagName("param");	// param要素群

			// param要素群の名前と値をリストアップする
			var i;
			var table = document.createElement("table");
			for(i = 0; i < params.length; ++i) {
				var tr = document.createElement("tr");
				var th = document.createElement("th");
				var td = document.createElement("td");
				th.innerHTML = params.item(i).getAttribute("name");	// param要素のname属性
				td.innerHTML = params.item(i).getAttribute("value");	// param要素のvalue属性
				tr.appendChild(th);
				tr.appendChild(td);
				table.appendChild(tr);
			}
			document.getElementById("paramsC").appendChild(table);
		}

		window.addEventListener("load", hoge, false);
	// ]]></script>
</head>

<body>
	<div id="paramsC"></div>
</body>
</html>

実動サンプルはこちら

では解説

先ずはmain.htmlから。

<object data="in.html" name="inner" id="inner">
	<param name="param1" value="value1" />
	<param name="param2" value="value2" />
</object>

object要素のdata属性に、読み込むHTMLファイル(ここではin.html)を指定。また、id属性を設定している点に注意。このid属性を元に、in.html側からparam要素の読み取りを行う。

次にin.html

var outerDoc = window.parent.document;	// 外部のHTMLのdocumentオブジェクト
var obj;
obj = outerDoc.getElementById("inner");
var params = obj.getElementsByTagName("param");	// param要素群

window.parentが読み込み元のHTMLのWindowオブジェクトに相当する。そこからdocumentを取得すれば、読み込み元HTMLをDOMに従って読み出す事が出来る(ただし書き込みは出来ない)。

よって、window.parent.documentgetElementByIdメソッドで取得したいparam要素を持つobjectを取得し、更にそのオブジェクトのgetElementsByTagNameメソッドを呼び出す事でparam要素(群)を取得出来る。

th.innerHTML = params.item(i).getAttribute("name");
td.innerHTML = params.item(i).getAttribute("value");

後は普通に各param要素のDOMノードからgetAttributeメソッドでname属性、value属性を読み出す事が可能。

IEの話

[object要素で読み込んだHTMLからparam要素を参照するサンプルをIE8で表示させた画面]全く正常に動きません。
開発者ツールも何処が悪いか教えてくれないので、全く原因不明です。
さぁ皆様声を合わせて!

またIEか!!!!!

ラベル:HTML XHTML javascript
posted by 天井冴太 at 00:42| Comment(0) | TrackBack(1) | Study | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は180日以上新しい記事の投稿がないブログに表示されております。