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.

Answer 1

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

Answer 2

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.

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>