Resizing an iframe based on content

Question

I am working on an iGoogle-like application  Content from other applications  on other domains  is shown using iframes    How do I resize the iframes to fit the height of the iframes  content   I ve tried to decipher the javascript Google uses but it s obfuscated  and searching the web has been fruitless so far   Update  Please note that content is loaded from other domains  so the same-origin policy applies

User · Answer

couldn t find something that perfectly handled large texts   large images  but i ended up with this  seems this gets it right  or nearly right  every single time      iframe addEventListener  quot load quot  function               inlineSize  length  perspectiveOrigin  width         let heightMax   0             this seems to work best with images            heightMax   Math max heightMax iframe contentWindow getComputedStyle iframe contentWindow document body  perspectiveOrigin split  quot px quot   0               this seems to work best with text            heightMax   Math max heightMax iframe contentWindow document body scrollHeight              some large 1920x1080 images always gets a little bit off on firefox            const isFirefox   navigator userAgent toLowerCase   indexOf  firefox    gt  -1          if isFirefox  amp  amp  heightMax  gt   900                  grrr               heightMax   heightMax   100                     iframe style height   heightMax  quot px quot             console log heightMax

User · Answer

iGoogle gadgets have to actively implement resizing  so my guess is in a cross-domain model you can t do this without the remote content taking part in some way  If your content can send a message with the new size to the container page using typical cross-domain communication techniques  then the rest is simple

User · Answer

may be a bit late  as all the other answers are older  -  but    here  s my solution  Tested in actual FF  Chrome and Safari 5 0   css   iframe  border 0  overflow hidden     javascript     document  ready function           iframe   load  function              var c    this contentWindow    this contentDocument           if  c document  d   c document          var ih     d  outerHeight            var iw     d  outerWidth              this  css               height  ih              width  iw                           Hope this will help anybody

User · Answer

Work with jquery on load  cross browser      lt iframe src  your url  marginwidth  0   marginheight  0  scrolling  No  frameborder  0   hspace  0  vspace  0  id  containiframe  onload  loaderIframe     height  100    width  100   gt  lt  iframe gt   function loaderIframe    var heightIframe       containiframe   contents   find  body   height        frame   css  height   heightFrame          on resize in responsive page     window  resize function    if     containiframe   length     0    var heightIframe       containiframe   contents   find  body   height         frame   css  height   heightFrame

User · Answer

This is slightly tricky as you have to know when the iframe page has loaded  which is difficuly when you re not in control of its content  Its possible to add an onload handler to the iframe  but I ve tried this in the past and it has vastly different behaviour across browsers  not guess who s the most annoying      You d probably have to add a function to the iframe page that performs the resize and inject some script into the content that either listens to load events or resize events  which then calls the previous function  I m thinking add a function to the page since you want to make sure its secure  but I have no idea how easy it will be to do

User · Answer

We had this type of problem  but slightly in reverse to your situation - we were providing the iframed content to sites on other domains  so the same origin policy was also an issue  After many hours spent trawling google  we eventually found a  somewhat    workable solution  which you may be able to adapt to your needs   There is a way around the same origin policy  but it requires changes on both the iframed content and the framing page  so if you haven t the ability to request changes on both sides  this method won t be very useful to you  i m afraid   There s a browser quirk which allows us to skirt the same origin policy - javascript can communicate either with pages on its own domain  or with pages it has iframed  but never pages in which it is framed  e g  if you have    www foo com home html  which iframes   - gt  www bar net framed html  which iframes       - gt  www foo com helper html   then home html can communicate with framed html  iframed  and helper html  same domain      Communication options for each page    ------------------------- ----------- ------------- -------------                               home html   framed html   helper html     ------------------------- ----------- ------------- -------------     www foo com home html        N A          YES           YES          www bar net framed html      NO           N A           YES          www foo com helper html      YES          YES           N A         ------------------------- ----------- ------------- -------------    framed html can send messages to helper html  iframed  but not home html  child can t communicate cross-domain with parent    The key here is that helper html can receive messages from framed html  and can also communicate with home html    So essentially  when framed html loads  it works out its own height  tells helper html  which passes the message on to home html  which can then resize the iframe in which framed html sits    The simplest way we found to pass messages from framed html to helper html was through a URL argument  To do this  framed html has an iframe with src    specified  When its onload fires  it evaluates its own height  and sets the src of the iframe at this point to helper html height N  There s an explanation here of how facebook handle it  which may be slightly clearer than mine above    Code  In www foo com home html  the following javascript code is required  this can be loaded from a  js file on any domain  incidentally       lt script gt       Resize iframe to full height   function resizeIframe height               60  is a general rule of thumb to allow for differences in        IE  amp  and FF height reporting  can be adjusted as required       document getElementById  frame name here   height   parseInt height  60       lt  script gt   lt iframe id  frame name here  src  http   www bar net framed html  gt  lt  iframe gt    In www bar net framed html    lt body onload  iframeResizePipe    gt   lt iframe id  helpframe  src    height  0  width  0  frameborder  0  gt  lt  iframe gt    lt script type  text javascript  gt    function iframeResizePipe               What s the page height       var height   document body scrollHeight           Going to  pipe  the data to the parent through the helpframe        var pipe   document getElementById  helpframe             Cachebuster a precaution here to stop browser caching interfering      pipe src    http   www foo com helper html height   height   amp cacheb   Math random          lt  script gt    Contents of www foo com helper html    lt html gt    lt  --  This page is on the same domain as the parent  so can communicate with it to order the iframe window resizing to fit the content  -- gt      lt body onload  parentIframeResize    gt        lt script gt            Tell the parent iframe what height the iframe needs to be       function parentIframeResize                    var height   getParam  height                This works as our parent s parent is on our domain            parent parent resizeIframe height                     Helper function  parse param from request string       function getParam  name                   name   name replace                replace                         var regexS         amp    name       amp                var regex   new RegExp  regexS            var results   regex exec  window location href            if  results    null             return             else           return results 1                lt  script gt      lt  body gt    lt  html gt

User · Answer

If you do not need to handle iframe content from a different domain  try this code  it will solve the problem completely and it s simple    lt script language  JavaScript  gt   lt  -- function autoResize id       var newheight      var newwidth       if document getElementById           newheight document getElementById id  contentWindow document  body scrollHeight          newwidth document getElementById id  contentWindow document  body scrollWidth             document getElementById id  height   newheight     px       document getElementById id  width   newwidth     px       -- gt   lt  script gt    lt iframe src  usagelogs default aspx  width  100   height  200px  id  iframe1  marginheight  0  frameborder  0  onLoad  autoResize  iframe1     gt  lt  iframe gt

User · Answer

When you want to zoom out a web page to fit it into the iframe size    You should resize the iframe to fit it with the content Then you should zoom out the whole iframe with the loaded web page content   Here is an example    lt div id  wrap  gt      lt IFRAME ID  frame  name  Main  src   http   www google com    gt   lt  div gt       lt style type  text css  gt       wrap   width  130px  height  130px  padding  0  overflow  hidden         frame   width  900px  height  600px  border  1px solid black         frame   zoom 0 15  -moz-transform scale 0 15  -moz-transform-origin  0 0     lt  style gt

User · Answer

get iframe content height then give it to this iframe   var iframes   document getElementsByTagName  iframe     for var i   0  len   iframes length  i lt len  i           window frames i  onload   function  i              return function                         iframes  i  style height   window frames  i  document body scrollHeight    px                                  i

User · Answer

Something on the lines of this i belive should work   parent document getElementById iFrameID  style height framedPage scrollHeight    Load this with your body onload on the iframe content

User · Answer

Finally I found some other solution for sending data to parent website from iframe using window postMessage message  targetOrigin    Here I explain How I did   Site A   http   foo com  Site B   http   bar com  SiteB is loading inside the siteA website  SiteB website have this line  window parent postMessage  Hello From IFrame            or  window parent postMessage  Hello From IFrame    http   foo com      Then siteA have this following code     Here  addEventListener  is for standards-compliant web browsers and  attachEvent  is for IE Browsers  var eventMethod   window addEventListener    addEventListener     attachEvent   var eventer   window eventMethod     var messageEvent   eventMethod     attachEvent     onmessage     message       Listen to message from child IFrame window eventer messageEvent  function  e       alert e data         Do whatever you want to do with the data got from IFrame in Parent form     false      If you want to add security connection you can use this if condition in eventer messageEvent  function  e       if  e origin     http   iframe example com         alert e data           Do whatever you want to do with the data got from IFrame in Parent form      For IE  Inside IFrame    window parent postMessage    key   value            Outside    eventer messageEvent  function  e       var data   jQuery parseJSON e data      doSomething data key       false

User · Answer

lt html gt   lt head gt   lt script gt  function frameSize id   var frameHeight   document getElementById id  height 0    px   if document getElementById       newheight document getElementById id  contentWindow document body scrollHeight         document getElementById id  height   frameHeight     px      lt  script gt   lt  head gt    lt body gt    lt iframe id  frame   src  startframe html  frameborder  0  marginheight  0  hspace 20     width  100     onload  javascript frameSize  frame     gt    lt p gt This will work  but you need to host it on an http server  you can do it locally      lt  p gt   lt  body gt   lt  html gt

User · Answer

Here s a jQuery approach that adds the info in json via the src attribute of the iframe   Here s a demo  resize and scroll this window   the resulting url with json looks like this     http   fiddle jshell net zippyskippy RJN3G show   docHeight 5124 windowHeight 1019 scrollHeight 571    Here s the source code fiddle http   jsfiddle net zippyskippy RJN3G   function updateLocation         var loc   window location href      window location href   loc replace                            docHeight     document  height                windowHeight     window  height               scrollHeight     window  scrollTop                         setInterval updateLocation 500      window  resize updateLocation     window  scroll updateLocation

User · Answer

This is an old thread  but in 2020 it s still a relevant question  I ve actually posted this answer in another old thread as well    https   stackoverflow com a 64110252 4383587   Just wanted to share my solution and excitement  It took me four entire days of intensive research and failure  but I think I ve found a neat way of making iframes entirely responsive  Yey  I tried a ton of different approaches    I didn t want to use a two-way communication tunnel as with postMessage because it s awkward for same-origin and complicated for cross-origin  as no admin wants to open doors and implement this on your behalf   I ve tried using MutationObservers and still needed several EventListeners  resize  click     to ensure that every change of the layout was handled correctly  - What if a script toggles the visibility of an element  Or what if it dynamically preloads more content on demand  - Another issue was getting an accurate height of the iframe contents from somewhere  Most people suggest using scrollHeight or offsetHeight  or combination of it by using Math max  The problem is  that these values don t get updated until the iframe element changes its dimensions  To achieve that you could simply reset the iframe height   0 before grabbing the scrollHeight  but there are even more caveats to this  So  screw this  Then  I had another idea to experiment with requestAnimationFrame to get rid of my events and observers hell  Now  I could react to every layout change immediately  but I still had no reliable source to infer the content height of the iframe from  And theeen I discovered getComputedStyle  by accident  This was an enlightenment  Everything just clicked  Well  see the code I could eventually distill from my countless attempts  function fit         var iframes   document querySelectorAll  quot iframe gh-fit quot        for var id   0  id  lt  iframes length  id              var win   iframes id  contentWindow         var doc   win document         var html   doc documentElement         var body   doc body         var ifrm   iframes id     or win frameElement          if body                body style overflowX    quot scroll quot     scrollbar-jitter fix             body style overflowY    quot hidden quot                    if html                html style overflowX    quot scroll quot     scrollbar-jitter fix             html style overflowY    quot hidden quot              var style   win getComputedStyle html              ifrm width   parseInt style getPropertyValue  quot width quot       round value             ifrm height   parseInt style getPropertyValue  quot height quot                         requestAnimationFrame fit     addEventListener  quot load quot   requestAnimationFrame bind this  fit    That is it  yes  - In your HTML code write  lt iframe src  quot page html quot  class  quot gh-fit gh-fullwidth quot  gt  lt  iframe gt   The gh-fit is a just fake CSS class  used to identify which iframe elements in your DOM should be affect by the script  The gh-fullwidth is a simple CSS class with one rule width  100    The above script automatically fetches all iframes from the DOM  that have a  gh-fit class assigned  It then grabs and uses the pre-calculated style values for width and height from document getComputedStyle iframe   which always contain a pixel-perfect size of that element    Just perfect  Note  this solution doesn t work cross-origin  nor does any other solution  without a two-way communication strategy like IFrameResizer   JS simply can t access the DOM of an iframe  if it doesn t belong to you  The only other cross-origin solution I can think of  is to use a proxy like https   github com gnuns allorigins  But this would involve deep-copying every request you make - in other words - you  steal  the entire page source code  to make it yours and let JS access the DOM  and you patch every link path in this source  so that it goes through the proxy as well  The re-linking routine is a tough one  but doable  I ll probably try myself at this cross-origin problem  but that s for another day  Enjoy the code

User · Answer

The solution on http   www phinesolutions com use-jquery-to-adjust-the-iframe-height html works great  uses jQuery     lt script type    text javascript    gt      document  ready function         var theFrame         iFrameToAdjust     parent document body       theFrame height   document body  height     30          lt  script gt    I don t know that you need to add 30 to the length    1 worked for me   FYI  If you already have a  height  attribute on your iFrame  this just adds style  height  xxx    This might not be what you want

User · Answer

Using jQuery   parent html   lt body gt   lt script type  text javascript  src  https   code jquery com jquery-2 1 4 min js  gt  lt  script gt   lt style gt  iframe       width  100       border  1px solid black     lt  style gt   lt script gt  function foo w  h           iframe   css  width  w  height  h        return true      for debug purposes    lt  script gt   lt iframe src  child html  gt  lt  iframe gt   lt  body gt    child html   lt body gt   lt script type  text javascript  src  https   code jquery com jquery-2 1 4 min js  gt  lt  script gt   lt script gt    function         var w       container   css  width        var h       container   css  height         var req   parent foo w  h       console log req      for debug purposes      lt  script gt   lt style gt  body  html       margin  0     container       width  500px      height  500px      background-color  red     lt  style gt   lt div id  container  gt  lt  div gt   lt  body gt

User · Answer

Here is a simple solution using a dynamically generated style sheet served up by the same server as the iframe content   Quite simply the style sheet  knows  what is in the iframe  and knows the dimensions to use to style the iframe   This gets around the same origin policy restrictions     http   www 8degrees co nz 2010 06 09 dynamically-resize-an-iframe-depending-on-its-content   So the supplied iframe code would have an accompanying style sheet like so      lt link href  http   your site path to css contents id 1234 amp dom id iframe widget  rel  stylesheet  type  text css    gt    lt iframe id  iframe widget  src  http   your site path to content content id 1234  frameborder  0  width  100   scrolling  no  gt  lt  iframe gt   This does require the server side logic being able to calculate the dimensions of the rendered content of the iframe

User · Answer

https   developer mozilla org en DOM window postMessage     window postMessage        window postMessage is a method for safely enabling cross-origin communication  Normally  scripts on different pages are only allowed to access each other if and only if the pages which executed them are at locations with the same protocol  usually both http   port number  80 being the default for http   and host  modulo document domain being set by both pages to the same value   window postMessage provides a controlled mechanism to circumvent this restriction in a way which is secure when properly used       Summary      window postMessage  when called  causes a MessageEvent to be dispatched at the target window when any pending script that must be executed completes  e g  remaining event handlers if window postMessage is called from an event handler  previously-set pending timeouts  etc    The MessageEvent has the type message  a data property which is set to the string value of the first argument provided to window postMessage  an origin property corresponding to the origin of the main document in the window calling window postMessage at the time window postMessage was called  and a source property which is the window from which window postMessage is called   Other standard properties of events are present with their expected values     The iFrame-Resizer library uses postMessage to keep an iFrame sized to it s content  along with MutationObserver to detect changes to the content and doesn t depend on jQuery   https   github com davidjbradshaw iframe-resizer  jQuery  Cross-domain scripting goodness  http   benalman com projects jquery-postmessage-plugin   Has demo of resizing iframe window     http   benalman com code projects jquery-postmessage examples iframe   This article shows how to remove the dependency on jQuery    Plus has a lot of useful info and links to other solutions    http   www onlineaspect com 2010 01 15 backwards-compatible-postmessage   Barebones example     http   onlineaspect com uploads postmessage parent html  HTML 5 working draft on window postMessage  http   www whatwg org specs web-apps current-work multipage comms html crossDocumentMessages  John Resig on Cross-Window Messaging  http   ejohn org blog cross-window-messaging

User · Answer

The solution on http   www phinesolutions com use-jquery-to-adjust-the-iframe-height html works great  uses jQuery     lt script type    text javascript    gt      document  ready function         var theFrame         iFrameToAdjust     parent document body       theFrame height   document body  height     30          lt  script gt    I don t know that you need to add 30 to the length    1 worked for me   FYI  If you already have a  height  attribute on your iFrame  this just adds style  height  xxx    This might not be what you want

User · Answer

I have an easy solution and requires you to determine the width and height in the link  please try  It works with most browsers     lt a href     onClick   document getElementById  myform   src  t2 htm  document getElementById  myform   width  500px   document getElementById  myform   height  400px   return false  gt 500x400 lt  a gt

User · Answer

iGoogle gadgets have to actively implement resizing  so my guess is in a cross-domain model you can t do this without the remote content taking part in some way  If your content can send a message with the new size to the container page using typical cross-domain communication techniques  then the rest is simple

User · Answer

I m implementing ConroyP s frame-in-frame solution to replace a solution based on setting document domain  but found it to be quite hard determining the height of the iframe s content correctly in different browsers  testing with FF11  Ch17 and IE9 right now    ConroyP uses   var height   document body scrollHeight    But that only works on the initial page load  My iframe has dynamic content and I need to resize the iframe on certain events   What I ended up doing was using different JS properties for the different browsers   function getDim          var body   document body          html   document documentElement       var bc   body clientHeight      var bo   body offsetHeight      var bs   body scrollHeight      var hc   html clientHeight      var ho   html offsetHeight      var hs   html scrollHeight       var h   Math max bc  bo  bs  hc  hs  ho        var bd   getBrowserData            Select height property to use depending on browser     if  bd isGecko               FF 11         h   hc        else if  bd isChrome               CH 17         h   hc        else if  bd isIE               IE 9         h   bs             return h      getBrowserData   is browser detect function  inspired  by Ext Core s http   docs sencha com core source Ext html method-Ext-apply  That worked well for FF and IE but then there were issues with Chrome  One of the was a timing issue  apparently it takes Chrome a while to set detect the hight of the iframe  And then Chrome also never returned the height of the content in the iframe correctly if the iframe was higher than the content  This wouldn t work with dynamic content when the height is reduced   To solve this I always set the iframe to a low height before detecting the content s height and then setting the iframe height to it s correct value   function resize             Reset the iframes height to a low value         Otherwise Chrome won t detect the content height of the iframe      setIframeHeight 150           Delay getting the dimensions because Chrome needs        a few moments to get the correct height      setTimeout  getDimAndResize     100       The code is not optimized  it s from my devel testing     Hope someone finds this helpful

User · Answer

This answer is only applicable for websites which uses Bootstrap  The responsive embed feature of the Bootstrap does the job  It is based on the width  not height  of the content    lt  -- 16 9 aspect ratio -- gt   lt div class  embed-responsive embed-responsive-16by9  gt     lt iframe class  embed-responsive-item  src  http   www youtube com embed WsFWhL4Y84Y  gt  lt  iframe gt   lt  div gt    jsfiddle   http   jsfiddle net 00qggsjj 2   http   getbootstrap com components  responsive-embed

User · Answer

We had this type of problem  but slightly in reverse to your situation - we were providing the iframed content to sites on other domains  so the same origin policy was also an issue  After many hours spent trawling google  we eventually found a  somewhat    workable solution  which you may be able to adapt to your needs   There is a way around the same origin policy  but it requires changes on both the iframed content and the framing page  so if you haven t the ability to request changes on both sides  this method won t be very useful to you  i m afraid   There s a browser quirk which allows us to skirt the same origin policy - javascript can communicate either with pages on its own domain  or with pages it has iframed  but never pages in which it is framed  e g  if you have    www foo com home html  which iframes   - gt  www bar net framed html  which iframes       - gt  www foo com helper html   then home html can communicate with framed html  iframed  and helper html  same domain      Communication options for each page    ------------------------- ----------- ------------- -------------                               home html   framed html   helper html     ------------------------- ----------- ------------- -------------     www foo com home html        N A          YES           YES          www bar net framed html      NO           N A           YES          www foo com helper html      YES          YES           N A         ------------------------- ----------- ------------- -------------    framed html can send messages to helper html  iframed  but not home html  child can t communicate cross-domain with parent    The key here is that helper html can receive messages from framed html  and can also communicate with home html    So essentially  when framed html loads  it works out its own height  tells helper html  which passes the message on to home html  which can then resize the iframe in which framed html sits    The simplest way we found to pass messages from framed html to helper html was through a URL argument  To do this  framed html has an iframe with src    specified  When its onload fires  it evaluates its own height  and sets the src of the iframe at this point to helper html height N  There s an explanation here of how facebook handle it  which may be slightly clearer than mine above    Code  In www foo com home html  the following javascript code is required  this can be loaded from a  js file on any domain  incidentally       lt script gt       Resize iframe to full height   function resizeIframe height               60  is a general rule of thumb to allow for differences in        IE  amp  and FF height reporting  can be adjusted as required       document getElementById  frame name here   height   parseInt height  60       lt  script gt   lt iframe id  frame name here  src  http   www bar net framed html  gt  lt  iframe gt    In www bar net framed html    lt body onload  iframeResizePipe    gt   lt iframe id  helpframe  src    height  0  width  0  frameborder  0  gt  lt  iframe gt    lt script type  text javascript  gt    function iframeResizePipe               What s the page height       var height   document body scrollHeight           Going to  pipe  the data to the parent through the helpframe        var pipe   document getElementById  helpframe             Cachebuster a precaution here to stop browser caching interfering      pipe src    http   www foo com helper html height   height   amp cacheb   Math random          lt  script gt    Contents of www foo com helper html    lt html gt    lt  --  This page is on the same domain as the parent  so can communicate with it to order the iframe window resizing to fit the content  -- gt      lt body onload  parentIframeResize    gt        lt script gt            Tell the parent iframe what height the iframe needs to be       function parentIframeResize                    var height   getParam  height                This works as our parent s parent is on our domain            parent parent resizeIframe height                     Helper function  parse param from request string       function getParam  name                   name   name replace                replace                         var regexS         amp    name       amp                var regex   new RegExp  regexS            var results   regex exec  window location href            if  results    null             return             else           return results 1                lt  script gt      lt  body gt    lt  html gt

User · Answer

The simplest way using jQuery      iframe    attr   scrolling    no    src   http   www someotherlink com      load function           this  css  height     this  contents   height      px

[javascript] Resizing an iframe based on content

Examples related to javascript

Examples related to iframe

Examples related to widget