Version 5.0.0

.eslintrc

@@ -1,6 +1,5 @@
 {
   "extends": ["auto"],
-  "plugins": ["ie11"],
   "env": {
     "amd": true,
     "browser": true,
@@ -9,50 +8,27 @@
   "globals": {
     "location": true
   },
-  "parserOptions": { "ecmaVersion": 2015 },
+"parserOptions": { "ecmaVersion": 2020 },
   "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,
-    "prefer-destructuring": 0,
-    "prefer-object-spread": 0,
     "prefer-rest-params": 0,
-    "prefer-template": 0,
-    "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,
     "lodash/prefer-noop": 0,
-    "lodash-fp/prefer-constant": 0,
     "pii/no-email": 0,
+    "sonarjs/no-nested-template-literals": 0,
     "switch-case/no-case-curly": 0,
     "unicorn/consistent-function-scoping": 0,
-    "unicorn/filename-case": 0,
     "unicorn/no-array-callback-reference": 0,
-    "unicorn/no-array-method-this-argument": 0,
     "unicorn/no-this-assignment": 0,
-    "unicorn/prefer-date-now": 0,
-    "unicorn/prefer-dom-node-append": 0,
-    "unicorn/prefer-dom-node-remove": 0,
     "unicorn/prefer-module": 0,
-    "unicorn/prefer-node-append": 0,
-    "unicorn/prefer-node-protocol": 0,
-    "unicorn/prefer-node-remove": 0,
     "unicorn/prefer-query-selector": 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
+    "xss/no-mixed-html": 0
   }
 }

.github/workflows/codeql.yml

@@ -24,7 +24,7 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Initialize CodeQL
         uses: github/codeql-action/init@v2

.github/workflows/eslint.yml

@@ -25,26 +25,19 @@ 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
+        uses: actions/checkout@v4
 
       - name: Install ESLint
-        run: |
-          npm install eslint@8
-          npm install @microsoft/eslint-formatter-sarif@2.1.7
+        run: 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

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.
@@ -54,25 +52,12 @@ Scroll the parent page to the coordinates x and y relative to the position of th
 
 Send data to the containing page, `message` can be any data type that can be serialized into JSON. The `targetOrigin` option is used to restrict where the message is sent to; to stop an attacker mimicking your parent page. See the MDN documentation on [postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage) for more details.
 
+<!--
 ### setHeightCalculationMethod(heightCalculationMethod)
 
 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/iframed_page/options.md

@@ -11,18 +11,23 @@ The following options can be set from within the iFrame page by creating a `wind
 <script src="js/iframeresizer.contentwindow.js"></script>
 ```
 
-### targetOrigin
+### heightCalculationMethod / widthCalculationMethod
 
-	default: '*'
-	type: string
+    default: null
+    type: function() { return integer }
 
-This option allows you to restrict the domain of the parent page, to prevent other sites mimicking your parent page.
+Add a custom function to calculate page size. Function must return size as an integer. This can be useful when none of the standard ways of working out the size provide a suitable result. However, normally problems with sizing are due to CSS issues and this should be looked at first.
 
-### heightCalculationMethod / widthCalculationMethod
+### offsetHeight / offsetWidth
 
-    default: null
-    type: string | function() { return integer }
+    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.
 
-These options can be used to override the option set in the parent page (See above for details on available values). This can be useful when moving between pages in the iFrame that require different values for these options.
+### targetOrigin
 
-Altenatively you can pass a custom function that returns the size as an integer. This can be useful when none of the standard ways of working out the size are suitable. However, normally problems with sizing are due to CSS issues and this should be looked at first.
+	default: '*'
+	type: string
+
+This option allows you to restrict the domain of the parent page, to prevent other sites mimicking your parent page.

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

@@ -54,32 +54,41 @@ When set to true, only allow incoming messages from the domain listed in the `sr
 
 When enabled in page linking inside the iFrame and from the iFrame to the parent page will be enabled.
 
+<!--
 ### 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
 
@@ -95,12 +104,14 @@ Set maximum height/width of iFrame.
 
 Set minimum height/width of iFrame.
 
-### resizeFrom
+### offsetHeight / offsetWidth
 
-    default: 'parent'
-    values: 'parent', 'child'
+    default: 0
+    type:    integer
 
-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>.
+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.
+
+<sup>*</sup> This value can also be set on a per page basis in the iframe.
 
 ### scrolling
 
@@ -143,11 +154,12 @@ Set the number of pixels the iFrame content size has to change by, before trigge
 
 Set the number of milliseconds after which a warning is logged if the iFrame has not responded. Set to `0` to supress warning messages of this type.
 
-
+<!--
 ### 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 +168,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
 
@@ -169,3 +183,4 @@ Alternatively it is possible to add your own custom sizing method directly insid
 <sup> † </sup> <i>The **rightMostElement** option is the most reliable way of determining the page width. However, it does have a performance impact as it requires calculating 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>
 
 <sup>*</sup> These methods can cause screen flicker in some browsers.
+-->