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
objectelement, instead ofiframeelement 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."
.htmldocument does not appear to be set atdata?datais set to.txtfile,typeset totext/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
2 Answers
Reset to default 8The 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>