CODEWITHSUNDEEP
javascripthtmliframe
Ronald
Ronald

Reputation: 2917

How to update iframe side when some link in the iframe is clicked?

I have the following code, which resize the IFrame depending on the Size of the IFrame Content:

     <html>
   <head>
   <title></title>
   </head>
   <body>
   <iframe src="http://page.html"
   id="iframeid" width="600" height="700" scrolling="no" onload="setIframeHeight(this.id)"></iframe> 
  <script>
 function setIframeHeight(id) {
 var ifrm = document.getElementById(id); 
 var doc = ifrm.contentDocument? ifrm.contentDocument:ifrm.contentWindow.document; 
 ifrm.style.height = "10px";
 ifrm.style.height = getDocHeight(doc) + 4 +"px";
 }

 function getDocHeight(doc){
 doc = doc || document; 
 var body = doc.body; html = doc.documentElement; 
 var height =Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight,    html.scrollHeight, html.offsetHeight); 
 return height;
 }
  $('iframe').css('height', $('iframe body').height() + 'px');
   </script> </body> </html>

This works fine. The IFrame size is set depending on the size of the imported site

http//:page.html

The problem is that when http//:page.html contains links. When this link is clicked, the iframe size is not updated.

Question is: How to update the iframesize when a link is clicked?

Upvotes: 0

Views: 57

Answers (1)

Josh KG
Josh KG

Reputation: 5150

Add an event listener for loads in the iframe to fire your function:

$("iframe").on("load", function() {

    setIframeHeight(id);

    });

This should work as long as the iframe URL is the same domain as the parent document. If it's not you'll probably run into browser security restrictions which will cause this to fail.

Upvotes: 1

Related Questions