Read data in HTML object tag

Question

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.

[Here](http://stackoverflow.com/a/14446538/5965782) an example to read the content then insert it — va2ron1, Apr 16 '16 at 01:35
What is purpose of using `object` element, instead of `iframe` element to display text document? See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object at Permitted content — guest271314, Apr 16 '16 at 01: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, Apr 16 '16 at 01: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 `` — rhynodegreat, Apr 16 '16 at 02:02
Try `var data = document.getElementByID("data").contentDocument.documentElement;` — guest271314, Apr 16 '16 at 02:22

4castle · Accepted Answer · 2020-02-07T23:56:48.487

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
};

edited Feb 07 '20 at 23:56

answered Apr 16 '16 at 01:42

4castle

32,613
11
69
106

After a ton of trial and error, I finally figured out how to do it! Google wasn't much help for once... `text/plain` puts a `pre` tag inside the `object`, so that's why `childNodes` is there. – 4castle Apr 16 '16 at 02:37
BTW, for people trying to test my code -- I couldn't use JSFiddle or even a `file://` kind of HTML file in order to test this. (It thinks there is XSS going on a throws an error). I had to load it from my `localhost` in order to test it. – 4castle Apr 16 '16 at 02:49
this doesn't work, maybe not anymore as browsers have since restricted local loading. I got null data – KKS Feb 28 '21 at 18:49
@4castle could you explain more, because the above example doesn't work for me either, as it is – intergallactic Aug 25 '21 at 15:03
1

@intergallactic The file referenced by the ` – 4castle Aug 30 '21 at 22:07

Scott Tovey · Answer 2 · 2023-07-05T22:14:55.987

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>

I receive: { "message": "TypeError: object.contentDocument is null", "filename": "https://stacksnippets.net/js", "lineno": 28, "colno": 18 } — intergallactic, Aug 25 '21 at 15:07

Read data in HTML object tag

2 Answers2

Linked