静的HTMLに静的HTMLをincludeする簡単な方法はありますか？

Question

現在はこちらを参考に表題を実現させています。
静的HTMLで、インクルードを実現するためのJavaScript

やりたいことは、画面上部に同じメニューがある複数の静的HTMLがあり、
メニュー箇所を外だしすることで変更時に１カ所だけ修正するようにしたいのです。

Include条件としては
・サーバサイドプログラムは利用したくない
SSIやPHPでHTMLの組み合わせはNG。
クライアントから（PHPをコールしHTML出力させる）外部呼び出しもNG

・セキュリティ的にiFrameはやりたくない

・ユーザビリティから
HTML5は利用したくない
jQueryとか重いJSは読みたくない

といった制約があります。

クライアント側でJSを使って結合させる方法しかなさそうですが、、、

最近の技術で良い方法あれば教えてください。
単純にさくっと include させたいだけです。

Answer 1

全然最近の物じゃないですが...

<object type="text/html" data="include.html"></object>

これくらいしか思いつきません。

Comments

[kurosawa]

そうですね。私も最初にこれを実施してみたのですが
この手法だとHTMLがオブジェクト内部で展開されてしまうので、
リンク配置で押下するとオブジェクト内で展開されてしまうのです。

さっくり簡単にできるのですが、凄くおしい！

ご返答ありがとうございました！

[退会済みユーザー]

そこが問題なんでしたら　メニューの<a>にtarget属性を指定で解決できませんかね？

[kurosawa]

さっそくの返答ありがとうございます。

target属性をすべて指定してみましたが、当然”_blank”はNGとして
その他は、すべて内部で展開されてしまいます。

_selfはオブジェクト内を自分自身のウィンドウと認識しているようですし、
_top,_parentはそもそもフレーム分割していないので、やはり自分自身の
オブジェクト内で展開されてしまうのかと思っています。

ご指摘ありがとうございました！

[退会済みユーザー]

target="_parent"　で試した所上手く行きましたけどね..
chromでしか試してませんが

いずれにしても　ifreamと同じことになりますけどね。
お力になれなくて..残念です。
良い対策が見つかったら　また　投稿してください。

[kurosawa]

ごめんなさい。
再度検証してみたら、target="_parent" で動作しました！（FF/Safariで確認）

OBJECTタグの縦横の調整は若干必要ですが、
余計なJSなどを使わずに要件が実現できそうです。

> target="_parent"　で試した所上手く行きましたけどね..
この一言が無ければ諦めるところでした。ありがとうございました！

これで実装してみます。

Answer 2

メニューを読み込むのではなく、コンテンツ部分をajaxで切り替えていくとか。
PHP使えばいいのに。

Comments

[kurosawa]

ご返答ありがとうございます。
中規模までなら、その手法でいけますね。
ただし大規模サイトとなると問題がでてくるのです。

リソース面から静的ページにはなるべくCPUを利用させたくない。
ページ単位の処理時間も最小限にしたい。という要望があるので、
さらに今後の保守性も考えて簡単に実現できないものか？と考えてました。

どうしてもスクリプト系は重いし、
脆弱性パッチの適用などの運用が必要になってくるので
それは避けたいと思っています。

[sounisi5011]

PHP等を利用して動的にHTMLを生成した後、それをファイル化し、以後それを参照するようにしておけば、
最初の生成時のみPHPで変換するため、負荷を下げることも可能です。

[kurosawa]

コメントありがとうございます。
おっしゃるとおり、バックエンドで作成する手法もありますね。

ただ、ウェブサーバのリソース問題は解決しますが
今後スコープが拡張した際に、そのバッチに手を加えるなどのメンテナンスが
少なからず発生します。

よって、今回はHTMLだけで完結する手法を探しておりました。

わざわざご返答くださいまして、ありがとうございます。