ローカルでHTMLにHTMLをインクルード：晶紀の館第2別館：SSブログ

	ブログをはじめるログイン

ローカルでHTMLにHTMLをインクルード　[日記] [編集]

HTMLファイルの中に、別にファイルに記述されたHTMLを埋め込みたいのです。

SSIでは、こんな感じ。

<!--#include file="～" -->

JSPでは、こんな感じ。

<%@ include file="～" %>

これと同じことを、サーバを使わず、ローカル環境のみで行いたいのです。
javascriptを使って。

HTMLの文字列が取得できれば、以下の様なコードで埋め込むことは出来ます。

<script type="text/javascript">
<!--
var str = ～;	// 埋め込むHTML
document.getElementById("target").innerHTML = str;
// -->
</script>

<div id="target">
<!-- ここに他のHTMLが埋め込まれる -->
</div>

後はファイルからデータを読み込めればOKっぽいです。

ファイルからテキストをロードするには、IEならFileSystemObjectが使えます。

var fso = new ActiveXObject("Scripting.FileSystemObject");
var f = fso.OpenTextFile("～～", 1);
var str = f.ReadAll();
f.Close();

IE以外なら（と言うか、ActiveXが使えない環境なら）、AJAX風にすることで実現できます。

var httpObj = new XMLHttpRequest();
httpObj.onload = funcLoaded;
httpObj.open("GET", "～～", true);
httpObj.send(null);

function funcLoaded()
{
    str = httpObj.responseText;    // ← ファイルの中身
}

ところが、XMLHttpRequestは文字コードとしてUTF-8しか使えません。
出来ればShift-JISで書かれたファイルを読み込みたいのです。

そこで、こんな手を考え付きました。

まず、読み込みたい別ファイルのHTMLのタグにid属性として"main"を指定しておきます。

<body id="main">
ここが読み込まれるHTML
</body>

そして次のJavascriptコードを実行します。

var tempWin = window.open("～～", "tempWin");
var str = tempWin.document.getElementById("main").innerHTML;  // ← ファイルの中身
tempWin.close();

ウィンドウが一瞬開いて閉じるため鬱陶しいのですが、コレには理由があります。

HTMLの読み込みが全て完了したかどうかを検知する方法が、OnLoadイベントしかないのです。
読み込み完了をきちんと判定しないと、大きなHTMLファイルを読み込もうとした場合、途中までしか取得できません。

どうせid属性を書かなければならないのですから、もう1つくらい余分に書くくらい、何でもありません。

// 読み込まれるファイル
<body id="main" onload="opener.callbackOnLoad()">
ここが読み込まれるHTML
</body>

// 呼び出す方
var tempWin = window.open("～～", "tempWin");

function callbackOnLoad()
{
    var str = tempWin.document.getElementById("main").innerHTML;  // ← ファイルの中身
    tempWin.close();
}

そんなわけで、別のHTMLファイルの中身を埋め込むことが出来ました。
（読み込もうとするHTMLファイルの指定を間違えると、ブラウザの画面が開いたままになりますが……）

でも、一番真っ当な方法は、やはり XMLHttpRequestを使う方法だと思いました。