Skip to content
Open Iframe Resizer

Cross-Origin setup

Iframes behave differently when the source domain is not the same as the parent page. For example, the page containing the iframe might be accessible via the URL https://my-website.com/index.html, while the iframe you are loading resides at https://another-domain.com/index.html.

In such cases, the iframe’s content document is not directly accessible for security reasons. This is why you must load the script in the parent page and the child page.

  1. Setup parent

    In the parent page, import the script and register the iframe you want to resize:

  2. Setup child

    In the child page, you also need to load the script.

    Note that you do not need to call the initialization function in the child, simply loading the module is sufficient.

What if I have no control over the child domain?

If you do not have control over the child iframe’s domain, but the child page happens to load the legacy iframe-resizer script, you can initialize the library in compatibility mode. This will attempt to connect to the child iframe:

initialize({ enableLegacyLibSupport: true }, "#my-iframe");