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

  • 1030

• Added direction option
• Added postMessageTarget option to better support GAS iframes
• Log element used to calculate lowest/rightmost/tagged element

  • 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.

  • 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

  • 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()

  • 312

  • 508

• Use Math.ceil() to round up sub-pixel heights (Use offset: 1 option)

  • 1017

  • 811

  • 727

• Fixed possible memory leak in addImageListeners

  • 708

• Deconflict AMD and CommonJS

  • 1008

• Created React Example (onMessage)

  • 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 *

  • 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

  • 710

• Investigate scrolling with sticky headers

  • 794

• Add auto same-domain code injection (@iframe-resizer/injector))

Framework components / plugins roadmap

• Vue 3 / Nuxt
• Svelte
• SolidJS
• Angular