Question

嗨，这可能是一个愚蠢的问题，但我无法在任何地方找到答案。我正在编写一个chrome扩展，我只需要读取当前页面的html，这样我就可以从中提取一些数据。

这是我到目前为止所拥有的：

<script>
    window.addEventListener("load", windowLoaded, false);
    function windowLoaded() {
        alert(document.innerHTML)
      });
    }
</script>

有谁能告诉我我做错了什么？感谢，

Answer 1

function windowLoaded() {
    alert('<html>' + document.documentElement.innerHTML + '</html>');
}
addEventListener("load", windowLoaded, false);

~~注意windowLoaded在使用之前是如何创建的，而不是在之后创建的，这将无效。~~

另请注意我如何获取document.documentElement的innerHTML，即html标记，然后在其周围添加html源标记。

Answer 2

我正在写一个chrome扩展，我需要的是阅读html中的当前页面我可以从中提取一些数据。

我认为这里的一个重要答案不是用于提醒innerHTML的正确代码，而是如何从已经呈现的内容中获取所需的数据。

正如pimvdb指出的那样，由于输入错误并需要document.documentElement.innerHTML，您的代码无效，您可以在Chrome控制台（Ctrl + Shift + I）中进行诊断。但这是次要的为什么你首先需要内部HTML。无论您是在寻找某个节点，特定文本，存在多少<div>元素，ID的值等等，我都强烈推荐使用像jQuery这样的库（vanilla） JS工作，但它可能是冗长和笨拙的。您可能希望利用已经可用的所有DOM解析功能，而不是读取所有HTML并使用字符串函数或正则表达式对其进行解析。

换句话说，就像这样：

$("#some_id").val();                      // jQuery
document.getElementById("some_id").value; // vanilla JS

可能比这样明显易碎的东西更安全，更容易，更易读（可能有点偏离这里，但只是为了说明一点）：

innerHTML.match(/<[^>]+id="some_id"[^>]+value="(.*?)"[^>]*?>/i)[1];

Answer 3

window.addEventListener("load", windowLoaded, false);

function windowLoaded() {
    alert(document.documentElement.innerHTML);
}

您的}没有任何目的，而});应该只是}。这些是语法错误。

此外，它是document.documentElement.innerHTML，因为它不是document的属性。

Answer 4

使用document.documentElement.outerHTML。（请注意，这在Firefox中不受支持;在您的情况下不相关。）但是，这仍然不完美，因为它不返回根元素之外的节点（!doctype，可能还有一些注释或处理指令）。 document.innerHTML属性是AFAIK，在HTML5规范中指定，但目前在任何浏览器中都不受支持。

仅供参考，导航至view-source:www.example.com也会显示整个标记（Chrome＆amp; Firefox）。但我不知道你是否能以某种方式使用它。

Chrome扩展程序读取当前页面的innerHTML？

4 个答案: