从 Web 组件站点获取呈现的源代码?

Get rendered source code from web components site?

我只是尝试了一些相当简单的事情:获取网页的源代码(通过保存它)并计算代码中某个短语出现的频率。

事实证明,如果该页面使用 Polymer / 网络组件,它就不起作用。这是浏览器错误吗?

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

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

但如果您复制根节点或将 html 保存到磁盘,这将不会在源代码中。

有没有办法得到完整的代码?

此行为的原因可能是 查看源代码(以及 源代码保存?)对浏览器的工作方式,因为 shadow roots 附加到客户端的 Web 组件。

当您在网页上按 ctrl-u 时,浏览器实质上会在同一个 url 上再次进行网络调用,以获取 server 返回的副本你打了 url.

在这种情况下,当this page renders, browser identifies the component icons-layout and then executes code to attach a shadow-root到这个节点。当您的页面到达客户端(浏览器)时,所有这些都会发生。

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

Is there a way to get the entire code?

我不知道如何从浏览器中做到这一点,但 phantomjs 提供了一个 way 来保存客户端渲染 html。