古い「.html」を変更するときに悩むのが、全ページ共通部分のヘッダーやナビ、フッターなどです。shtmlやshtmのページは問題ないのですが、htmlとなるとJavascriptかな？ということでやってみました。
が、外部ファイルを全部「.js」に書き換えないといけない・・・これは面倒だ。
jQueryを使えばできそう？
調べてみたらありました。外部のhtmlファイルをそのまま読み込む方法が！
やった！
が、しかし、これまたトラブルです。
トラブル1 読み込んでいるはずなのに表示されない
jQuery本体はサーバーに入れておきます。そして、HTMLファイルのHEAD内にloadを使って事前に外部ファイルを読み込みます。
<script>
$(function() {
$(“#header”).load(“http://netshop7.com/hoge/gaibu.html”);
});
</script>
プログラマーならこの記述に大きなミスがあるのがわかるのですが、コピペ利用歴だけはご立派なJSド素人です。
いろいろ試行錯誤すること数時間。
発見しました。
<script>
$(function() {
$(“#header”).load(“http://netshop7.com/hoge/gaibu.html”);
});
</script>
絶対パスは絶対パスでも「“/hoge/gaibu.html”」としないといけないところをフルパスで書いていたのが原因のようです。
同じ階層のページばかりに読み込ませる場合は、相対パスで書いていてスムーズに行ったと思いますが、今回は階層がバラバラ。
原因もわかり、これはうまく表示させることができました。
トラブル2 いつまで待っても画面真っ白！読み込まない！
同じ外部HTMLファイルを読み込んでいるのに、1つのファイルだけ、なかなか、というか永遠に読み込むことなく、画面はいつまで待っても真っ白です。ブラウザのタブの所は、ぐるぐる回っています。
パスも変えたし綴りのミスもないし。
ふと、当該外部ファイルを開いてみました。
そこには・・・
純粋なHTMLではなく、トラッキングタグをはじめ何種類かのjavascriptが含まれたファイルでした。おそらく、それが原因でしょう。
ただ、JSはわかりませんので、追求しようがないので、このファイルの読み込みはあきらめてHTMLに直接挿入することにしました。
後が大変だ！(ﾉ´Д`)
でも、jQueryおもしろ～
参考
http:// code-life.hatenablog.com/entry/2015/10/27/222803
