CODEWITHSUNDEEP
javascriptjquerygoogle-chromeiframesame-origin-policy
php_nub_qq
php_nub_qq

Reputation: 16055

Set Iframe's height equal to its content

I've been struggling with this for a whole day, unbelievable. I have an option at my site where users can download a full chat history with a certain user, instead of loading it online and most probably crashing their browser. Anyhow, when they request to download their history a zip archive is being created which contains files with history for each day - in case they do not have a strong enough machine to open them all at once and an index file which contains all history files in the form of Iframes ( instead of having the same content written on 2 places ).

The problem: All I want to do is set the Iframe's height equal to its content's height, amazingly this seems unfairly impossible in chrome due to its same-origin policy. I first thought I could just get the child Iframe's body scrollHeight and be alright but then SOP said NO and smacked me across the face. Then I figured I could set the html tag's style.height to its complete height internally from the history file and then retrieve it but that failed as well.

I am really starting to lose hope, can anyone help me out?

Upvotes: 1

Views: 1561

Answers (2)

Astrid
Astrid

Reputation: 1312

In the page of the iframe content and the page where you call the iframe, put this:

<script>
    document.domain = 'http://yoursite.com'; (NOT www.)
</script>

Also make sure you call the iframe WITHOUT www.,

Do: <iframe onload = "setIframeHeight( this.id )" ...>

and iFrameHeight() goes like:

<script>
   document.domain = 'http://yoursite.com';
    function setIframeHeight( iframeId )
    {
     var ifDoc, ifRef = document.getElementById( iframeId );
     try
     {   
      ifDoc = ifRef.contentWindow.document.documentElement;  
     }
     catch( e )
     { 
      try
      { 
       ifDoc = ifRef.contentDocument.documentElement;  
      }
      catch(ee)
      {   
      }  
     }
     if( ifDoc )
     {
      ifRef.height = 1;  
      ifRef.height = ifDoc.scrollHeight;  
     }
 </script>

I'm not sure at all if this will work for you, but for me it did.

Upvotes: 1

Nicolai Fr&#246;hlich
Nicolai Fr&#246;hlich

Reputation: 52503

This Video on Marakana TechTV contains good tips for seemless iframe integration:

iFrame usage with postMessage and seamless emulation at DisQus

Furthermore there is a jQuery plugin ( havent tested ) which claims to provide the functionality.

house9/jquery-iframe-auto-height

Upvotes: 0

Related Questions