ソフトウェア開発者の日常

こだわりなく書きたいことを書いていきます。

HTML:iframeでフッターを共通化できるか試している

スポンサーリンク

なかなか思った通りにはいかないな。

f:id:AJYA:20120920212657j:plain

photo credit: linh.ngan via photo pin cc

 

状況

お客さんから、ホームページの更新方法の相談を受けている。

HTMLで書かれた静的ページが何ページかあるが、フッター部分に手を加えようとすると、今は全てのページを変更しなくてはいけない。

これを1箇所修正して、複数ページに反映されるようになって欲しいとのこと。

 

考えたこと その1

PHPが使えるサーバーにホームページを設置されているので、PHPにしてしまってフッターも部品化して、

<?php

require_once("../parts/footer.php");

?>

としてしまえばいいが、各ページのURLが変わってしまうので、リンクも変更しなくてはいけないので、結構手間がかかる。

 

考えたこと その2

HTMLのままで対処できないか考えたら、iframeタグでなんとかなるのではと考えて、試してみた。

 

結果

iframeタグを使って分割したフッターを読み込むようにしたが、幅300px、高さ150pxでなぜか表示される。

FirefoxFirebugを使ってチェックしても、どこかで指定しているかわからないので、勝手になっているっぽい。

調べたら、widthがピクセルか%で指定できることがわかったので、

<iframe src="../footer/index.html" scrolling="no" frameborder="0" style="width:100%;"></iframe>

としたら、横幅はブラウザの最大サイズまで自動調整された。

高さは、JavaScriptで取得する方法が検索で見つかったので、取り入れてみようと考えている。

 

JavaScriptで高さが自動で調整できるようになれば、ブラウザ違いを試してみて、よければ、他のページにも試しに導入してみて、全ページで大丈夫そうか、見極める予定をしている。