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か!!!!!

posted by 天井冴太 at 00:42 | Comment(0) | TrackBack(1) | Study | このブログの読者になる | 更新情報をチェックする
投票お願いします 人気blogランキング - 投票する
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

コメント欄右下をドラッグ&ドロップすると、コメント欄の拡大縮小が出来ます。
認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

Google Chromeでは、ローカル環境(fileスキーマ)下だと、object要素で読まれたHTMLから親のHTMLを読む事が出来ない
Excerpt: 前回、object要素で読み込んだ(X)HTMLから、読み込み元のparam要素の内容を取得する方法の続き。 上記記事にて、 Chrome?さぁ、動くんじゃね?(投げやり) ……と、全くやる気が..
Weblog: AMAgrammar &amp;lt;&amp;gt; PROgrammer
Tracked: 2011-04-07 04:44
×

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