从动态生成的iframe元素中获取图片网址

时间:2016-01-11 19:53:25

标签: javascript jquery html iframe

我有一些动态生成iframe元素的代码(它是显示Google广告代码时生成的代码)。在生成的HTML中是一个img元素,其中包含我需要检索的图像URL。如何搜索生成的HTML以检索img url?对于凌乱的格式,很抱歉(div id =“div-gpt-ad-1452138910394-0”)包含生成的HTML以及我需要获取的img url。

<html><head>
      <meta charset="utf-8">
      <title>Truck</title>
      <meta name="generator" content="Google Web Designer 1.5.3.1209">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <style type="text/css" id="gwd-text-style">
         p {
         margin: 0px;
         }
         h1 {
         margin: 0px;
         }
         h2 {
         margin: 0px;
         }
         h3 {
         margin: 0px;
         }
      </style>
      <style type="text/css">
         html, body {
         width: 100%;
         height: 100%;
         margin: 0px;
         }
         body {
         transform: perspective(1400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
         transform-style: preserve-3d;
         background-color: transparent;
         }
      </style>
      <script type="text/javascript">
         (function() {
           var useSSL = 'https:' == document.location.protocol;
           var src = (useSSL ? 'https:' : 'http:') +
               '//www.googletagservices.com/tag/js/gpt.js';
           document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
         })();
      </script><script src="http://www.googletagservices.com/tag/js/gpt.js"></script><script id="gpt-impl-0.6896143630588139" src="http://partner.googleadservices.com/gpt/pubads_impl_78.js"></script><iframe style="visibility: hidden; display: none;" src="http://tpc.googlesyndication.com/safeframe/1-0-2/html/container.html"></iframe>
      <script type="text/javascript">
         googletag.cmd.push(function() {
           googletag.defineSlot('/3576361/Truck1', [300, 600], 'div-gpt-ad-1452138910394-0').addService(googletag.pubads());
           googletag.pubads().enableSingleRequest();
           googletag.pubads().enableSyncRendering();
           googletag.enableServices();
         });
      </script>
   <script src="http://pagead2.googlesyndication.com/pagead/osd.js" type="text/javascript"></script></head><iframe src="" style="display: none;"></iframe>
   <body>

      <!-- /3576361/Truck1 -->
      <div id="div-gpt-ad-1452138910394-0" style="height:600px; width:300px;">
         <script type="text/javascript">
            googletag.cmd.push(function() { 
              googletag.display('div-gpt-ad-1452138910394-0');
            });
         </script><script type="text/javascript" src="https://securepubads.g.doubleclick.net/gampad/ads?gdfp_req=1&amp;correlator=1156306692399781&amp;output=json_html&amp;callback=googletag.impl.pubads.setAdContentsBySlotForSync&amp;impl=ss&amp;json_a=1&amp;eid=108809080&amp;sc=0&amp;sfv=1-0-2&amp;iu_parts=3576361%2CTruck1&amp;enc_prev_ius=%2F0%2F1&amp;prev_iu_szs=300x600&amp;cookie_enabled=1&amp;lmt=1452538211&amp;dt=1452541941283&amp;cc=100&amp;frm=20&amp;biw=1161&amp;bih=742&amp;oid=3&amp;adks=2284442022&amp;gut=v2&amp;ifi=1&amp;u_tz=-480&amp;u_his=2&amp;u_java=true&amp;u_h=900&amp;u_w=1440&amp;u_ah=829&amp;u_aw=1440&amp;u_cd=24&amp;u_nplug=3&amp;u_nmime=23&amp;u_sd=1&amp;flash=0&amp;url=file%3A%2F%2F%2FUsers%2Fcollinschupman%2FDesktop%2Fadtest.html&amp;dssz=6&amp;icsg=8&amp;std=3&amp;csl=134&amp;vrg=78&amp;vrp=78&amp;ga_vid=1010714188.1452541941&amp;ga_sid=1452541941&amp;ga_hid=1562121578"></script><div id="div-gpt-ad-1452138910394-0_ad_container">
<ins style="width: 300px; height: 600px; display: inline-table; position: relative; border: 0px none; vertical-align: bottom;"><ins style="width: 300px; height: 600px; display: block; position: relative; border: 0px none;"><iframe style="border: 0px none; position: absolute; top: 0px; left: 0px;" marginheight="0" marginwidth="0" scrolling="no" name="google_ads_iframe_/3576361/Truck1_0" id="google_ads_iframe_/3576361/Truck1_0" frameborder="0" height="600" width="300"></iframe></ins></ins></div>
<script>googletag.impl.pubads.createDomIframe("div-gpt-ad-1452138910394-0_ad_container" ,"/3576361/Truck1_0",false,false);</script>
      </div>

      <!-- Click Test -->
      <a id="something">Text</a>
      <script type="text/javascript">
        $('#something').click( function() 
        { 
          alert('clicked');
          var someimage = document.getElementById('div-gpt-ad-1452138910394-0');
          console.log(someimage)
          // var myimg = someimage.getElementsByTagName('img')[0];
          // console.log(myimg)
          // var mysrc = myimg.src;
          // console.log(mysrc)
        });
      </script>

<iframe style="display: none; width: 0px; height: 0px;" name="google_osd_static_frame" id="google_osd_static_frame_9257546990485"></iframe></body></html> 

1 个答案:

答案 0 :(得分:0)

这有点&#34; hacky&#34;,但您可以使用此代码获取自定义类型广告素材的代码

googletag.pubads().addEventListener('slotRenderEnded', function (event) {
    var containerId = event.slot.getSlotElementId();
    var containerEl = document.getElementById(containerId);

    if (containerEl === null) return;

    var iframeEl = containerEl.querySelectorAll('iframe')[0];
    console.log(iframeEl.name);
});

你的html是用你将获得的字符串编码的。