CODEWITHSUNDEEP
javascriptphphtmliframe
Ajay Kumar Maurya
Ajay Kumar Maurya

Reputation: 51

How to set iframe height on the bases of the given URL height

Actually, I am not able to set the dynamic height as per the given URL. At that time i am using below code.

<iframe id="myframe" src="http://example.com" scrolling="yes" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:auto; width:100%; height: 100%;"></iframe>

Please suggest me any solution if any possible.

Upvotes: 2

Views: 65

Answers (1)

H&#252;seyin BABAL
H&#252;seyin BABAL

Reputation: 15550

You can do that by getting iframe size and make an adjustment accoridng to that like;

<script type="text/javascript">
  function resizeIframe() {
      var iframe = document.getElementById('myframe');
      if( iframe ) {
            iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
            iframe.width = iframe.contentWindow.document.body.scrollWidth + "px";
      }   
  }
</script>

And in your frame;

<iframe id="myframe" src="http://example.com" scrolling="yes" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" onload="resizeIframe()"></iframe>

Update: Cross Domain

If loaded iframe url is different than your domain, you will get permission error due to CORS. You need to give permission on iframe domain for your domain. Let say;

Iframe Domain: http://example.com

Your Domain: http://yourdomain.com

In Iframe Domain, Apache conf, you need to set header inside <Directory>, <Location>, <Files> or <VirtualHost>;

Header always append Access-Control-Allow-Origin: "example.com"

If domain is not yours, you can use iframe-resizer. Simply, add this library and run;

iFrameResize();

Upvotes: 1

Related Questions