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

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

javascript web

Javascript 如何获取web元素的动态生成src属性？,javascript,web,Javascript,Web,我想检查我们的广告（图片或flash）是否已成功显示在网站页面上。但在页面源中找不到该元素我在chrome开发者工具中得到了这个元素 <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_lv

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

我在chrome开发者工具中得到了这个元素

<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图像url？

有人知道吗

是啊！这仅仅是因为有DOM操纵库可以改变文档对象标记而不是源代码

您必须理解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 kit仿真器来实现这一点。由于这些只是测试框架，您无法创建一个成熟的JavaScript应用程序

理论上，你可以：

在WebKit（浏览器渲染组件）中渲染

获取DOM的源代码

使用它

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

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

WebElement QQcom\u all\u Rectangle=driver.findElement（By.id（“QQcom\u all\u Rectangle:1”）；
List links=QQcom\u all\u Rectangle.findElements（按.tagName（“a”））；
字符串样式=links.get（0.getAttribute（“样式”）；

与我共享该网页的链接？我要的是您正在搜索该控件的网页我不是OP。询问@Venus此问题是因为它每秒钟都在变化，您无法处理如何验证此添加DIV是否显示某些内容

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");