V5.0.0

.eslintrc

@@ -11,13 +11,13 @@
  },
  "parserOptions": { "ecmaVersion": 2015 },
  "rules": {
+ "const-case/uppercase": 0,
  "func-names": 0,
  "global-require": 0,
  "no-param-reassign": 0,
  "no-plusplus": 0,
  "no-use-before-define": 0,
  "no-shadow": 0,
- "no-var": 0,
  "object-shorthand": 0,
  "one-var": 0,
  "prefer-arrow-callback": 0,
@@ -28,7 +28,6 @@
  "vars-on-top": 0,
  "yoda": 0,
  "ie11/no-collection-args": ["error"],
- "ie11/no-for-in-const": ["error"],
  "ie11/no-loop-func": ["warn"],
  "ie11/no-weak-collections": ["error"],
  "import/no-amd": 0,
@@ -48,11 +47,13 @@
  "unicorn/prefer-node-append": 0,
  "unicorn/prefer-node-protocol": 0,
  "unicorn/prefer-node-remove": 0,
+ "unicorn/prefer-number-properties": 0,
  "unicorn/prefer-query-selector": 0,
+ "unicorn/prefer-spread": 0,
  "unicorn/prefer-string-slice": 0,
  "unicorn/prefer-top-level-await": 0,
- "unicorn/prefer-number-properties": 0,
  "unicorn/prevent-abbreviations": 0,
- "unicorn/switch-case-braces": 0
+ "unicorn/switch-case-braces": 0,
+ "xss/no-mixed-html": 0
  }
 }

.github/workflows/codeql.yml

@@ -27,15 +27,15 @@ jobs:
  uses: actions/checkout@v3
 
  - name: Initialize CodeQL
- uses: github/codeql-action/init@v2
+ uses: github/codeql-action/init@v3
  with:
  languages: ${{ matrix.language }}
  queries: +security-and-quality
 
  - name: Autobuild
- uses: github/codeql-action/autobuild@v2
+ uses: github/codeql-action/autobuild@v3
 
  - name: Perform CodeQL Analysis
- uses: github/codeql-action/analyze@v2
+ uses: github/codeql-action/analyze@v3
  with:
  category: "/language:${{ matrix.language }}"

.github/workflows/eslint.yml

@@ -25,26 +25,21 @@ jobs:
  permissions:
  contents: read
  security-events: write
- actions: read # only required for a private repository by github/codeql-action/upload-sarif to get the Action run status
  steps:
  - name: Checkout code
  uses: actions/checkout@v3
 
  - name: Install ESLint
  run: |
  npm install eslint@8
- npm install @microsoft/eslint-formatter-sarif@2.1.7
+ npm install @microsoft/eslint-formatter-sarif@3
 
  - name: Run ESLint
- run: npx eslint .
- --config .eslintrc.js
- --ext .js,.jsx,.ts,.tsx
- --format @microsoft/eslint-formatter-sarif
- --output-file eslint-results.sarif
+ run: npm run eslint:sarif
  continue-on-error: true
 
  - name: Upload analysis results to GitHub
- uses: github/codeql-action/upload-sarif@v2
+ uses: github/codeql-action/upload-sarif@v3
  with:
  sarif_file: eslint-results.sarif
  wait-for-processing: true

CONTRIBUTING.md

@@ -21,7 +21,7 @@ Good bug reports are extremely helpful, so thanks!
 
 Guidelines for bug reports:
 
-0. **Lint your code** — Use [jshint](http://jshint.com/)
+0. **Lint your code** — Using `npm run eslint:fix` 
  to ensure your problem isn't caused by a simple error in your own code.
 
 1. **Use the GitHub issue search** — check if the issue has already been

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2013-2023 David J. Bradshaw
+Copyright (c) 2013-2024 David J. Bradshaw
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,8 +1,8 @@
 <img src="https://raw.githubusercontent.com/davidjbradshaw/iframe-resizer/master/img/logo-no-background.svg" alt="iFrame Resizer" style="margin-bottom: -20">
 
 [![NPM version](https://badge.fury.io/js/iframe-resizer.svg)](http://badge.fury.io/js/iframe-resizer)
-[![NPM Downloads](https://img.shields.io/npm/dm/iframe-resizer.svg)](https://npm-stat.com/charts.html?package=iframe-resizer&from=2014-12-31)
-[![](https://data.jsdelivr.com/v1/package/npm/iframe-resizer/badge?style=rounded)](https://www.jsdelivr.com/package/npm/iframe-resizer)
+[![NPM Downloads](https://img.shields.io/npm/dm/iframe-resizer.svg)](https://npm-stat.com/charts.html?package=iframe-resizer&from=2014-12-31) <!--
+[![](https://data.jsdelivr.com/v1/package/npm/iframe-resizer/badge?style=rounded)](https://www.jsdelivr.com/package/npm/iframe-resizer) -->
 [![Coverage Status](https://coveralls.io/repos/davidjbradshaw/iframe-resizer/badge.svg?branch=master&service=github)](https://coveralls.io/github/davidjbradshaw/iframe-resizer)
 
 This library enables the automatic resizing of the height and width of both same and cross domain iFrames to fit their contained content. It provides a range of features to address the most common issues with using iFrames, these include:
@@ -12,7 +12,8 @@ This library enables the automatic resizing of the height and width of both same
 - Domain authentication for cross domain iFrames.
 - Provides a range of page size calculation methods to support complex CSS layouts.
 - Detects changes to the DOM that can cause the page to resize using [MutationObserver](https://developer.mozilla.org/en/docs/Web/API/MutationObserver).
-- Detects events that can cause the page to resize (Window Resize, CSS Animation and Transition, Orientation Change and Mouse events).
+- Detects HTML elements resizing with [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver).
+- Detects events that can cause the page to resize (Window Resize, CSS Animation and Transition, Orientation Change, Browser Tab visability, plus a selection of Mouse and Touch events).
 - Simplified messaging between iFrame and host page via [postMessage](https://developer.mozilla.org/en-US/docs/Web/API/window.postMessage).
 - Fixes in page links in iFrame and supports links between the iFrame and parent page.
 - Provides custom sizing and scrolling methods.
@@ -87,14 +88,14 @@ IFrame-Resizer provides an extensive range of options and APIs for both the pare
  - [Angular](https://github.com/davidjbradshaw/iframe-resizer/issues/478#issuecomment-347958630)
  - [Ember](https://github.com/alexlafroscia/ember-iframe-resizer-modifier)
  - [jQuery](https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/use_with/jquery.md)
- - [Google Apps Script](https://stackoverflow.com/a/65724113/2087070)
+ - [Google Apps Script](https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/use_with/google_apps_script.md)
 - [Troubleshooting](https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/troubleshooting.md)
 - [Upgrade from version 3](https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/upgrade.md)
 - [Version history](https://github.com/davidjbradshaw/iframe-resizer/blob/master/CHANGELOG.md)
 
 ## License
 
-Copyright &copy; 2013-23 [David J. Bradshaw](https://github.com/davidjbradshaw) -
+Copyright &copy; 2013-24 [David J. Bradshaw](https://github.com/davidjbradshaw) -
 Licensed under the [MIT License](LICENSE)
 
 <!--

docs/iframed_page/methods.md

@@ -24,18 +24,16 @@ Returns the ID of the iFrame that the page is contained in.
 
 Ask the containing page for its positioning coordinates. You need to provide a callback which receives an object with the following properties:
 
+* **documentHeight** The containing document's height in pixels (the equivalent of `document.documentElement.clientHeight` in the container)
+* **documentWidth** The containing document's width in pixels (the equivalent of `document.documentElement.clientWidth` in the container)
 * **iframeHeight** The height of the iframe in pixels
 * **iframeWidth** The width of the iframe in pixels
 * **offsetLeft** The number of pixels between the left edge of the containing page and the left edge of the iframe
 * **offsetTop** The number of pixels between the top edge of the containing page and the top edge of the iframe
-* **scrollLeft** The number of pixels between the left edge of the iframe and the left edge of the iframe viewport
-* **scrollTop** The number of pixels between the top edge of the iframe and the top edge of the iframe viewport
-* **documentHeight** The containing document's height in pixels (the equivalent of `document.documentElement.clientHeight` in the container)
-* **documentWidth** The containing document's width in pixels (the equivalent of `document.documentElement.clientWidth` in the container)
+* **scrollX** The number of pixels between the top edge of the iframe and the top edge of the iframe viewport (`window.scrollX`)
+* **scrollY** The number of pixels between the left edge of the iframe and the left edge of the iframe viewport (`window.scrollY`)
 * **windowHeight** The containing window's height in pixels (the equivalent of `window.innerHeight` in the container)
 * **windowWidth** The containing window's width in pixels (the equivalent of `window.innerWidth` in the container)
-* **clientHeight** (deprecated) The height of the containing document, considering the viewport, in pixels (`max(documentHeight, windowHeight)`).
-* **clientWidth** (deprecated) The width of the containing document, considering the viewport, in pixels (`max(documentWidth, windowWidth)`).
 
 
 Your callback function will be recalled when the parent page is scrolled or resized.
@@ -58,21 +56,6 @@ Send data to the containing page, `message` can be any data type that can be ser
 
 Change the method use to workout the height of the iFrame.
 
-### size ([customHeight],[ customWidth])
+### size()
 
-Manually force iFrame to resize. This method optionally accepts two arguments: **customHeight** & **customWidth**. To use them you need first to disable the `autoResize` option to prevent auto resizing and enable the `sizeWidth` option if you wish to set the width.
-
-```js
-iFrameResize({
- autoResize: false,
- sizeWidth: true
-})
-```
-
-Then you can call the `size` method with dimensions:
-
-```js
-if ('parentIFrame' in window) {
- parentIFrame.size(100); // Set height to 100px
-}
-```
+Manually force iFrame to resize. If for some reason a change in content size is not detected, this method allows you to nudge iframe-resizer to recalculate the page size.

docs/parent_page/events.md

@@ -18,14 +18,6 @@ onClosed: (iframeID) => undefined
 
 Called after iFrame is closed via `parentIFrame.close()` or `iframe.iFrameResizer.close()` methods.
 
-### onInit
-
-```js
-onInit: (iframe) => undefined
-```
-
-Called after initial setup.
-
 ### onMessage
 
 ```js
@@ -50,6 +42,14 @@ onMouseLeave: ({iframe,height,width,type}) => undefined
 
 Function called after the mouse leaves the iframe. Passes `messageData` object containing the **iFrame**, **screenX**, **screenY** and the **type** of event that triggered the callback.
 
+### onReady
+
+```js
+onReady: (iframe) => undefined
+```
+
+Called after initial setup.
+
 ### onResized
 
 ```js

docs/parent_page/options.md

@@ -19,6 +19,7 @@ When enabled changes to the Window size or the DOM will cause the iFrame to resi
 
 <i>Note: When set to false the iFrame will still inititally size to the contained content, only additional resizing events are disabled.</i>
 
+<!--
 ### bodyBackground
 
  default: null
@@ -39,6 +40,7 @@ Override the default body margin style in the iFrame. A string can be any valid
  type: string || number
 
 Override the default body padding style in the iFrame. A string can be any valid value for the CSS margin attribute, for example '8px 3em'. A number value is converted into px.
+-->
 
 ### checkOrigin
 
@@ -56,31 +58,39 @@ When enabled in page linking inside the iFrame and from the iFrame to the parent
 
 ### heightCalculationMethod
 
- default: 'bodyOffset'
- values: 'bodyOffset' | 'bodyScroll' | 'documentElementOffset' | 'documentElementScroll' |
- 'max' | 'min' | 'grow' | 'lowestElement' | 'taggedElement'
+ default: 'documentElementBoundingClientRect'
+ values: 'documentElementBoundingClientRect' | 'documentElementOffset' | 'documentElementScroll' |
+ 'bodyBoundingClientRect' | 'bodyOffset' | 'bodyScroll' |
+ 'max' | 'min' | 'lowestElement' | 'lowestDivElement' | 'taggedElement'
 
-By default the height of the iFrame is calculated by converting the margin of the `body` to <i>px</i> and then adding the top and bottom figures to the offsetHeight of the `body` tag.
+In most cases the default option will work the best and you won't need to adjust this setting.
 
 In cases where CSS styles causes the content to flow outside the `body` you may need to change this setting to one of the following options. Each can give different values depending on how CSS is used in the page and each has varying side-effects. You will need to experiment to see which is best for any particular circumstance.
 
-* **bodyOffset** uses `document.body.offsetHeight`
-* **bodyScroll** uses `document.body.scrollHeight` <sup>*</sup>
+* **documentElementBoundingClientRect** uses `document.documentElement.getBoundingClientRect().bottom`
 * **documentElementOffset** uses `document.documentElement.offsetHeight`
 * **documentElementScroll** uses `document.documentElement.scrollHeight` <sup>*</sup>
-* **max** takes the largest value of the main four options <sup>*</sup>
-* **min** takes the smallest value of the main four options <sup>*</sup>
+* **bodyBoundingClientRect** uses `document.body.getBoundingClientRect().bottom`
+* **bodyOffset** uses `document.body.offsetHeight`
+* **bodyOffsetMargin** uses `document.body.offsetHeight` + top and bottom margin
+* **bodyScroll** uses `document.body.scrollHeight` <sup>*</sup>
+* **max** takes the largest value of the above options <sup>*</sup>
+* **min** takes the smallest value of the above options <sup>*</sup>
 * **lowestElement** Loops though every element in the DOM and finds the lowest bottom point <sup>†</sup>
+* **lowestDivElement** Loops though every `<div />` element in the DOM to find the lowest bottom point
 * **taggedElement** Finds the bottom of the lowest element with a `data-iframe-height` attribute
 
 <i>Notes:</i>
 
 <i>**If the default option doesn't work then the best solutions is to use either** taggedElement, **or** lowestElement</i>**.** Alternatively it is possible to add your own custom sizing method directly inside the iFrame, see the [iFrame Page Options](../iframed_page/options.md) section for more details.
 
-<sup> † </sup> <i>The **lowestElement** option is the most reliable way of determining the page height. However, it does have a performance impact, as it requires checking the position of every element on the page. The **taggedElement** option provides much greater performance by limiting the number of elements that need their position checked</i>.
+<i>Where a factional value is returned for the height, such as 123.45, it will be rounded up to the nearest whole pixel</i>.
+
+<sup> † </sup> <i>The **lowestElement** option is the most reliable way of determining the page height. However, it can have a performance impact on complex page, due to it checking the position of every element on the page. The **lowestDivElement** and **taggedElement** option provides much greater performance by limiting the number of elements that need their position checked</i>.
 
 <sup>*</sup> These methods can cause screen flicker in some browsers.
 
+
 ### maxHeight / maxWidth
 
  default: infinity
@@ -95,12 +105,21 @@ Set maximum height/width of iFrame.
 
 Set minimum height/width of iFrame.
 
+### offsetHeigt / offsetWidth
+
+ default: 0
+ type: integer
+
+Modify the computed size of the iframe. This is useful if the page in the iframe returns a size value that is consitantly slightly different to how you want the iframe to be sized.
+
+<!-- 
 ### resizeFrom
 
  default: 'parent'
  values: 'parent', 'child'
 
 Listen for resize events from the parent page, or the iFrame. Select the 'child' value if the iFrame can be resized independently of the browser window. <i>Selecting this value can cause issues with some height calculation methods on mobile devices</i>.
+-->
 
 ### scrolling
 
@@ -147,7 +166,8 @@ Set the number of milliseconds after which a warning is logged if the iFrame has
 ### widthCalculationMethod
 
  default: 'scroll'
- values: 'bodyOffset' | 'bodyScroll' | 'documentElementOffset' | 'documentElementScroll' |
+ values: 'bodyOffset' | 'bodyScroll' | 'bodyBoundingClientRect' |
+ 'documentElementOffset' | 'documentElementScroll' | 'documentElementBoundingClientRect' |
  'max' | 'min' | 'scroll' | 'rightMostElement' | 'taggedElement'
 
 By default the width of the page is worked out by taking the greater of the **documentElement** and **body** scrollWidth values.
@@ -156,11 +176,13 @@ Some CSS techniques may require you to change this setting to one of the followi
 
 * **bodyOffset** uses `document.body.offsetWidth`
 * **bodyScroll** uses `document.body.scrollWidth` <sup>*</sup>
+* **bodyBoundingClientRect** uses `document.body.getBoundingClientRect().right`
 * **documentElementOffset** uses `document.documentElement.offsetWidth`
 * **documentElementScroll** uses `document.documentElement.scrollWidth` <sup>*</sup>
+* **documentElementBoundingClientRect** uses `document.documentElement.getBoundingClientRect().right`
 * **scroll** takes the largest value of the two scroll options <sup>*</sup>
-* **max** takes the largest value of the main four options <sup>*</sup>
-* **min** takes the smallest value of the main four options <sup>*</sup>
+* **max** takes the largest value of the main six options <sup>*</sup>
+* **min** takes the smallest value of the main six options <sup>*</sup>
 * **rightMostElement** Loops though every element in the DOM and finds the right most point <sup>†</sup>
 * **taggedElement** Finds the left most element with a `data-iframe-width` attribute
 

docs/readme.md

@@ -13,7 +13,9 @@
  - [React](https://github.com/davidjbradshaw/iframe-resizer-react)
  - [Vue](https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/use_with/vue.md)
  - [Angular](https://github.com/davidjbradshaw/iframe-resizer/issues/478#issuecomment-347958630)
+ - [Ember](https://github.com/alexlafroscia/ember-iframe-resizer-modifier)
  - [jQuery](use_with/jquery.md)
+ - [Google Apps Script](use_with/google_apps_script.md)
 - [Troubleshooting](troubleshooting.md)
 - [Upgrade from version 3](upgrade.md)
 - [Version history](../CHANGELOG.md)

docs/troubleshooting.md

@@ -30,7 +30,7 @@ The most common cause of this is not placing the [iframeResizer.contentWindow.mi
 
 ### IFrame not detecting CSS :hover events
 
-If your page resizes via CSS `:hover` events, these won't be detected by default. It is however possible to create `mouseover` and `mouseout` event listeners on the elements that are resized via CSS and have these events call the [parentIFrame.size()](##parentiframesize-customheight-customwidth) method. With jQuery this can be done as follows
+CSS `:hover` events that cause the page to resize outside of the standard document flow can sometimes be difficult to detect. If this is an issue, then a workaround is to create `mouseover` and `mouseout` event listeners on the elements that are resized via CSS and have these events call the [parentIFrame.size()](##parentiframesize-customheight-customwidth) method. With jQuery this can be done as follows.
 
 ```js
 function resize(){
@@ -43,6 +43,7 @@ function resize(){
 $(*Element with hover style*).hover(resize);
 ```
 
+<!--
 ### IFrame not detecting textarea resizes
 
 Both FireFox and the WebKit based browsers allow the user to resize `textarea` input boxes. Unfortunately the WebKit browsers don't trigger the mutation event when this happens. This can be worked around to some extent with the following code.
@@ -64,6 +65,7 @@ $('textarea')
  }
  })
 ```
+-->
 
 ### IFrame flickers