雑記/考察　<object>の動作

FlashやJavaApplet、画像などを埋め込むobjectタグで、フレームのようにHTMLを埋め込んだ場合の動作を研究。ブラウザによってその動作が違うことが分かった。

※テストブラウザのプラットフォームは全てWindows。

objectによるHTMLの埋め込み

データバインドなど、外部のテキストデータを直接埋め込むのではなく、フレームのようにobjectの枠内に外部ファイルを表示させる。 2005/07/20現在このサイトでも採用されている。

<object data="***.html" type="text/html" width="500" height="100">
代替テキスト
</object>

実際に埋め込んだ例

また、枠線を消すには埋め込むHTMLに次の記述を加える。

<style type="text/css">
<!--
html{
  border-style:none;
}
body{
  border-style:none;
}
-->
</style>
<body scroll="no">

例

※IE以外はこんな設定しなくとも元々枠線は表示されない。

objectの持つURL

フレームなどの場合、JavaScriptでURL(location.href)を表示させると、埋め込まれたページのURLと埋め込んだ親ウインドウのURLが取得できる。では、objectの場合どうだろうか？objectで読み込むファイルに次の記述をする。

<script type="text/javascript">
<!--
document.write('このウインドウのURL:',location.href);
document.write('<br>');
document.write('トップレベルのウインドウのURL:',top.location.href);
//-->
</script>

実際に記述した例。この結果をブラウザごとに表にする。

object内で取得できるパス
ブラウザ名	location.href	top.location.href
MSIE6 SP1	親ウインドウのパス	親ウインドウのパス
Mozilla Firefox1.x	読み込まれたファイルのパス	親ウインドウのパス
Opera7.x	読み込まれたファイルのパス	親ウインドウのパス
Netscape7.x	読み込まれたファイルのパス	親ウインドウのパス

見ての通り、IEだけ動作が違う。 IEの場合、objectに読み込まれたファイルのパスを、読み込まれたファイル自身は取得できない。 objectをフレームと認識していないせいだろう。

target属性の動作

続いて、object内でフレーム同様にtarget属性が働くかどうか実験する。

<a href="link2.html">属性なし</a><br>
<a href="link2.html" target="_blank">新規ウインドウ</a><br>
<a href="link2.html" target="_top">親ウインドウ</a><br>

実際に記述した例。この結果をブラウザごとに表にする。

object内でのtarget属性の働き
ブラウザ名	target無指定	新規(_blank)	親ウインドウ(_top)
MSIE6 SP1	同一ウインドウ	新規ウインドウ	同一ウインドウ
Mozilla Firefox1.x	同一ウインドウ	新規ウインドウ	親ウインドウ
Opera7.x	同一ウインドウ	新規ウインドウ	親ウインドウ
Netscape7.x	同一ウインドウ	新規ウインドウ	親ウインドウ

またもやIEだけ動作が違う。 IEはどう頑張ってもobjectの外に影響を与えることができない。これもまたobjectをフレームと認識していないせいだろう。しかも、JavaScriptなどはしっかりと独立しているので、親ウインドウに記述された関数を呼び出すこともできない。 IEではobjectで読み込まれたウインドウは"完全な隔離状態"になっている。

<object>の動作

objectによるHTMLの埋め込み

objectの持つURL

target属性の動作

ページ情報