iframe要素のseamless属性

  • 投稿日:
  • by
  • カテゴリ:

HTML5&API入門HTML5&API入門」の本の中で、iframe要素の新しい属性として、「seamless」が追加されることが解説されていました。
「この属性がもっと昔からあれば良かったのに」と思える属性です(私の解釈が間違っていなければですが)。

HTML5.JPを見ると、seamless属性の仕様が詳しく書かれています。
HTML5&API入門」では、仕様を要約して、以下のように述べています。

seamless属性を適用すると、IFrame内のWebページは、その親となるページの一部であるかのようにふるまいます。

また、seamless属性の例として、以下が挙げられています。
ナビゲーションの部分を独立したファイルにしておいて、親HTMLに組み込むような内容に見えます。

<nav>
  <iframe seamless src="nav.include.html"></iframe>
</nav>

今のところ、seamless属性をサポートしているWebブラウザがまだないようなので、具体的な動作はまだ見ることができませんでした。
ただ、仕様を読んだ感じでは、seamless属性は、そのiframe要素の位置に、別ファイルのHTMLを流し込んで、親ページの一部であるかのように動作をするように思えます。

多くのWebページの中に、サイドバー等の共通部分があるときに、サーバー側でPHPやSSIを使って各ページに組み込むことがあります。
seamless属性が、私の思っている通りの動作をするなら、PHPやSSIで行っていたのとほぼ同様なことを、HTMLだけで行えることになるようです。
例えば、前述の例なら、ページの見た目的には、以下のPHPと同じになるという動作なのではないかと思います。

<nav>
  <?php readfile('nav.include.html'); ?>
</nav>

もっと昔からseamless属性があれば(かつ私の思っている通りの動作なら)、「Movable Typeはもっと楽に使えるソフトになっただろうに・・・」と思います。
例えば、ブログの全ページのサイドバーを最新の状態に保つために、現状だとサイドバーをPHPでモジュール化ことがよく行われています。
しかし、PHP化はそれなりにハードルが高いことで、抵抗がある人も少なくありません。
seamless属性が、私の思っている通りの動作をするなら、PHP化しなくても、HTMLだけでサイドバー等を最新の状態に保つことができます。

seamless属性の実際の動作を早く見てみたいです。

MT Cloud Starter Kit
Movable Typeのプラグイン集「MT Cloud Starter Kit」をぜひご利用ください