Ajaxを使用して外部ファイルをインクルードするjQueryプラグイン「jQuery-inc」
/*
inc v6
A super-tiny client-side include JavaScript jQuery plugin
<http://johannburkard.de/blog/programming/javascript/inc-a-super-tiny-client-side-include-javascript-jquery-plugin.html>
MIT license.
Johann Burkard
<http://johannburkard.de>
<mailto:johann@johannburkard.de>
*/
jQuery.fn.inc = function(url, transform, post, t, f, transfer) {return this.length ? this.each(function() {t = $(this);transfer = function(txt) {t.html($.isFunction(transform) ? transform(txt) : txt);post && post();};if ($.browser.msie) {$('<iframe>').hide().bind('readystatechange', function() {if (/m/.test(this.readyState)) {transfer(this.contentWindow.document.body.innerHTML);$(this).remove();}}).attr('src', url).appendTo(document.body);}else {$.ajax({url: url,complete: function(res, status) {/c/.test(status) && transfer(res.responseText);}});}}) : this;};
$(function() {$('[class*="inc"]').each(function() {$(this).inc(unescape(this.className.replace(/.*inc:([^ $]+)/, '$1')));});});
上記が件のプラグイン。
使用方法はとっても簡単。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="inc.js"></script>
で、jQueryとプラグインを読み込む。
あとは
<div class="inc:example.html"></div>
で自動読み込み完了。
詳しくは、ここで。
inc: A super-tiny client-side include JavaScript jQuery plugin