Advanced Setup
On most pages iframe-resizer is able to detect changes in the iframe, recalculate the page size and adjust the iframe in sub nanosecond time. In a few rare edge cases, it might need a little help.
Custom page size
The following options allow you to adjust how the content size is calculated by targeting which page elements are used in the calculations and then adjusting the returned value.
data-iframe-size
By adding a data-iframe-size attribute to any HTML element on the page, you can tell
iframe-resizer to use that element to calculate the page size. Where their is more
than one element with this attribute, the element with the largest value will be
used.
sizeSelector
This option can be set via the Child Page API settings
and allows you to use a CSS Selector to add the data-iframe-size attribute
to elements on the page. When the page content changes, this will be rerun to
ensure this setting remains up to date.
offsetSize
Available in both the Parent and Child pages, this option allows you to adjust the calculated page size. It can be used with either a positive or negative value.
onBeforeResize()
The onBeforeResize(newSize) event allows you to modify or replace the content
size value, before it is sent to the parent page.
Ignoring page elements
Occasionally it can be useful to ignore page elements from the page size calculation. The most common use cases for this are Overlays and Modal Backdrops.
data-iframe-ignore
Adding a data-iframe-ignore attribute to any HTML element on the page, will remove
that element and all it’s descendants from the Set of overflown
elements that have their size monitored by iframe-resizer.
ignoreSelector
This option can be set via the Child Page API settings
and allows you to use a CSS Selector to add the data-iframe-ignore attribute
to elements on the page. When the page content changes, this will be rerun to
ensure this setting remains up to date.
Performance
If iframe-resizer gives you a warning about performance, then the first two options above can also be used to limit the total number of page elements that require inspection to calculate the page size. This will greatly improve performance on pages where you have a lot of content that has overflown the root document element.