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