CODEWITHSUNDEEP
jqueryhtmliframeexternal
Leandro Bardelli
Leandro Bardelli

Reputation: 11578

Working with Iframes with external sites and JQuery events

I read a lot of things and I'm not sure if this can be done or not, everyone has a different approach about this.

I've a site that links with a third partner site, even more trough a security handle, the third partner site doesn't allow the user if is not logged in on my site. The tip of this comment is there is NO way to change any single line of code on the third partner.

On the other hand, I've on my site an html with two things:

  1. An <iframe> with the third partner site.
  2. A <div> with position:absolute that works over the iframe as a guide, like a "now click here, now go there".

So far so good, also I adjust the iframe height to the vendor document with the following JQuery script on my side:

<script type="text/javascript">
function adjustmyiframe() {
var theFrame = $('#iFrameToAdjust', parent.document.body);
theFrame.height($(document.body).height() + 100);
}
</script>

and my iframe is:

<iframe 
id="iFrameToAdjust" 
onload="adjustmyiframe();"
width="100%"
height="100%" name="myiframe" frameborder="1" vspace="0" hspace="0"
marginwidth="0" marginheight="0" scrolling="no" noresize

 src="http://externalsite"></iframe>

And again, so far so good. But when the user clicks on a link inside the iframe, the vendor site of course reloads and has a different height, and my iframe doesn't adjust again.

So my question is:

Thanks and kind regards

Upvotes: 1

Views: 1383

Answers (1)

SeanCannon
SeanCannon

Reputation: 77956

In this case it might be best to avoid event listening and just poll it with a recursive setTimeout

function adjustmyiframe() {
    var theFrame = $('#iFrameToAdjust', parent.document.body);
    theFrame.height($(document.body).height() + 100);
    setTimeout(adjustmyiframe, 1000); // check again in 1 second.
}

Upvotes: 1

Related Questions