Question

我想检查我们的广告（图片或flash）是否已在网站页面上成功显示。但该元素无法在页面源中找到。

我在chrome Developer工具中获得了元素。

<div id="QQcom_all_Rectangle:1" data-loc="QQcom_all_Rectangle" data-index="1" style="height: 250px; display: block; width: 300px; position: relative;" class="l_qq_com" adconfig_lview="l.qq.com" adconfig_charset="gbk" adconfig_lview_template="http://l.qq.com/lview?c=www&amp;loc={loc}" oid="1800716433" display="banner">
   <a href="http://c.l.qq.com/lclick?loc=QQcom_all_Rectangle&amp;click_data=dXNlcl9pbmZvPW9CM2pnVGd4RnhHNyZhZHhfZXh0PSZwY3RyPTUwMSZhdmVyPTUwMTIwMSZwcmk9eHRiQkZXc0ovclloYXdzdWZqRmpSTkhyZWFuL3pQU2omYnRwcmk9R3VBL25heHhnY3JyNTdrdVNCNW4yWis3TlJqM01nTmw=&amp;oid=1800716433&amp;soid=gmLndBibVj/1bQtQRjKVNkVKAV1Q&amp;dtype=0&amp;pctr=501&amp;aver=501201&amp;btoid=100418428&amp;pri=xtbBFWsJ/rYhawsufjFjRNHrean/zPSj&amp;btpri=GuA/naxxgcrr57kuSB5n2Z+7NRj3MgNl&amp;index=1&amp;page_type=2&amp;chl=703" target="_blank" style="display:block;cursor:pointer;width:300px;height:250px;background-image:url(http://wb.gtimg.com/adwin/f77a7b805584f33e5b539f61e2a7954212856.jpg);background-size:300px 250px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://wb.gtimg.com/adwin/f77a7b805584f33e5b539f61e2a7954212856.jpg',sizingMethod='scale');"></a>
   <a class="absolute a_cover" href="http://c.l.qq.com/lclick?loc=QQcom_all_Rectangle&amp;click_data=dXNlcl9pbmZvPW9CM2pnVGd4RnhHNyZhZHhfZXh0PSZwY3RyPTUwMSZhdmVyPTUwMTIwMSZwcmk9eHRiQkZXc0ovclloYXdzdWZqRmpSTkhyZWFuL3pQU2omYnRwcmk9R3VBL25heHhnY3JyNTdrdVNCNW4yWis3TlJqM01nTmw=&amp;oid=1800716433&amp;soid=gmLndBibVj/1bQtQRjKVNkVKAV1Q&amp;dtype=0&amp;pctr=501&amp;aver=501201&amp;btoid=100418428&amp;pri=xtbBFWsJ/rYhawsufjFjRNHrean/zPSj&amp;btpri=GuA/naxxgcrr57kuSB5n2Z+7NRj3MgNl&amp;index=1&amp;page_type=2&amp;chl=703&amp;k=%E6%9B%9D%E7%81%AB%E7%AE%AD%E5%B7%B2%E8%A3%81%E6%8E%89%E6%B5%B7%E8%80%B6%E6%96%AF%20%E5%9B%9E%E5%BD%92%E4%BC%91%E5%9F%8E%E4%BB%85%E4%B8%80%E5%91%A8%E5%BE%81%E6%88%982%E5%9C%BA%2C%E6%B5%B7%E8%80%B6%E6%96%AF%2C%E7%81%AB%E7%AE%AD%2CNBA&amp;t=%E6%9B%9D%E7%81%AB%E7%AE%AD%E5%B7%B2%E8%A3%81%E6%8E%89%E6%B5%B7%E8%80%B6%E6%96%AF%20%E5%9B%9E%E5%BD%92%E4%BC%91%E5%9F%8E%E4%BB%85%E4%B8%80%E5%91%A8%E5%BE%81%E6%88%982%E5%9C%BA_&amp;r=&amp;s=" target="_blank" rel="nofollow" style="position:absolute;width:300px;height:250px;left:0px;top:0px;cursor:pointer;z-index:10;background-color:#fff;filter:alpha(opacity=0);opacity:0;"></a>
   <div class="absolute" style="position: absolute; width: 24px; height: 16px; left: 26px; bottom: 0px; cursor: pointer; display: none; z-index: 20; background: url(http://ra.gtimg.com/web/res/icon/report_default_new.png) 50% 0% no-repeat;"></div>
   <div style="position: absolute; left: 0px; bottom: 0px; width: 26px; height: 16px; z-index: 12; background: url(http://ra.gtimg.com/web/res/icon/leftbottom_new.png) 100% 0% no-repeat;"></div>
   <div class="absolute" style="position:absolute;width:18px;height:18px;right:0px;bottom:0px;cursor:pointer;z-index:20;background:url(http://ra.gtimg.com/web/privacy/white_icon.png) no-repeat;"></div>
</div>

但在页面源中，它只显示

<!--$loc$_div AD begin...."l=$loc$&log=off"--><div id="QQcom_all_Rectangle:1"  data-loc="QQcom_all_Rectangle" data-index="1" style="height:0;" class="l_qq_com"></div><!--$loc$ AD end --><!--[if !IE]>|xGv00|c5668531d36ed7899852180841ca2aa2<![endif]-->

如何获取300px_250px图片网址？
有谁知道？

Answer 1

呀！这只是因为有DOM操作库可以改变Document-Object Markup而不是源代码。

您必须了解DOM和物理页面源之间的区别。物理页面源有助于呈现DOM，之后可以使用库来修改它;因为您无法在服务器端更改源，因为需要为不同的人重新呈现源，所以只更改了DOM。简单来说，DOM就是浏览器所呈现的内容：它就像源的副本一样，然后由库修改。

使用像jQuery这样的库可以轻松完成。

var $element = $( "#QQcom_all_Rectangle:1" );
if ( !$element || $element === null ) {
    console.log( "The element hasn't been rendered. Not found.");
}

但如果它不是你的页面，你就无法真正修改它和/或获取数据。您可以尝试使用PhantomJS或Selenium Web-kit等Web工具包模拟器。由于这些只是测试框架，因此您无法创建完全成熟的JavaScript应用程序。

理论上，你可以：

在WebKit（浏览器渲染组件）
获取DOM的来源
使用它

但这只是理论上的，因为你需要使用某种语言来创建这样的应用程序，因为它超出了你的问题的范围，你不能。

Answer 2

使用selenium webdriver可以处理这个问题。

WebElement QQcom_all_Rectangle=driver.findElement(By.id("QQcom_all_Rectangle:1"));
List<WebElement> links=QQcom_all_Rectangle.findElements(By.tagName("a"));
String style=links.get(0).getAttribute("style");

如何获取动态生成的web元素的src属性？

2 个答案: