Geek asks and answers

Resize Cross-Domain IFRAME

I know this has been set a lot, but how to set the dynamic height of the iframe cross domain when I don't have access to the actual page displayed by IFRAME?

+3
source share
4 answers

You can not. It is impossible to know what the height of the document in the frame is outside the frame, because all information about the document is protected from third-party sites.

+3
source

If you have access to add javascript on the parent and iframe page, you can add this to both:

document.domain = 'mydomain.com';

This way you avoid cross-domain restrictions and can sniff the height to change the height of the iframe on the parent page

0

, ( )

<?php
$homepage = file_get_contents('http://www.megaupload.com'); 
echo $homepage;
?>
<script>etc</script>
0

I also had this problem, but I finally got a solution:

Put this code inside <head>:

    <script type="text/javascript">
  function resizeCrossDomainIframe(id, other_domain) {
    var iframe = document.getElementById(id);
    window.addEventListener('message', function(event) {
      if (event.origin !== other_domain) return; // only accept messages from the specified domain
      if (isNaN(event.data)) return; // only accept something which can be parsed as a number
      var height = parseInt(event.data) + 0; // add some extra height to avoid scrollbar
      iframe.height = height + "px";
    }, false);
  };
</script>

Then use this code for iframe:

<iframe src='http://www.example.com/my-iframe/' frameborder="0" id="my_iframe" onload="resizeCrossDomainIframe('my_iframe', 'http://www.example.com');">
0
source

More articles:


All Articles