如何获取HTML <object>标签加载的同域HTML片段内容？

我想在HTML页面中使用常规标签从自有同域服务器的远程文件records.html中获取文本，再通过JavaScript处理后显示。该文件仅为HTML片段，非完整网页也非JSON数据。优先考虑纯HTML方案，其次是可行的JS方案。

已尝试方案 #

type="text/html"的<object>标签 #

HTML代码：

<object id="records" type="text/html" data="records.html"></object>

JS代码：

window.onload = function getRecords() {
    const obj = document.querySelector("#records");
    console.log(obj.contentDocument.documentElement.innerText)
};

问题：

• 控制台输出为空；
• 加载后object自动给片段添加了<html>、<body>等标签（非必需，但能避免更好）；
• <object>不支持onload事件，无法通过加载事件确保内容已就绪，存在竞态条件。

type="application/json"的<object>标签 #

此方案能正常获取内容，但需将非JSON的HTML片段放入.json后缀文件，形式不合理。
代码：

<object id="records" type="application/json" data="package.json"></object>
<script>
document.getElementById('records').addEventListener('load', function () {
  console.log(this.contentDocument.documentElement.innerText)
})
</script>

<link>标签 #

<link type="text/html" href="records.html">

无法生效，且该用法已被弃用。

<iframe>标签 #

尝试使用但未成功，操作可能有误。

XMLHttpRequest + Filesystem API #

该方案已被fetch API替代，不再考虑。

fetch API #

封装的函数返回Promise{}而非实际数据，未成功获取内容：

async function fetchText(sURL) {
    let response = await fetch(sURL);
    let data = await response.text();
    return data;
}

可行解决方案 #

纯HTML方案：正确使用<iframe> #

同域下<iframe>可以可靠加载HTML片段，且能通过onload事件确保内容就绪：

<iframe id="records-frame" src="records.html" style="display:none;"></iframe>
<script>
document.getElementById('records-frame').addEventListener('load', function() {
    // 获取iframe内的HTML片段内容
    const fragmentContent = this.contentDocument.body.innerHTML;
    console.log(fragmentContent);
    // 后续处理逻辑，比如插入到页面中
    document.body.insertAdjacentHTML('beforeend', fragmentContent);
});
</script>

说明：

• 设置display:none隐藏iframe，仅用作内容载体；
• 同域下可直接访问contentDocument获取内部内容；
• onload事件能准确捕获内容加载完成的时机，避免竞态条件。

JS方案：修复fetch API调用问题 #

你的fetch函数本身逻辑正确，但调用时需处理异步返回的Promise：

async function fetchText(sURL) {
    let response = await fetch(sURL);
    if (!response.ok) {
        throw new Error(`请求失败：${response.status}`);
    }
    let data = await response.text();
    return data;
}

// 正确调用方式
fetchText('records.html')
    .then(content => {
        console.log(content);
        // 处理HTML片段，比如插入到页面
        document.getElementById('target-container').innerHTML = content;
    })
    .catch(error => console.error(error));

说明：

• 异步函数返回的是Promise，必须用.then()或await获取结果；
• 添加response.ok判断，处理请求失败的情况；
• 直接获取的是原始HTML片段，不会自动添加额外标签，符合需求。

修复<object>标签方案 #

如果坚持使用<object>，可以通过监听readystatechange事件判断加载状态：

<object id="records" type="text/html" data="records.html"></object>
<script>
const obj = document.getElementById('records');
obj.addEventListener('readystatechange', function() {
    if (this.readyState === 'complete') {
        const content = this.contentDocument.body.innerText;
        console.log(content);
    }
});
</script>

说明：

• <object>支持readystatechange事件，当readyState为complete时表示内容加载完成；
• 内容会被自动包裹在<html>和<body>中，需从body里提取所需片段。

内容的提问来源于stack exchange，提问作者johny why