iframeのseamless属性を試してみた

以前に、当ブログで「iframe要素のseamless属性」という記事を書きました。
seamless属性の仕様を見た限りでは、Ajaxで要素のinnerHTMLを書き換えるのと同じように、Webページの中に他のファイルからHTMLを流し込むようなイメージになるように読めたので、ぜひ使ってみたいと思っていました。
しかし、その当時は、まだseamless属性に対応したWebブラウザはありませんでした。

久々にseamless属性のことを思い出して、最近はどうなっているか調べてみました。
すると、WebkitのNightly Buildや、Google Chromeのdevブランチで、seamless属性に対応していることが分かりました。そこで、Google Chromeのdevブランチを使って、早速試してみました。

1.seamless属性の概要

iframeのseamless属性は、W3CのHTML5のWorking Draftには以下のように書かれています。

The seamless attribute is a boolean attribute. When specified, it indicates that the iframe element's browsing context is to be rendered in a manner that makes it appear to be part of the containing document (seamlessly included in the parent document).

大まかに言えば、「seamless属性を付けたiframeは、その親ドキュメントの一部であるかのように振る舞う」ということです。
具体的には、以下のような効果が得られます。

iframe内の各要素には、親ドキュメントのスタイルが継承されます。
iframe内のリンクをクリックした時には、iframe内でページが遷移するのではなく、親ドキュメント上でリンクをクリックしたのと同様のページ遷移が起こります。

2.seamless属性のテスト

seamless属性のテストを行ってみました。

2-1.テスト用のHTMLとCSS

以下のようなごく簡単なHTMLを作ってみました。
各ページの先頭に、ナビゲーションを出力することを想定しています。
また、ナビゲーションのul要素にはスタイルを適用して、li要素が横並びになるようにします。

・index.html（body要素の内部）

<nav>
  <iframe src="nav.html" seamless="seamless"></iframe>
</nav>
<p>seamless属性のテスト</p>

・nav.html

<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="page1.html">Page1</a></li>
  <li><a href="page2.html">Page2</a></li>
  <li><a href="page3.html">Page3</a></li>
</ul>

・page1.html（body要素の内部）

<nav>
  <iframe src="nav.html" seamless="seamless"></iframe>
</nav>
<p>Page1</p>

・スタイルシート

body {
  margin : 0;
  padding : 0;
}
ul {
  padding-left : 0;
  list-style-type: none;
}
ul li {
  display : inline;
}

2-2.seamless属性未対応のWebブラウザでの動作

seamless属性に対応していないWebブラウザだと、nav.htmlにはスタイルは適用されないので、以下のような表示になります。
ul要素内のli要素は、通常通り縦に並びます。
また、iframe要素の部分には枠が表示されます。

さらに、ページ遷移のリンクをクリックすると、リンク先のページはiframe内に表示されます。

2-2.seamless属性対応のWebブラウザでの動作

一方、seamless属性に対応しているWebブラウザだと、以下のような表示になりました。
nav.html内のul要素にスタイルが適用され、li要素が横並びになります。
また、iframe要素には枠は表示されません。

また、ページ遷移のリンクをクリックすると、親ドキュメント上にリンクがある時と同様に、ページ全体が遷移しました。

なお、こちらにテスト用のHTML等を置いておきましたので、実際の動作を試してみることができます。

3.静的サイトでぜひ使いたい

サイトの各ページを静的に（PHPやSSIを使わずに）出力し、かつナビゲーションやサイドバーを共通化したいということは、少なくありません。
今までのHTMLだと、ナビゲーションやサイドバーを修正するたびに、サイト内の全ページを更新することが必要で、作業が面倒でした。
しかし、iframeのseamless属性を使うと、ナビゲーションやサイドバーを独立したファイルにしておき、それらのファイルを修正するだけで、サイト内の全ページのナビゲーション／サイドバーを自動的に更新できることになります。

以前の記事にも書きましたが、seamless属性を使えば、Movable Typeでは再構築が必要になる場面が大幅に減少します。
昔からseamless属性があったなら、Movable Typeはもっと受け入れられていたのではないかと思います。

お知らせ