admin管理员组

文章数量:1245661

I have a text file stored on the server and an object in HTML like this:

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

How can I read the contents of test.txt in Javascript? What I have so far is:

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

But I can't figure out how to read the HTML document inside the object tag.

I have a text file stored on the server and an object in HTML like this:

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

How can I read the contents of test.txt in Javascript? What I have so far is:

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

But I can't figure out how to read the HTML document inside the object tag.

Share Improve this question edited Apr 16, 2016 at 3:19 rhynodegreat asked Apr 16, 2016 at 1:28 rhynodegreatrhynodegreat 1951 gold badge2 silver badges6 bronze badges 5
  • 1 Here an example to read the content then insert it – va2ron1 Commented Apr 16, 2016 at 1:35
  • What is purpose of using object element, instead of iframe element to display text document? See developer.mozilla/en-US/docs/Web/HTML/Element/object at Permitted content – guest271314 Commented Apr 16, 2016 at 1:49
  • "But I can't figure out how to read the HTML document inside the object tag." .html document does not appear to be set at data? data is set to .txt file, type set to text/plain. – guest271314 Commented Apr 16, 2016 at 1:55
  • The object tag automatically takes the text file and wraps it in a new HTML file. According to the firefox inspector, it looks something like <object ...> #document <html><body>[Contents of test.txt]</body></html></object> – rhynodegreat Commented Apr 16, 2016 at 2:02
  • Try var data = document.getElementByID("data").contentDocument.documentElement; – guest271314 Commented Apr 16, 2016 at 2:22
Add a ment  | 

2 Answers 2

Reset to default 8

The object tag has to make a separate request to the server and then load that content. Meanwhile, your JavaScript has already executed and "misses the bus."

Run your code inside the onload event of the object.

Then use .contentDocument.body.childNodes[0].innerHTML to view the text file.

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

I created a simple function and button as an example. Just copy the html and js code and it should work for you. Just make sure you create the appropriate txt or html file for the object to import.

[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>

本文标签: javascriptRead data in HTML object tagStack Overflow