Troubleshooting

The first steps to investigate any problem is to make sure you are using the latest version and then check the JavaScript Console. iframe-resizer will output the details of any issues it detects and give advise on how to fix them.

Solutions for the most common problems are outlined in this section. If you need further help, then please ask questions on StackOverflow with the iframe-resizer tag.

Bug reports and pull requests are welcome on the issue tracker. Please read the contributing guidelines before opening a ticket, as this will ensure a faster resolution.

Iframe not downsizing

When the iframe has difficulty downsizing the root cause will normmally be one of two different types of CSS issue. The most common cause is having absolutely positioned elements anchored to the bottom or left side of the page. The other common cause is using Viewport or Percentage Sizing Units on the same axes that iframe-resizer is controlling. The Iframe Content Guidelines section explains both of these issues and how to mitigate them.

To find out which element on the page is causing the issue, you can enable the log option and it will output the HTML element being used to calculate the page size to the browser console, each time the page updates.

iframeResize({ log: true })

If for some reason you are unable to fix the CSS on the page, as a fallback you can manually select which page element to use for page size calculation with the data-iframe-size attribute. The Advanced Setup guide explains the different ways that this can be applied to the page.

IFrame not resizing

The most common cause of this is not placing the @iframe-resizer/child package inside the iframed page. If this does not fix the problem then check x-Frame-Options http header on the server that is sending the iframe content, as this can also block postMessage calls from iframe-resizer if set incorrectly.

Multiple IFrames on one page

When the resizer does not work using multiple IFrames on one page, make sure that each iframe has a unique id.

Localhost 127.0.0.1 and file:///

When an iframe is located on your local machine the browser adds extra security restrictions to cross-domain iframes. These can stop iframe-resizer from functioning. If you need to test something locally, then it is best to use the external IP Address of the machine.

Failed to execute ‘postMessage’ on ‘DOMWindow’

This error occurs when the parent window tries to send a message to the iframe before it has loaded. This library makes multiple attempts to talk to the iframe, so if everything is working then you can safely ignore this error message.

If you’re still having problems, or you really want to not ignore the error, then you can try delaying the call to iframeResize() until after the iframe onload event has been triggered, by setting the waitForLoad option to true.

iframeResize({ waitForLoad: true })

Iframe has not responded within 5 seconds

This error happens when the iframe is slow to respond, or is blocked from responding to the request from the parent page.

If everything is working, then this message can be ignored, or if you prefer you can set a longer timeout. On the other hand if you are not getting a response and the child package has been loaded in the iframe, then you need to check that iframe has not been sandboxed, either by setting options on the <iframe> tag, or with the x-Frame-Options http header of the iframe.

ParentIframe not found errors

The parentIframe object is created once the iframe has been initially resized. If you wish to use it during page load you will need call it from the onReady() startup event handler.

<script>
  window.iframeResizer = {
    onReady() {
      const myId = window.parentIframe.getId()
      console.log("The ID of the iframe in the parent page is: " + myId)
    },
  }
</script>

Scrolling does not scroll to where I want it

The scrolling events in iframe-resizer aim to mimic how they work by default in the parent page. If this is not the behavior that you want, then you can use the onScroll event handler in the Parent Page API to adjust how scrolling works to you own requirements.

PDF and OpenDocument files

It is not possible to add the required JavaScript to PDF and ODF files. However, you can get around this limitation by using ViewerJS to render these files inside a HTML page, that also contains the iframe @iframe-resizer/child package.

Unexpected message received error

By default the origin of incoming messages is checked against the src attribute of the iframe. If they don’t match an error is thrown. This behavior can be disabled by setting the checkOrigin option to false.

iframeResize({ checkOrigin: false })

Width not resizing

By default only changes in height are detected, if you want to calculate the width instead then you need to set the direction option to ‘horizontal’.

iframeResize({ direction: "horizontal" })