静的HTMLで、インクルードを実現するためのJavaScript
ローカルディスク上に存在する静的HTMLで、外部ファイルをインクルードするためのスクリプト(つまり、XMLHttpRequestオブジェクトの代わり)。
以前にも同じようなエントリを書いたのですが(http://d.hatena.ne.jp/kenpoco/20080228/1204198090)、いくつか不具合があったので修正してます。
- IE6,7に対応(前回はFirefox2のみ)。
- インクルードするファイルの拡張子が.HTMLと.TXTで動作が異なっていたので、その対応。
- インクルードした後で、その内容を変更するための仕組みを追加。
最近HTMLを作る機会が多いので自分で使ってみてるのですが、けっこう重宝してます。全ページに同じようなヘッダー部分がある場合なんかに、ヘッダー部分を1ファイルにまとめておけるので、その後の修正がかなり楽。
【使用例】 ----------------------- インクルード部分 ----------------------- <div> <script type="text/javascript" > include("a.html"); ←HTML内のインクルードしたいところに記入 </script> </div> ----------------------- インクルードされるファイル(a.html) ----------------------- <div style="border: solid 1px #000000;">hello;</div> ----------------------- インクルード結果(表示後にinnerHTMLで確認) ----------------------- <div> <script type="text/javascript" > </script> <div style="border: solid 1px #000000;">hello;</div> ←includeした内容が<script>タグの下のところに入る </div>
【関数本体】 ----------------------- function include(filename, afterfunc) { include.seq = (include.seq)? include.seq + 1: 1; var id = new Date().getTime() + "-" + include.seq; var inc = document.createElement("iframe"); inc.id = "inc-" + id; inc.src = filename; inc.style.display = "none"; document.write("<span id=\"" + id + "\"></span>"); var incfunc = function() { var s = (function() { var suffix = (n = filename.lastIndexOf(".")) >= 0 ? filename.substring(n): "default"; if (suffix == ".html") return inc.contentWindow.document.body.innerHTML; if (suffix == ".txt") return inc.contentWindow.document.body.firstChild.innerHTML; if (suffix == "default") return inc.contentWindow.document.body.innerHTML; })(); var span = document.getElementById(id); var insertBeforeHTML = function(htmlStr, refNode) { if (document.createRange) { var range = document.createRange(); range.setStartBefore(refNode); refNode.parentNode.insertBefore(range.createContextualFragment(htmlStr), refNode); } else { refNode.insertAdjacentHTML('BeforeBegin', htmlStr); } }; insertBeforeHTML(s.split(">").join(">").split("<").join("<"), span); document.body.removeChild(inc); span.parentNode.removeChild(span); if (afterfunc) afterfunc(); }; if (window.attachEvent) { window.attachEvent('onload', function() { document.body.appendChild(inc); inc.onreadystatechange = function() { if (this.readyState == "complete") incfunc(); }; }); } else { document.body.appendChild(inc); inc.onload = incfunc; } }