如何获取HTML对象的内容？

0sgqnhkj 于 2022-12-16 发布在其他

关注(0)|答案(2)|浏览(180)

目标

我想在我的HTML页面中放置一个普通的标签，从我自己的服务器上的远程文件中抓取文本，然后javascript将操作文本，并将其显示在网页上，所以JS必须能够抓取远程文件的内容。
远程文件名为“records.html”，它不是一个完整的网页，只是一个片段，不是json数据。

它和父页面在同一个域中，是我的html，我的JS，我的数据 *

"我尝试过的事"

文本/html类型的对象

超文本：
<object id="records" type="text/html" data="records.html" ></object>
联森：

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

失败了，我可以在浏览器开发工具中看到外部内容，但是

则输出为空白。
外部HTML文件不包含<html>、#document或<body>标签，但加载的对象内容包含所有这些标签。阻止额外的标签是很酷的，但并不重要。x1c 0d1x
如果它是一个竞争条件，我读到<object>标记不支持加载事件，所以我不能用加载事件获得它的内容。
具有应用程序/JSON类型的对象

这个方法确实有效。但是，我的远程数据不是json。所以要使用这个方法，它需要把非json数据放到一个扩展名为.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 type="text/html" href="records.html">
不起作用。我听说这个方法已经过时了。

内嵌框架

我用iFrame试过了，但是失败了。我可能做错了。

Html

来源：https://stackoverflow.com/questions/74819648/how-to-get-contents-of-html-object

2条答案

按热度按时间

b1payxdu1#

contentDocument
例如，这对我很有效：

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

赞(0）回复(0）举报 2022-12-16

u5rb5r592#

如果我在做，我会伸手去拿

<html>
<head>
<title>my neat page</title>
</head>
<body>
<div id="target"></div>
</body>
<script>
const output = document.getElementById("target");
fetch("./myResource.html")
.then((response)=>response.text())
.then((text)=>{/* This is where you manipulate the text response */})
.then((manipulatedText)=>{output.innerHtml=manipulatedText});
</script>
</html>

参见https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch和https://developer.mozilla.org/en-US/docs/Web/API/Response/text以及https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

赞(0）回复(0）举报 2022-12-16

我来回答

如何获取HTML对象的内容？

2条答案

相关问题

热门标签

最新问答