Get the text from an external HTML document

Question

My goal is to get the text from a HTML document which does not call any functions from my .jsp file.

I've looked around and I thought I had found the answer to my problem but it doesn't seem to be working, and other answers consist of using jQuery (which I am both unfamiliar with and not allowed to use).

This is my code so far:

function getText(divID) {
    var w = window.open("test.html");
    var body = w.document.body;
    var div = document.getElementById(divID);
    var textContent = body.textContent || body.innerText;
    console.log(textContent);

    //div.appendChild(document.createTextNode(textContent));
}

So as you can see, I'm trying to get the body of one HTML document and have it appear in another. Am I on the right tracks?

EDIT: Ok so I seem to have made my problem quite confusing. I call the function in a HTML document called html.html , but I want to get the text from test.html , then have it appear in html.html . It has to be like this because I can't assume that the HTML document I want to read from will include my .jsp file in its head.

At the moment I am getting the following error.

Uncaught TypeError: Cannot read property 'body' of undefined

Answer 1

The reason document.body in the other window is undefined , is because the other window has not loaded and rendered the document yet.

One solution would be to wait for the onload event.

function getText(divID) {
    var w = window.open("test.html");
    w.addEventListener("load", function() {
        var body = w.document.body;
        var div = document.getElementById(divID);
        var textContent = body.textContent || body.innerText;
        console.log(textContent);
    });
}

Make sure you run the getText function on a user event like a click, else window.open will fail.

If all you want to do is get the contents of the other window, using AJAX would probably be a better option.

function getText(divID) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 ) {
            var body = xhr.response.body;
            var div = document.getElementById(divID);
            var textContent = body.textContent || body.innerText;
            console.log(textContent);
        }
    };
    xhr.open("GET", "test.html", true);
    xhr.responseType = "document";
    xhr.send();
}