iframe-resizer
iframe-resizer copied to clipboard
Version 5.0.0 Beta
New documentation site
- https://iframe-resizer.com
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
fordata-iframe-size
- Deprecated
sizeHeight
andsizeWidth
in favour of newdirection
option - Deprecated
getPageInfo()
in favour ofgetParentProperties()
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 byResizeObserver
- Enhanced warning messages
- Removed
minHeight
,maxHeight
,minWidth
andmaxHeight
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
andresize
event listeners, as not required alongsideResizeObserver
- #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 usingelement.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 deps (ongoing)
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 withpostMessage()
, rather than use*
- #707
- Migrate
warning
totiny-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
- Astro
- Svelte
- SolidJS
- Angular