How Can I Get The Text Inside An Object Element?

In the object element with the ID x a text file is loaded and displayed correctly. How can I get this text with JavaScript? I set y.data = 'prova.txt' then tried y.innerHTML; y.te

Solution 1:

I'm afraid this isn't going to be easy as you'd like it to be.

According to your comments, you tried AJAX first, but came across CORS problems. This happens when you try to include data from files on a different domain name.

Since that didn't work, you tried to include the file inside an object tag. This works a bit like an iframe - the data will be displayed on the webpage, but for the same reasons as above, you cannot access the data through JavaScript if the file is under a different domain name. This is a security feature. That explains the error you were getting most recently:

Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLObjectElement'

---

Now, there are a few ways you might be able to get around this.

Firstly, if this is a program exclusively for your own use, you can start your browser with web-security disabled (though this is dangerous for browsing the web generally). In Chrome, for example, you can do this by launching Chrome with the --disable-web-security flag. More details here.

Secondly, you can try to arrange that your document and the file do belong under the same domain. You will probably only be able to do this if you have control of the file.

Your error message (specifically a frame with origin "null") makes me think that you are running the files directly in the web-browser rather than through a server. It might make things work better if you go through an actual server.

If you've got Python installed (it's included on Linux and Mac), the easiest way to do that is to open up the terminal and browse to your code's directory. Then launch a simple Python server:

cd /home/your_user_name/your_directory
python -m SimpleHTTPServer

That will start up a web server which you can access in your browser by navigating to http://localhost:8000/your_file.html.

If you are on Windows and haven't got Python installed, you could also use the built-in IIS server, or WAMP (or just install Python).

Solution 2:

y.innerHTML = 'Hello World';

will replace everything in the 'x' element with the text 'Hello World', but it looks like you've already loaded another HTML document into the 'x' element. So the question is...

Where exactly in the 'x' element do you want to insert the text? for example 'x' -> html -> body?

Solution 3:

The object element is loading the text file asynchronously, so if you try to get its data by querying the element, you'll get undefined.

However, you can use the onload attribute in <object> elements.

In your HTML, add an onload that calls a function in your script to catch when the text file has fully loaded.

<object id="x" onload="getData()" data="readme.txt"></object>

In the script, you can get the object's data with contentDocument.

functiongetData() {
    var textFile = document.getElementById('x').contentDocument;
    /* The <object> element renders a whole 
       HTML structure in which the data is loaded.
       The plain text representation in the DOM is surrounded by <pre> 
       so we need to target <pre> in the <object>'s DOM tree */// getElementByTagsName returns an array of matches.var textObject = textFile.getElementsByTagName('pre')[0];
    // I'm sure there are far better ways to select the containing element!./*We retrieve the inner HTML from the object*/var text = textObject.innerHTML;

    alert(text); //use the content!
}