javascript - 从外部 HTML 文档获取文本

Question

我的目标是从 HTML 文档中获取文本，该文档不会调用 .jsp 文件中的任何函数。

我环顾四周，我以为我已经找到了问题的答案，但它似乎不起作用，其他答案包括使用 jQuery(我既不熟悉也不允许使用)。

这是我到目前为止的代码:

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

正如您所看到的，我正在尝试获取一个 HTML 文档的正文并将其显示在另一个 HTML 文档中。我走在正确的轨道上吗？

编辑:好吧，我似乎让我的问题变得相当困惑。我在名为 html.html 的 HTML 文档中调用该函数，但我想从 test.html 获取文本，然后让它出现在 html.html 中。它必须是这样的，因为我不能假设我想要读取的 HTML 文档将在其头部包含我的 .jsp 文件。

目前我收到以下错误。

Uncaught TypeError: Cannot read property 'body' of undefined

Answer 1

另一个窗口中的document.body之所以未定义，是因为另一个窗口还没有尚未加载并渲染文档。

一种解决方案是等待 onload 事件。

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

确保在点击等用户事件上运行 getText 函数，否则 window.open 将失败。

如果您只想获取另一个窗口的内容，那么使用 AJAX 可能是更好的选择。

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