2007 Dec 27

テキスト情報を記入した外部ファイルを用意して、その内容をHTMLファイル内に表示させる javascriptのご紹介。

とはいっても、phpファイルとかを使えば簡単にできたりするんですけどね〜(´―`;)
phpファイルが使えない環境でのイレギュラーの依頼を承けたので、知ってても良いかなと思っておいておきます。
サンプルデモを作っても分かり難いと思いますので、この記事の最後に書いています参考サイト様でご確認ください。
※以前は、.txtしか読み込めなかったのですけど、最新バージョン(ver.4)では.htmlも◎
head情報に文字コードを入力できるので、文字化けする時は外部ファイルをHTMLファイルにすると設定が楽です。

※2010.0209追記
現在「jquery.inc-5.js」へバージョンアップしてるようです。
検証の結果「jquery.inc-4.js」と同じ様に使えましたので、設定方法はこのまま参考にしてください。

(1)まず、javascriptファイル「jquery.inc-4.js」、「jquery.js」をダウンロードします。

◎ incサイト
「jquery.inc-4.js」をダウンロード

◎ jQuery サイト
「jquery.js」をダウンロードします。

(2)表示させたいHTMLファイルのhead部分に以下の文章を記載。

<script src="ドメイン名/js/jquery.js" type="text/javascript"></script> <script src="ドメイン名/js/jquery.inc-4.js" type="text/javascript"></script>
※ドメイン名、フォルダ名等は任意で変更してください。

(3)表示させたい箇所の記入方法

<p class="inc:読込ファイル">※Javascriptが有効になっていません。有効にしてください。</p>

※Pタグではなく、DIVタグに変更しても表現できました。

(4)クリック等のアクションで変更したい場合は以下のように記入します。

<p onclick="$(this).inc('読込ファイル');">※Javascriptが有効になっていません。有効にしてください。</p>

こんな感じ。

PHPファイルを置けない環境で、includeファイルを設置したい!とか、一部のページのみ Movable Typeを使って更新しているのですけど、Movable Typeが管理していないファイルに、エントリー内容を表示させたい!というのには便利かもです。

参考サイト様:

◎テキストファイルをClient Side Includeできるjavascript「inc」 : skuare.net
http://www.skuare.net/2007/11/client_side_includejavascripti.html

TrackBack

このエントリーのトラックバックURL; http://mtw.cocotte.jp/cgi-bin/mt4/mt-tb.cgi/276
このエントリーのリンクURL: http://mtw.cocotte.jp/blog/diary/html/2007/12/27-2219.php

Comment