Getting information from a 3rd party script in an IFRAME

[csdude55]

I'm trying to think outside of the box here.

Let's say that I have an element (1) that loads an iframe from a 3rd party (2). Then THAT iframe loads another iframe from another 3rd party (3). That third iframe has an ID that never changes, though.

Can you guys think of a way to check on my end if the content in that third iframe has loaded? Or if it has anything in it?

The width and height is already defined in the second iframe (2), and then it's defined again in the iframe element of the 3rd element, so measuring the width and height of the first element (1) doesn't work.

[rainborick]

My advice would be to move well back toward more conventional thinking. Your description of a page containing an iframe that loads another iframe looks like an enormous red flag to me. While there are JavaScript methods that may help you detect a page load though such a chain most of the time, they are generally not 100% reliable. On top of that, the search engines are never going to see such pages in a favorable light. And to the extent that you employ this practice through a particular website, it will potentially tend to degrade that site's rankings overall. That's before we even begin to consider the end user's experience. So, go back to Square 1 and make a better page that isn't dependent on an external source.

[tangor]

^^^ all that ... and whatever time delays are involved as well!

g might not crawl all the other stuff, but it will see that there is "other stuff" it can't see and that will certainly introduce a trust issue down the line as this is not a "third party" problem, but a "fourth party"...

site 1
user 2
se 2
off site 3
off site off site 4

[csdude55]

Wellllllll... that would be true in general theory, I'm talking about an Adsense banner :-) I just didn't want to say it because I didn't want that fact to overshadow the simplicity of it. But that's just how it comes through after it's all said and done, an iframe in an iframe in an element.

I have a significant problem with banners that win the bid but fail to load, leaving a big empty spot. I currently have a responsive horizontal banner above the fold, and when a 600x300 banner wins the bid but doesn't load it takes up half of the page for nothing!

I've inspected several blanks, and they all have seem to look the same. From Chrome's DevTools (with a few notes added by me):

<ins class="adsbygoogle"

// Note that the height isn't hard-coded on my end, it's just what shows up in DevTools
 style="display: block; height: 280px;"

 data-ad-client="ca-pub-xxxx"
 data-ad-slot="xxxx"
 data-ad-format="auto"
 data-full-width-responsive="true"

// data-adsbygoogle-status isn't hard-coded, either, so I'm not sure why it shows up
 data-adsbygoogle-status="done">

////// nothing from here to the next-to-last </ins> is hard coded
////// spacing and line breaks are added by me for legibility

// everything here looks the same every time I've loaded, until you get to SRC
  <ins id="aswift_1_expand"
   style="display:inline-table;border:none;height:280px;margin:0;padding:0;position:relative;visibility:visible;width:975px;background-color:transparent;">
    <ins id="aswift_1_anchor"
     style="display:block;border:none;height:280px;margin:0;padding:0;position:relative;visibility:visible;width:975px;background-color:transparent;">
      <iframe width="975" height="280" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true"
       onload="var i=this.id,
        s=window.google_iframe_oncopy,
        H=s&amp;&amp;s.handlers,
        h=H&amp;&amp;H[i],
        w=this.contentWindow,
        d;

        try{d=w.document}
        catch(e){}

        if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){
         if(h.call){
          setTimeout(h,0)
         }
         else if(h.match){
          try{h=s.upd(h,i)}
          catch(e){}
          w.location.replace(h)
         }
        }"
        id="aswift_1"
        name="aswift_1"
        style="left: 0px; position: absolute; top: 0px; border: 0px; width: 975px; height: 280px; overflow: visible;">
         <html>
         <head></head>
         <body marginwidth="0" marginheight="0">
         <script>
          google_sl_win=window.parent;
          google_iframe_start_time=new Date().getTime();
          google_async_iframe_id="aswift_1";
         </script>

         <script>
          window.parent.google_sa_impl(
           {
            iframeWin: window,
            pubWin: window.parent,
            vars: window.parent['google_sv_map']['aswift_1']
           }
          );
         </script>

         <iframe id="google_ads_frame1"
          name="google_ads_frame1"
          sandbox="allow-forms allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation-by-user-activation"
          width="975" height="280" frameborder="0"

//////////////////////////////////////////////////////////
// This is the only part that changes
          src="https://blahblahblah..."
//////////////////////////////////////////////////////////

          marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" 
          data-google-container-id="1.smu3bx8vvxyz" 
          data-google-query-id="CJ_Tq9KBmOQCFTIIZQoduJECgA"
          data-load-complete="true">
         </iframe>
         </body>
         </html>
      </iframe>
    </ins>
  </ins>

////// this ends the part that's not hard coded

</ins>

[tangor]

Is this an attempt to force an ad load? Let us know how that works out!

[csdude55]

Not really. I would actually just like to find a way to send a CSS height of 0 if nothing loads.

Using simple Javascript, I know that I can find id="aswift_1":

var interval = setInterval(function() {
 if (document.readyState === 'complete') {
  clearInterval(interval);

  if (document.getElementById('aswift_1'))
   console.log('found')
 }
}, 500);

So I know that I can get to the first IFRAME. But I'm NOT getting to the second one:

var interval = setInterval(function() {
 if (document.readyState === 'complete') {
  clearInterval(interval);

  if (document.getElementById('google_ads_frame1'))
   console.log('found');

  else
   console.log('not found');
 }
}, 500);

I know that coding at 4am is dangerous, but I'm thinking that the answer is going to fall along the lines of:

var interval = setInterval(function() {
 if (document.readyState === 'complete') {
  clearInterval(interval);

  // this doesn't actually work, and I'm not sure why
  document.getElementById('aswift_1').onload = function() {
   console.log('aswift_1 loaded');
  }
 }
}, 500);

Of course, I can't be positive that they'll always be named "aswift_1", so I also need to go through the childNodes or something to figure out the actual ID. But I'll cross that bridge once I figure out how to run something after it's loaded.

[JorgeV]

Hello-

I believe that the problem is that, the iframe is served from another domain as your, and browsers do not let a javascript to access the content even in read only, of an iframe from another domain, for obvious security reasons. I think the first iframe is dynamically produced, which is the reason you can access it , but the second iframe should be from another domain.

[csdude55]

That was my initial thought, too, @JorgeV, but then I couldn't get to #google_ads_frame1... which is before the src. Even removing src completely, I couldn't get there.

But I stumbled across something that seems to get me that far, anyway. It doesn't make sense, but... here's what I have:

var interval = setInterval(function() {
 if (document.readyState === 'complete') {
 clearInterval(interval);

 // I created a <div id="result"></div> element for testing
 var result = document.getElementById('result');

 if (document.getElementById('aswift_1')) {
 if (document.getElementById('aswift_1').hasChildNodes()) {
 var children = document.getElementById('aswift_1').childNodes,
 i;

 // Weird... without this, the next section fails
 for (i=0; i < children.length; i++) {
 result.innerHTML += children[i].nodeValue + ' ';
 }
 }
 }

 if (document.getElementById('google_ads_frame1')) {
 document.getElementById('google_ads_frame1').onload = function() {
 result.innerHTML += '(frame element loaded)<br>';
 }
 }
 }
}, 500);

I created a fiddle for this if you want to see it in action:

[jsfiddle.net...]

I can't explain this one, but if I remove the nodeValue line (I can't paste the whole line here or I get an error), or use console.log instead of innerHTML, or if I even change nodeValue to something like nodeName, then google_ads_frame1 isn't found.

But now that it IS found...

using onload seems to succeed whether I include a src or not, so I'm not sure if this is going to be effective. I tried plugging in a domain that I own but isn't active, and it still succeeded.

My next thought, how do I get the readyState of an IFRAME? I tried this but it just came back as undefined:

document.getElementById('google_ads_frame1').readyState