Version 5.0.0

[davidjbradshaw]

New documentation site

• https://iframe-resizer.com

Upgrade

For the most part version 5 will be a drop in replacement. The following guide explains how the API has been simplified in the new version.

• https://iframe-resizer.com/upgrade/

New features

• Added automatic selection of best page size calculation method
• Added check for html elements overflowing document body with console warning to advise on how to optimise the performance of page size calculation in this this situation
• Added getParentProperties() function that returns the following information from the parent page:
  • iFrame boundingClientRect details
  • Position and size of scrollable page area
  • Inner size of the bowser window
• Added offsetHeight & offsetWidth options to adjust values returned from iframe
  • FR: Add option for manual offset #1030
• Added direction option
• Added postMessageTarget option to better support GAS iframes
• Log element used to calculate lowest/rightmost/tagged element
  • Display the element that determines the height (lowestElement) in the log #400
• Added visibility checks to disable resizing when either the page or the iframe is hidden
• Added direct message passing for same domain iframes, this gives much improved performance over postMessage()
• Added CSS animation to examples
• Added width resizing to the examples
• Added WordPress guide to docs

Changes

• Changed default height calculation method to auto
• Improved performance optimisation of element based page size calculation methods
• Replaced user interaction and browser event detection with the newish ResizeObserver API, by adding it to all non-static page elements. This provides improved detection of CSS :hover, CSS Animation, <textarea/> user resizing events and remove the need for user interaction event listeners.
  • Adopt ResizeObserver API #961
• Deprecated heightCalculationMethod/widthCalculationMethod in favour of auto calculation mode detection
• Deprecated data-iframe-height / date-iframe-width for data-iframe-size
• Deprecated sizeHeight and sizeWidth in favour of new direction option
• Deprecated getPageInfo() in favour of getParentProperties() which returns more reliable and useful data
• Renamed onInit() -> onReady() , and added deprecation warning
• Renamed size() -> resize() in iframe, and added deprecation warning
• Split out jQuery support into it's own packages @iframe-resizer/jquery
• Changed MutationObserver to now just look for added nodes in the document tree and ensure that new non-static elements are covered by ResizeObserver
• Enhanced warning messages
• Removed minHeight, maxHeight, minWidth and maxHeight options, as modern CSS can now deal with this for us.
• Removed log messages from production build (reduces file sizes by 20%)
• Removed deprecated v3 methods. Calls to v3 methods will now fail, rather than be a warning
• Removed mouse, touch and resize event listeners, as not required alongside ResizeObserver
  • selective listeners #290
• Removed jQuery from examples
• Removed legacy browser support, base support is now ecmaScript2020
• Removed interval fallback, as no longer support browsers that require it
• Removed Firefox invisible iframe fix, as no longer required

Fixes

• Updated lowestElement to exclude non-visible elements (head, meta, base, title, script, link, style, map, area, option, optgroup, template, track, wbr, nobr) and then check remaining elements using element.checkVisibility()
  • <option> tag should never be consider as a displayed element #312
  • lowerElement is good but lowerVisibleElement is much better. #508
• Use Math.ceil() to round up sub-pixel heights (Use offset: 1 option)
  • Fractional parts are missed during the parsing message data #1017
  • Precision problem with fractional height #811
  • Height is a decimal problem #727
• Fixed possible memory leak in addImageListeners
  • Memory leak in contentWindow addImageListeners #708
• Deconflict AMD and CommonJS
  • Doesn't work with ESBuild #1008
• Created React Example (onMessage)
  • onMessage handler not getting any data in IframeResizer in reactjs ? #1084
• Fixed getPageInfo() to update when the size of the iframe changes
• Fix disabling getPageInfo() updates after leaving page in iframe that requested them
• Fixed forcing html/body height to auto !important, incorrectly setting these values is the number one cause of problems effecting the page resizing
• Fixed issue with height / width being returned as strings, rather than numbers by some Parent Page API methods.

Chore

• Migrate build to Rollup
• Migrate integration test to Chrome Headless
• Split into multiple packages
• Refactored code to more modern JavaScript (ongoing)
• Migrate unit tests to Jest (ongoing)
• Create publish script
• Updated dependancies

Future roadmap

• Add types for child API
• log when new element is used to calculate size
• Add Parent option to create data-iframe-size attrs via CSS selector
• When checkOrigin has more than one target, iterate over them with postMessage(), rather than use *
  • Multiple targetOrigin #707
• Migrate warning to tiny-warning in React version
• Detect and ignore elements elements anchored to the page bottom/right of the page
• Detect when an iframe is removed from the page and auto disconnect with warning message
• Add scrollBy() method
• Add object { top: left: behaviour: } to scrollTo / scrollToOffeset
• Add getTopInfo() method
• Migrate to using pubSub patten
• Add EventListener() methods
  • Add addEventListener() and removeEventListener() methods #710
• Investigate scrolling with sticky headers
  • Anchor scroll to incorrect positioning #794
• Add auto same-domain code injection (@iframe-resizer/injector))

Framework components / plugins roadmap

• Vue 3 / Nuxt
• Svelte
• SolidJS
• Angular