从 Web 组件站点获取渲染的源代码？

Question

我只是尝试了一些相当琐碎的事情：获取网页的源代码（通过保存它）并计算代码中某个短语出现的频率。

事实证明，如果该页面使用Polymer / web 组件，它就不起作用。这是浏览器的错误吗？

尝试以下操作：转到http://www.google.com/design/icons/ 并尝试在代码中找到star_half（页面上的最后一个图标）。如果您检查 Chrome 或 Firefox 中的元素，它会引导您进入

<i class="md-icon dp48">star_half</i>

但如果您复制根节点或将 html 保存到磁盘，则它不会在源中。

有没有办法获取整个代码？

Answer 1

这种行为的原因可能是 源代码查看（以及 源代码保存？）在浏览器中的工作方式，并且因为 shadow roots 附加到客户端上的 Web 组件一边。

当您在网页上按 ctrl-u 时，浏览器实质上会再次对同一 url 进行网络调用，以获取 server 在您点击该 url 时返回的内容的副本。

在这种情况下，当this 页面呈现时，浏览器会识别组件icons-layout，然后执行代码将shadow-root 附加到此节点。当您的页面到达客户端（浏览器）时，所有这些都会发生。

当您尝试保存此页面时，您保存的是服务器返回的内容，而不是页面的当前状态。如果您启动 chrome 控制台并尝试保存 icons-layout 节点，您将看到相同的行为。

有没有办法获取整个代码？

我不知道如何从浏览器执行此操作，但 phantomjs 提供了一个 way 来保存客户端呈现的 html。