前回、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>