外部ファイル読み込み共通メニューのJSを実行する方法

こんばんは! 娘がインフルエンザになってしまったBenです。

20160201a.jpg
今日は自分のサイトを構築についてですが、上記のような構成でメニューなどの各ページ共通なものを外部ファイル化して適宜読み込もうとしました。そうすると、メニューを変更するときに、逐一全部のページを変えなくても外部ファイル一個だけ変更すればいいので便利かな。と思い作りました。その中で外部から読み込んだ部分のJavaScriptが動かないということがあり、いろいろ試行錯誤をしたのを紹介します。


    
まずは、jQueryでやってみました。上記のをHTMLのヘッド部分の最後に記述します。ここの場合、../は一顧上の親ディレクトリを差すので、id=menu_barのタグの中身に自分(このHTML)の親ディレクトリにあるmainmenu.htmlの中身を読み込んで表示しなさいというものです。なお、jQuery本体はWEBサイトからダウンロードして、自らのサーバの所定の位置にアップロードするとします。後日もう少し詳しくノートしますが、ダウンロードページの何個かあるうち、Productのついているので十分です。また、バージョンが1と2がありますが、1はIE8以下の古いブラウザ対応版で、マイクロソフトはこれらのサポートを打ち切ったので、今は最新のスマホなどにしっかり対応した2のほうがいいかも。アップロードした場所とHTMLファイルとの相対パスの表記にもはよく間違えます(^^;


body部分の表示したい場所にdivタグでid指定します。divの中身は空にしておきます。そうしないとうまくいかなかったり、うまくいっても元の内容は上書きされて消えてしまいます。さて、これでやるとメインメニューはOK、右メニューの中のサブメニューはOK、なぜか右のJavaScript(指定のアフィリエイトコード)が表示されません。

コードが間違ているのかと思い、外部読み込みでなくダイレクトにHTMLに張り付けるとしっかり見れます。また、right_menuのうち、サブメニューは正常に表示されているので、読み込みファイルの指定が間違っているのでもないです。残るは、jQueryで読み込んだ外部ファイルは実行されない可能性です。

document.write('
タイトル1

'); document.write('
');
そこで次の方法として、jsファイルにHTMLを吐き出すコードを記載して、それを直接HTMLで実行するという方法です。ファイル名を仮にmenu.jsとして表記のように記載します。実際はもっと長いですが… HTMLはダブルクォーテーション「”」でくくる場合が多いので、document.write自体はシングルクォート「’」で囲うとそのまま使えて便利です。ダブルクォーテーションで囲ってその中でダブルクォーテーションを入れたいときはその前に\を付けましょう。


そしてHTML中の読み込みたいところにご覧のようにスクリプトを読み込むタグを入れれば完了です。今回は楽天のモーションウィジェットでしたが、ご覧の方法で無事表示されました。Javascriptはまだ初心者なので、これからも精進していきたいと思います。

この記事へのコメント


この記事へのトラックバック