【Javascript】指定したページの特定の要素のHTMLコードを取得する | 電網覚書

本記事のソースコードの利用によって生じた損害について、当方は一切の責任を負いません。ご自身の判断と責任のもとで参照・ご利用ください。

この記事は最終更新から3年以上経過しています。

前回、PHPで指定したページの特定の要素を取得するというのをやったけど、これはそのJavascript版。
当然これも同一ドメインでないとクロスオリジンに阻止される。

例えば、https://example.com/target.htmlのentry-list-wrapper内のHTMLコードを取得して、english-blog-include要素内に表示させたいときはこんな感じ。

<div id="english-blog-include"></div>

<script>
async function loadExternalContent(url, targetElementId, selector) {
  try {
  // 外部のHTMLコンテンツを取得
  const response = await fetch(url);
  const htmlContent = await response.text();

  // 取得したHTMLコンテンツをDOMに変換
  const parser = new DOMParser();
  const doc = parser.parseFromString(htmlContent, 'text/html');

  // 指定したセレクタで要素を取得
  const targetElement = doc.querySelector(selector);

  // 指定した要素が存在する場合は表示
      if (targetElement) {
        document.getElementById(targetElementId).innerHTML = targetElement.innerHTML;
      } else {
        console.error('Target element not found.');
      }
    } catch (error) {
      console.error('Error:', error);
    }
  }
  const externalUrl = 'https://example.com/target.html';
  const targetElementId = 'english-blog-include';
  const targetSelector = '#entry-list-wrapper';
  loadExternalContent(externalUrl, targetElementId, targetSelector); 
</script>