テクノなまこ

科学の力

JavaScriptで同一ドメインの他ページのhtmlからタイトル要素を取得する

JavaScriptで同一ドメインの他ページのhtmlからタイトル要素を取得する方法。ITリテラシーがなく、調べるのに半日もかけてしまった

ふとん.htmlからタイトルを読み込みたいとする

<html>
<head>
	<title>読み込みたい</title>
</head>
<body>
 
<script>

  fetch("ふとん.html")
  .then(response => {
    return response.text();
  })
  .then(body => {
       var m = body.match(/<title>(.*)<\/title>/);
        document.write(m[1]);
  });

 </script>
</body>
</html>

jQueryライブラリのAjax関数を使う場合

<html>
<head>
	<title>読み込みたい</title>
</head>
<body>
  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script>

  $.ajax({
      type: 'GET',
      url: 'ふとん.html',
      success: function(data) {
         var t = data.match(/<title>(.*)<\/title>/);
          document.write(t[1]);
      }
  });

 </script>
</body>
</html>

参考

taishi41228さん　Ajaxで取得したHTMLからタイトルを取得する方法 - Qiita
tacamyさん　jQuery.ajax()の代替としてFetch APIをざっくり使ってみる - tacamy--blog