Access <object> data with JavaScript

Question

I have an <object> tag like this:

<object id="text" data="file.txt"></object>

And I can get the element like this:

var text = document.getElementById("text");

Now, how do I get the content of the text file?

The purpose of this is to:

avoid having to make an XMLHttpRequest;
avoid having text data in the form of a constant in code;
keep a simple plaintext file in it's original form, without JSON or special formatting, to be accessed by code and become a string variable.

In the same fashion you can have an <img> or <audio> tag in the document and then access the image / sound, just for text files.

PS: I'm almost positive the <object> tag is not the ideal tag for this. This is just as far as I came trying to accomplish what I need.

What are you trying to do, exactly: load data from a file into your web page? — msanford
– msanford, Commented Feb 9, 2015 at 22:37
More precisely, load a .txt file which is sibling to my .html and .js file into a JS variable. — Diogo Schneider
– Diogo Schneider, Commented Feb 10, 2015 at 1:27
Note that even with the file being added to an object in this fashion, the browser is still going to make a request to the server to get it, so whilst you're avoiding making an explicit request yourself, the browser will still be doing so. — James Thorpe
– James Thorpe, Commented Feb 10, 2015 at 11:15

James Thorpe · Accepted Answer · 2015-02-10 11:48:13Z

1

You can load your text file within a hidden iframe and access the contents within that:

<html>
    <head>
        <script type="text/javascript">
            function gettext() {
                alert(document.getElementById('ifr').contentDocument.body.innerText);
            }
        </script>
    </head>
    <body>
    <iframe id="ifr" style="display:none" src="test.txt" onload="gettext()"></iframe>
    </body>
</html>

answered Feb 10, 2015 at 11:48

James Thorpe

32.3k6 gold badges76 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Diogo Schneider Over a year ago

That's precisely what I wanted! And it works with the <object> tag, too! Thank you!

user3886234 · Accepted Answer · 2015-02-09 22:41:48Z

1

I normally prefer AJAX for something like this. Could you do something like this?

var textContent = '';
var textRequest = new XMLHttpRequest();
textRequest.open('GET','file.txt');

textRequest.onreadystatechange = function() {
    if (textRquest.readystate == 4 && textRequest.status == 200) {
        textContent = textRequest.responseText   
    }
}

textRequest.send();

Is there a reason you have to use an object element?

answered Feb 9, 2015 at 22:41

user3886234

1 Comment

Diogo Schneider Over a year ago

It doesn't really have to be an object element. All I need is to embed some plain text to my document (preferably from a separate file) so I can read it with JavaScript. I wanted it to be clean and simple and that's why I avoided requests as my first option. Sorry, I should have mentioned that before. Thanks.

Collectives™ on Stack Overflow

Access <object> data with JavaScript

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related