共通のソースコードを外部ファイルに記述し JavaScript で読み込む

メニューのリンクリストやフッターなど、各ページに共通の部分があります。共通部分も、各ページに同じソースコードを記述する必要があります。ところが、ページ数が増えてきたりすると、共通のソースコード部分を修正したくなった場合、全てのページを修正しなければならなくなります。
そこで、共通部分は外部ファイルに書いて、必要なページでその外部ファイルを読込めば、もし修正が合った場合など、外部ファイルだけの修正で済みます。
外部ファイルを読込むことが出来る HTLM 用の言語は、色々ありますが、一番身近なのは JavaScript でしょう。ここでは、JavaScript をつかって、外部ファイルに書かれた共通ソースコードをインクルードする方法を、紹介します。

外部ファイルに書かれた共通ソースコードをインクルード

次のサンプルをクリックして、外部ファイルに書かれた HTLM を読込む例を確認してください。
サンプル: 外部ファイルの HTLM を読込むサンプル
このサンプルの HTLM ソースコードは、次の通りです。方法は、外部ファイルの document.write コマンドで、共通部分を書き出すだけです。

外部ファイルの HTLM を読込むサンプル

<html>
<head>
<title>外部テキストファイルのインクルード</title>
</head>
<body>
<p style="font-weight:bolder">
この下に、外部ファイルをインクルードして表示します。
</p>

<script type="text/javascript" src="incld.js"></script>

<p style="font-weight:bolder">
次は、簡易的に改行を使って HTLM を記述する例です。<br>
</p>

<script type="text/javascript" src="incld_cr.js"></script>

</body>
</html>

したがって、外部ファイルを読込む部分は、外部ジャバスクリプトを読込む次の記述になります。

<script type="text/javascript" src="incld.js"></script>

document.write では、> や < のタグも有効になりますので、HTLM も記述できます。改行は、使えません。ただし、「"」ダブルコーテーションや「'」シングルコーテーション「\」円記号(バックスラッシュ)などを使用したい場合は、「\」を前につけて、エスケープする必要があります。document.open() は、ドキュメントを開いて書き出し可能な状態にします。openメソッドで出力を開始したドキュメントは、document.close() で出力を終了します。document.write だけでも、動作することが多いようですが、 openメソッドを利用したほうが、トラブルが少ないようです。
上の部分にインクルードした、JavaScript で書かれた外部ファイルのソースコードは次の通りです。改行が使えないので、ちょっと読みづらくなります。

incld.js のソースコード

//インクルードサンプル(表示テキスト内に改行は使えない)
document.open();
document.write("<p>ここに書かれているのは、外部ファイル incld.js の内容です。<br>リンクも、リンク<a href=\"#\">リンク</a>のように、表示できます。</p>");
document.close();

改行を使った 外部ファイルの例

上記例は、改行が使えず、ソースコードがちょっと読みづらくなりました。JavaScript には、ヒアドキュメントのような記述がありませんので独自のスクリプト関数をつくらないと、document.write に、HTLM のソースコードをそのまま記載することは出来ません。
つぎに、簡易的に改行を使って、HTLM の表示を見やすくする方法を示します。記述を見やすくする例ですので、気に入った方法を利用してください。

incld_cr.js のソースコード

//インクルードサンプル(表示テキスト内に改行を使う方法)
var str1 = "\
<p>\
    ここに書かれているのは、外部ファイル incld_cr.js の内容です。<br>\
    リンクも、リンク<a href=\"#\">リンク</a>のように、表示できます。\
    改行の前に「\\」をつけて、エスケープしています。\
</p>\
";

var str2 = 
"<p>"+
 "1行目と"+
 "2行目の文字列を分割し「+」で接続するところで改行します。"+
"</p>";

document.open();
document.write(str1);
document.write(str2);
document.close();

str1 は、改行の前に「\」をつけてエスケープしています。なんと、改行もエスケープできるのです。
str2 は、一行ごとにダブルコーテーションで囲った文字列を「+」で接続しています。「+」で接続しているので、そこで改行できます。

PR amazon

author

サイト管理人:パワーデジット
管理人への連絡フォーム

ロリポップ! レンタルサーバーは、高機能なのに236円/月~
月額125円からの「さくらのレンタルサーバ
レンタルサーバー

スポンサード リンク

このページは 

トップページ > JavaScript > 共通ソース