Welcome to WebmasterWorld Guest from 3.81.29.226

Forum Moderators: open

Getting information from a 3rd party script in an IFRAME

     
1:03 am on Aug 24, 2019 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1205
votes: 120


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.
2:17 am on Aug 27, 2019 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2003
posts:960
votes: 34


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.
5:25 am on Aug 27, 2019 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:10563
votes: 1123


^^^ 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
6:26 am on Aug 27, 2019 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1205
votes: 120


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>
5:28 am on Aug 29, 2019 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:10563
votes: 1123


Is this an attempt to force an ad load? Let us know how that works out!
8:05 am on Aug 29, 2019 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1205
votes: 120


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.
8:18 am on Aug 30, 2019 (gmt 0)

Junior Member

Top Contributors Of The Month

joined:Aug 30, 2019
posts:145
votes: 28


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.
8:51 pm on Aug 30, 2019 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1205
votes: 120


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