[FEATURE] Add before iframe resize (#23)

Lemick · bezbac · web-flow · commit 83d8855bb962 · 2025-05-11T08:59:17.000+02:00
#22 --------- Co-authored-by: Ben Bachem <10088265+bezbac@users.noreply.github.com>
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/core/e2e/usecase-18.spec.ts b/packages/core/e2e/usecase-18.spec.ts
@@ -0,0 +1,12 @@
+import { test } from "@playwright/test";
+import { allIframesOffsetHeightMatch, type AssertArg } from "./utils";
+
+test("Should resize according to onBeforeResize handler (while height is lesser than 2000px)", async ({ page }) => {
+  await page.goto("/usecases/18-on-before-resize-handler/index.html");
+
+  await page.waitForTimeout(1000); // Wait for the content to be added
+
+  await page.waitForFunction<boolean, AssertArg>(allIframesOffsetHeightMatch, { comparator: "greaterThan", threshold: 1000 });
+
+  await page.waitForFunction<boolean, AssertArg>(allIframesOffsetHeightMatch, { comparator: "lesserThan", threshold: 2000 });
+});
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "@open-iframe-resizer/core",
 	"private": false,
-	"version": "1.4.3",
+	"version": "1.5.0",
 	"description": "Open-source modern iframe resizer",
 	"license": "MIT",
 	"repository": {
diff --git a/packages/core/src/parent.ts b/packages/core/src/parent.ts
@@ -217,6 +217,10 @@ function resizeIframe({ registeredElement, newHeight }: { registeredElement: Reg
     clearTimeout(initContext.retryTimeoutId);
   }
 
+  if (settings.onBeforeIframeResize?.({ iframe, settings: { ...settings }, observedHeight: newHeight }) === false) {
+    return;
+  }
+
   const previousBoundingRect = iframe.getBoundingClientRect();
   const newCalculatedHeight = newHeight + settings.offsetSize;
   iframe.style.height = `${newCalculatedHeight}px`;
diff --git a/packages/core/src/type.d.ts b/packages/core/src/type.d.ts
@@ -52,6 +52,15 @@ export type Settings = {
    * Default: `undefined`
    */
   bodyMargin?: string;
+
+  /**
+   * Called whenever the observed content size changes and the iframe is about to be resized.
+   * Return `false` to cancel the resize; returning `true` or nothing will allow it.
+   *
+   * Default: `undefined`
+   */
+  onBeforeIframeResize?: (context: BeforeResizeContext) => boolean | undefined;
+
   /**
    * Listener that is called after the iframe has been resized.
    * You can use a predefined handler like `updateParentScrollOnResize` or create your own custom handler.
@@ -90,6 +99,12 @@ export type ResizeContext = {
   nextRenderState: ResizeRenderState;
 };
 
+export type BeforeResizeContext = {
+  iframe: HTMLIFrameElement;
+  settings: Settings;
+  observedHeight: number;
+};
+
 export type RegisteredElement = {
   iframe: HTMLIFrameElement;
   settings: Settings;
diff --git a/packages/core/usecases/18-on-before-resize-handler/iframe-content.html b/packages/core/usecases/18-on-before-resize-handler/iframe-content.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Text Loader Example</title>
+  <style>
+      body {
+          font-family: Arial, sans-serif;
+          padding: 20px;
+      }
+  </style>
+</head>
+<body>
+<h1 id="title">The text will grow periodically</h1>
+<p id="content">This is the initial text that loads with the page.</p>
+
+<script>
+  const lorem = "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat\n";
+  const content = document.getElementById("content");
+  const additionalText = lorem.repeat(10);
+
+  let times = 0;
+  const intervalId = setInterval(() => {
+    if (times < 3) {
+      content.innerHTML += additionalText;
+      times++;
+    } else {
+      clearInterval(intervalId);
+    }
+  }, 300);
+</script>
+</body>
+</html>
diff --git a/packages/core/usecases/18-on-before-resize-handler/index.html b/packages/core/usecases/18-on-before-resize-handler/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Iframe Resize Example</title>
+  <style>
+      iframe {
+          border: 2px dotted red;
+          width: 800px;
+          height: 100px;
+      }
+  </style>
+</head>
+<body>
+<iframe id="myIframe" src="iframe-content.html"></iframe>
+
+<script type="module">
+  import { initialize } from "/dist/index.js";
+
+  initialize({
+    onBeforeIframeResize: ({ observedHeight }) => {
+      if (observedHeight >= 2000) {
+        return false;
+      }
+    },
+  }, "#myIframe");
+</script>
+
+</body>
+</html>
diff --git a/packages/core/usecases/root.html b/packages/core/usecases/root.html
@@ -31,6 +31,8 @@ <h1>Directory Index</h1>
     <li><a href="./15-cross-origin-target-element-selector/index.html">15 Cross Origin Target Element Selector</a></li>
     <li><a href="./16-custom-padding-margin/index.html">16 Custom Padding Margin</a></li>
     <li><a href="./17-cross-origin-custom-padding-margin/index.html">17 Cross Origin Custom Padding Margin</a></li>
+    <li><a href="./18-on-before-resize-handler/index.html">18 On Before Resize Handler</a></li>
+
   </ul>
 </body>
 </html>
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,7 +1,7 @@
 {
 	"name": "@open-iframe-resizer/react",
 	"private": false,
-	"version": "1.4.3",
+	"version": "1.5.0",
 	"description": "Open-source modern iframe resizer component",
 	"license": "MIT",
 	"repository": {
@@ -45,7 +45,7 @@
 		"test": "npx playwright install --with-deps && npx playwright test"
 	},
 	"dependencies": {
-		"@open-iframe-resizer/core": "1.4.3"
+		"@open-iframe-resizer/core": "1.5.0"
 	},
 	"devDependencies": {
 		"@testing-library/react": "^16.1.0",
diff --git a/packages/react/src/components/index.tsx b/packages/react/src/components/index.tsx
@@ -21,14 +21,25 @@ export function IframeResizer(props: Props) {
 }
 
 function filterProps(props: Props): { iframeAttributes: IframeHTMLAttributes<HTMLIFrameElement>; settings: Partial<Settings> } {
-  const { offsetSize, enableLegacyLibSupport, checkOrigin, onIframeResize, targetElementSelector, bodyMargin, bodyPadding, ...iframeAttributes } = props;
+  const {
+    offsetSize,
+    enableLegacyLibSupport,
+    checkOrigin,
+    onIframeResize,
+    onBeforeIframeResize,
+    targetElementSelector,
+    bodyMargin,
+    bodyPadding,
+    ...iframeAttributes
+  } = props;
 
   // biome-ignore lint/suspicious/noExplicitAny: Compile fail if no key exhaustiveness
   const settings: Required<{ [K in keyof Settings]: any }> = {
     offsetSize,
     enableLegacyLibSupport,
     checkOrigin,
     onIframeResize,
+    onBeforeIframeResize,
     targetElementSelector,
     bodyMargin,
     bodyPadding,
diff --git a/packages/react/usecases/01-module-load/index.html b/packages/react/usecases/01-module-load/index.html
@@ -34,6 +34,9 @@
       React.createElement(IframeResizer, {
         src: './iframe-content.html',
         style: { width: '100%' },
+        onBeforeIframeResize: (height) => {
+          console.log('Iframe content height:', height);
+        },
       })
     );
   }
diff --git a/packages/react/usecases/02-cross-origin-iframe-resizer-compat/index.html b/packages/react/usecases/02-cross-origin-iframe-resizer-compat/index.html
@@ -34,7 +34,10 @@
       React.createElement(IframeResizer, {
         src: 'http://localhost:5553/usecases/02-cross-origin-iframe-resizer-compat/iframe-content.html',
         style: { width: '100%' },
-        enableLegacyLibSupport: true
+        enableLegacyLibSupport: true,
+        onBeforeIframeResize: (height) => {
+          console.log('Iframe content height:', height);
+        },
       })
     );
   }
diff --git a/packages/react/usecases/03-cross-origin-iframe/index.html b/packages/react/usecases/03-cross-origin-iframe/index.html
@@ -32,7 +32,10 @@
       mounted &&
       React.createElement(IframeResizer, {
         src: 'http://localhost:5553/usecases/03-cross-origin-iframe/iframe-content.html',
-        style: { width: '100%' }
+        style: { width: '100%' },
+        onBeforeIframeResize: (height) => {
+          console.log('Iframe content height:', height);
+        },
       })
     );
   }
diff --git a/packages/vue/package.json b/packages/vue/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@open-iframe-resizer/vue",
   "private": false,
-  "version": "1.4.3",
+  "version": "1.5.0",
   "description": "Open-source modern iframe resizer component",
   "license": "MIT",
   "repository": {
@@ -43,7 +43,7 @@
     "test": "npx playwright install --with-deps && npx playwright test"
   },
   "dependencies": {
-    "@open-iframe-resizer/core": "1.4.3"
+    "@open-iframe-resizer/core": "1.5.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.3",
diff --git a/packages/vue/src/components/IframeResizer.vue b/packages/vue/src/components/IframeResizer.vue
@@ -14,6 +14,7 @@ export default defineComponent(<Props>{
     offsetSize: [String, Number, Object] as PropType<Settings["offsetSize"]>,
     checkOrigin: [Boolean, Array] as PropType<Settings["checkOrigin"]>,
     onIframeResize: Function as PropType<Settings["onIframeResize"]>,
+    onBeforeIframeResize: Function as PropType<Settings["onBeforeIframeResize"]>,
     targetElementSelector: [String] as PropType<Settings["targetElementSelector"]>,
     bodyMargin: [String, Number] as PropType<Settings["bodyMargin"]>,
     bodyPadding: [String, Number] as PropType<Settings["bodyPadding"]>,
@@ -30,6 +31,7 @@ export default defineComponent(<Props>{
         enableLegacyLibSupport: props.enableLegacyLibSupport,
         checkOrigin: props.checkOrigin,
         onIframeResize: props.onIframeResize,
+        onBeforeIframeResize: props.onBeforeIframeResize,
         targetElementSelector: props.targetElementSelector,
         bodyMargin: props.bodyMargin,
         bodyPadding: props.bodyPadding,
diff --git a/packages/vue/tsconfig.app.json b/packages/vue/tsconfig.app.json
@@ -2,7 +2,6 @@
   "extends": "@vue/tsconfig/tsconfig.dom.json",
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
diff --git a/packages/vue/tsconfig.node.json b/packages/vue/tsconfig.node.json
@@ -6,14 +6,12 @@
     "module": "ESNext",
     "skipLibCheck": true,
 
-    /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "isolatedModules": true,
     "moduleDetection": "force",
     "noEmit": true,
 
-    /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
diff --git a/website/src/content/docs/reference/api.md b/website/src/content/docs/reference/api.md
@@ -80,6 +80,13 @@ Below is a detailed description of each property:
 - **Description**: Listener that is called after the iframe has been resized. You can use a predefined handler like `updateParentScrollOnResize` create your own custom handler.
 - **Default**: `undefined`
 
+
+### `onBeforeIframeResize`
+
+- **Type**: `(context: BeforeResizeContext) => boolean | undefined`
+- **Description**: Called whenever the observed content size changes and the iframe is about to be resized. Return `false` to cancel the resize; returning `true` or nothing will allow it.
+- **Default**: `undefined`
+
 --- 
 ## Resize handlers
 

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@open-iframe-resizer/core",`
`3`	`3`	`"private": false,`
`4`		`- "version": "1.4.3",`
	`4`	`+ "version": "1.5.0",`
`5`	`5`	`"description": "Open-source modern iframe resizer",`
`6`	`6`	`"license": "MIT",`
`7`	`7`	`"repository": {`