読者です 読者をやめる 読者になる 読者になる

まぁ、つまらないものですが

専門学生の気ままな技術ブログ、正しいかもわからんけど日々のログを残してゆきます。<br>Twitter → https://twitter.com/gakusei200709

【メモ】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);
}

参考サイト

解説 : XMLHttpRequest