XHTML、HTML(以下単に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.documentのgetElementByIdメソッドで取得したい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で表示させた画面]](https://agpg.up.seesaa.net/image/getparamsinobjecthtml_ie8-thumbnail2.png)
全く正常に動きません。
開発者ツールも何処が悪いか教えてくれないので、全く原因不明です。
さぁ皆様声を合わせて!
またIEか!!!!!
![[動作せず]](https://agpg.up.seesaa.net/code/chrome_object_cannotrun.png)
![[window.parent.documentがundefined]](https://agpg.up.seesaa.net/image/chrome_object_windowparentdocumentisundefined.png)
![[window.parentはDOMWindow型]](https://agpg.up.seesaa.net/image/chrome_object_windowparentisdomwindow.png)
![[object要素で読み込んだHTMLからparam要素を参照するサンプルをIE8で表示させた画面]](https://agpg.up.seesaa.net/image/getparamsinobjecthtml_ie8.png)
![[Boost.Preprocessor各型の変換マクロ一覧]listsとtuples、tuplesとsequencesは相互変換可能。sequencesからarrays、arraysからtuplesの変換は可能だが、その逆は用意されていない。](https://agpg.up.seesaa.net/image/boostpreprocessor.png)
