Question

我想下载某个页面的内容并从中获取一个数字（仍不确定如何，可能使用PHP DOM界面）。我打开页面，启动Firefox的调试，选择带有数字的元素，发现它在<div id="lblOptimizePercent" class="wod-dpsval">98.4%</div>（98.4％是我正在寻找的）。所以我为lblOptimizePercent打开了源代码Ctrl-F，我找到的只是<div id="lblOptimizePercent" class="wod-dpsval"></div>没有任何内容。我做错了什么？或者某些网站的保护是不是窃取内容？

Link to the original site

Answer 1

通常，要从PHP中抓取页面，您必须

保存页面
通过正则表达式从HTML中提取所需的值
- 替代方案包括使用SimpleXML进行DOM查询......

我们看到的HTML是：

<div id="lblOptimizePercent" class="wod-dpsval">DATA</div>

<?php     
$text = file_get_contents('http://www.askmrrobot.com/wow/optimize/eu/drak%27thul/Ecclesiastic');
$regexp = '^<div id=\"lblOptimizePercent\" class=\"wod-dpsval\">(.*)<\/div>^';
preg_match($regexp, $text, $matches);
$percentage = $matches[1];
echo $percentage;

这应该给你DATA - 百分比值。但这不会发生！原因：

数据由客户端的Javascript动态插入。 id或类选择器用于DOM查询（元素选择），然后添加数据值。

http://api.jquery.com/id-selector/ - http://api.jquery.com/class-selector/

jQuery示例

在此网站上，他们向客户端发送<div id="lblOptimizePercent" class="wod-dpsval"></div>，然后他们使用如下更新查询：$("#lblOptimizePercent").text("100%");来更新百分比值。

如果您想在客户端查询，可以使用$("#lblOptimizePercent").text(); **

在您的控制台中尝试此操作。它返回百分比值。

如何抓取此页面？

如果您想使用动态数据抓取此页面，则需要使用浏览器环境进行抓取：PhantomJS或SlimerJS是您的朋友。使用PhantomJS打开页面，从上面启动jQuery cmd并完成。

这个片段应该让你非常接近。您可以将其保存为scrape.js，然后使用Phantom执行它。

var page = require('webpage').create();
page.open('http://www.askmrrobot.com/wow/optimize/eu/drak%27thul/Ecclesiastic', function() {
  page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function() {
    page.evaluate(function() {
      alert(
         $("#lblOptimizePercent").text()
      );
    });
    phantom.exit()
  });
});

您还可以保存“已评估的页面”（现在包含数据）并使用PHP进行提取。这就像：在浏览器中保存页面并处理保存的HTML文件。

Answer 2

在Firebug或其他webdeveloper工具中，您可以看到生成的内容，在源代码中只有一个空白元素。

第一次显示空白元素（在渲染站点期间），而不是使用JS，内容被填充。

Googlebot等无法看到这个JS生成的内容，但在这种情况下没问题。

代码：

document.getElementById('lblOptimizePercent').innerHTML = '94%';

或类似地使用jQuery：

$('#lblOptimizePercent').html('94%');
// need to load jQuery before, of course

html - div标签中的隐藏内容

2 个答案: