输入值如何工作？答案

【问题标题】：How does input value work?输入值如何工作？
【发布时间】：2017-03-21 02:29:15
【问题描述】：

网页中有输入标签。当我检查它时：

<input type="text" onmouseover="this.select();" readonly="" value="<embed src=&quot;https://imgcache.qq.com/tencentvideo_v1/playerv3/TPout.swf?max_age=86400&amp;v=20161117&amp;vid=d0380tpvuqx&amp;auto=0&quot; allowFullScreen=&quot;true&quot; quality=&quot;high&quot; width=&quot;480&quot; height=&quot;400&quot; align=&quot;middle&quot; allowScriptAccess=&quot;always&quot; type=&quot;application/x-shockwave-flash&quot;></embed>">

但是当我查看它的页面源时：

<input type="text" onmouseover="this.select();" readonly r-attr="{value:shareHtml}">

它是如何工作的？以及如何通过nokogiri 获取输入值，因为解析结果如下所示：

#<Nokogiri::XML::Element:0x3fcc71309c60 name="input" attributes=[#<Nokogiri::XML::Attr:0x3fcc71309be8 name="type" value="text">, #<Nokogiri::XML::Attr:0x3fcc71309bd4 name="onmouseover" value="this.select();">, #<Nokogiri::XML::Attr:0x3fcc71309bc0 name="readonly" value="readonly">, #<Nokogiri::XML::Attr:0x3fcc71309bac name="r-attr" value="{value:shareHtml}">]>

【问题讨论】：

看起来有 javascript 根据 r-attr 属性的值更新 value。无法使用Nokogiri 获取结果值。
你无法得到它。您正在检查浏览器所知道的页面的 DOM。 Nokogiri 不是浏览器，它是解析器，这只是浏览器功能的一部分。 Nokogiri 只知道最初检索 HTML 时的样子，就像浏览器第一次检索 HTML 时所做的那样。但随后浏览器会运行页面中嵌入的所有脚本，并处理 CSS，然后将结果修改后的页面显示给您。检查页面时看到的内容反映的是当前显示的页面，而不是最初收到的内容。

标签： html ruby nokogiri html-input

【解决方案1】：

您无法单独使用 Nokogiri 获得价值，但是如果您使用在获得 html 之前加载 javascript 的工具，您可以获得它。像这样的一个工具是 Selenium，它首先使用浏览器加载页面。

driver = Selenium::WebDriver.for :firefox
driver.get("https://www.google.com")

你需要等待页面的一些变化，才能知道js已经完成。您可以通过等待某个带有特定 css 标签的元素出现来做到这一点：

driver.find_element(:css, '#some-id')

或者只是等待一段时间：

sleep(2)

在 javascript 改变页面内容后，你会得到新的 html 源代码：

html_source = driver.page_source
driver.quit

然后就可以使用Nokogiri来解析html了：

doc = Nokogiri::HTML(html_source)
doc.at('input')['value']

【讨论】：