HTMLのヘッダ-（フッター）共通化で困っています

Question

ＨＴＭＬとJavascriptは初心者の部類です。
　
　仕事上、ある元のHTML（index.html）のヘッダー部分を取り出し、別のHTML（header.html）に書き込み、何らかの方法で元HTMLへ、先程取り出して新しく作ったHTMLの内容を引き込めないか考えています。（他にも何枚もあるHTMLファイルのヘッダ部分を一度に共通化したい為。）ネットをぐるぐるさがして、phpやSSIなる技術を使うと簡単に出来るよと書いてありますが、サーバーの設定をいじらなければならないので、今はあえて触れていません。いろいろ探して、以下のサイトにJavascriptを利用して、別ＨＴＭＬを引き込むスクリプトを発見したので、早速試してみました。

参照サイト:http://d.hatena.ne.jp/kenpoco/20080501/1209636103

ＨＰ編集用に、フリーソフトのＨＰＰｒｏｊｅｃｔ2を利用しているのですが、そちらのビュー機能では正常に表示されるところまで作成できました（リンクや画像、CSS等も生きてます）。ただ、肝心のブラウザで見た時に、うまく読み込まれませんでした。

別の方法で、以下のサイトの方法も試してみました。

参照サイト:http://tani.dank-hearts.com/2008/03/javascripthtml.html

こちらに関しては、ビュー機能内でも正常に表示されず、header.html内の内容がそのまま文字列として出力されてしまったり、文字化けしてしまったりしました。

こちらの都合でソースコードを上げることができないので、説明不足かもしれませんが、同じような問題に遭遇した方や、なにか他に注意するべきことがあることをご存知の方がいらっしゃりましたら、お知恵をお貸しいただければとても助かります。よろしくお願い致します。
（プログラミング経験ですが、C言語はひと通り勉強しています）

ORUKA1951 · Accepted Answer

基本的にそのような目的にjavascriptは決して使いません。ヘッダー部分は、検索エンジンが最初に解釈する部分ですが、検索エンジンはjavascriptなんて理解しません。検索エンジンどころかjavascriptでドキュメントの書き換えを禁止しているユーザーや、そもそもjavascriptを解釈しないユーザーエージェントには無意味です。　高機能なテキストエディタで、一挙に書き換えるほうが断然早いし簡単です。 /^ /$header/s; とか・・・・・もちろんPerlを使っても良い。　もちろん、一番簡単なのはサーバー側で書き換えることですが・・phpもSSIも使わず、簡単なCGIだけで・・ .htaccess AddType application/x-httpd-cgi html; とでもして html　は単純なCGIで内容は open FILE,$ENV{'PATH_INFO'}; while(){ s/__HEADER__/$header; s/__FOOTER__/$footer; print; } とか・・・

flyingbee · Answer

JAVAScriptのDocument.writeでタグを書き出してくれます。例えば document.write('

あいうえお

'); これをヘッダ部にやればいけるかもしれませんが、たぶんダメでしょう。理由はヘッダ部のJAVAScriptは多分、定義だけで実行しないのではないでしょうか。それとヘッダ部が厳しい理由にもう１つ、遅延が挙げられます。ヘッダ部がではなく

dscripty · Answer

1) Dreamweaver のような高機能な HTML エディタを使う。

ヘッダ、フッダなどの共通部分を無理なく、全ページ同時に編集できるらしいよ？

楽でいいね。

2) 高機能なテキストエディタをつかう。

複数ファイルにまたがって、文字列の置換ができるよ？

慣れれば、かなり早く一度に置換できるからおすすめ。

3) あとは、php や Perl をサーバじゃなくて、ローカルで実行して、出力される結果をファイルに保存してそれをサーバにアップロードする。

表結果を確認するのに、HTML の出力が必要だから、HTML と CSS に不慣れだと、すこし大変かな？

さいごに、

共通部分を JavaScript でインクルードすると、JavaScript を無効にしてるひとには全く表示されないからおすすめできないよ？

それなら、フレームで作ったほうがまだましかなぁ。。。

kiyomac#1 · Answer

各ページのレイアウトを指定したいのでは無いですか？
若しそれで有れば『ヘッダ』の所でCSSファイルを指定すればOK
<link rel="stylesheet" href="http://www.XXX.com/home.css" type="text/css" />

HTMLのヘッダ-（フッター）共通化で困っています

基本的にそのような目的にjavascriptは決して使いません。

JAVAScriptのDocument.writeでタグを書き出してくれます。

1) Dreamweaver のような高機能な HTML エディタを使う。

各ページのレイアウトを指定したいのでは無いですか？

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング