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.

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.

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.

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.

Iframe not downsizing

The most likely cause of this problem is having set the height of an element to be 100% of the page somewhere in your CSS or having a footer element absolutely positioned on the bottom of the iframe.

These issues can be fixed adding a data-iframe-size attribute to the element that you want to define the bottom position of the page.

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" });