在HTML的object标签中读取数据

Question

在HTML的object标签中读取数据

10

我有一个存储在服务器上的文本文件和一个HTML中的对象，就像这样:

<object id="data" type="text/plain" data="test.txt"></object>

如何在JavaScript中读取test.txt的内容？我目前所拥有的是：

var data = document.getElementByID("data");

但我不知道如何读取对象标签内的HTML文档。

- rhynodegreat

1

这里有一个示例，可以读取内容并将其插入。 - va2ron1

使用 object 元素来显示文本文档有什么作用，相较于使用 iframe 元素呢？请参阅 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object 中的 "Permitted content"。 - guest271314

但我无法弄清如何在对象标签内读取HTML文档。.html文档似乎没有设置为“data”？“data”设置为“.txt”文件，“type”设置为“text/plain”。 - guest271314

对象标签会自动将文本文件包装在一个新的HTML文件中。根据Firefox检查器显示，它看起来像<object ...> #document <html><body>[test.txt的内容]</body></html></object>。 - rhynodegreat

尝试使用 var data = document.getElementByID("data").contentDocument.documentElement;。 - guest271314

2个回答

0

我创建了一个简单的函数和按钮作为示例。只需复制HTML和JS代码，它应该可以正常工作。只要确保为导入对象创建适当的txt或html文件即可。

[edit] Pay attention to the object line. especially the data="test.txt" portion of the object. If you do not create test.txt and add some text to the first line, the script will not work. [end edit]

function getObjectData()
{
    //alert("getObjectData");
    
    var myData = "";
    var object = document.getElementById("data");
    
    //get data inside object data
    var myData = object.contentDocument.body.childNodes[0].innerHTML;

    alert("myData => " + myData + " <= myData" );
}

#data{
    height: 36px;
    border: solid 1px red;
    /*overflow: hidden;*/
}

<div class="main">
    <object id="data" type="text/plain" data="test.txt"></object>
</div>
<br />
<button onclick="getObjectData()">Get Object Data</button>

- Scott Tovey

我收到了以下信息：{ "message": "TypeError: object.contentDocument is null", "filename": "https://stacksnippets.net/js", "lineno": 28, "colno": 18 } - intergallactic

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- 4castle · Accepted Answer

object 标签需要向服务器发起单独的请求并加载内容。与此同时，您的JavaScript已经执行并且“失去了机会”。

在 object 的 onload 事件中运行您的代码。

然后，使用 .contentDocument.body.childNodes[0].innerHTML 来查看文本文件。

var object = document.getElementById("data");
object.onload = function() {
    var data = object.contentDocument.body.childNodes[0].innerHTML;
    // use the data
};