【メモ】JavaScriptで外部HTMLを読み込む
ここ最近良く使うのでメモ
読み込むHTMLにはJavaScriptを関数で呼び出し引数に読み込むHTMLと表示させたい部位のDivのIdを渡します。
index.html
<script type="text/javascript" src="./Load.js"></script> <body onLoad="HTML_Load('NavBar.html','top');HTML_Load('./sideNav.html','side');"> <div id="side"></div> </body>
sideNav.html
<h1>これは読み込まれたファイルです。</h1>
Load.js
function HTML_Load(_html,replace){
/Httpリクエスを作る
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET",_html,true);
xmlhttp.onreadystatechange = function(){
//とれた場合Idにそって入れ替え
if(xmlhttp.readyState == 4 && xmlhttp.status==200){
var data = xmlhttp.responseText;
var elem = document.getElementById(replace);
elem.innerHTML= data;
return data;
}
}
xmlhttp.send(null);
}参考サイト
