+[
](https://iframe-resizer.com)
-[](http://badge.fury.io/js/iframe-resizer)
+[](https://badge.fury.io/js/@iframe-resizer%2Fparent)
+
+
+This library enables the automatic resizing of the height and width of both same and cross domain iframes to fit their contained content and provides a range of features to address the most common issues with using iframes.
-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:
+### See [iframe-resizer.com](https://iframe-resizer.com) for details.
-- Height and width resizing of the iFrame to content size.
-- Works with multiple and nested iFrames.
-- 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).
-- 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.
-- Exposes parent position and viewport size to the iFrame.
-- Provides `onMouseEnter` and `onMouseLeave` events for the iFrame.
-- Works with [ViewerJS](http://viewerjs.org/) to support PDF and ODF documents.
+
-## Getting Started
-
-### Install
-
-This package can be installed via NPM (`npm install iframe-resizer --save`).
-
-### Usage
-
-The package contains two minified JavaScript files in the [js](https://github.com/davidjbradshaw/iframe-resizer/tree/master/js) folder. The first ([iframeResizer.min.js](https://raw.githubusercontent.com/davidjbradshaw/iframe-resizer/master/js/iframeResizer.min.js)) is for the page hosting the iFrames. It can be called with via JavaScript:
-
-```js
-const iframes = iFrameResize( [{options}], [css selector] || [iframe] );
-```
-
-The second file ([iframeResizer.contentWindow.min.js](https://raw.github.com/davidjbradshaw/iframe-resizer/master/js/iframeResizer.contentWindow.min.js)) needs placing in the page(s) contained within your iFrame. This file is designed to be a guest on someone else's system, so has no dependencies and won't do anything until it's activated by a message from the containing page.
-
-### Typical setup
-
-The normal configuration is to have the iFrame resize when the browser window changes size or the content of the iFrame changes. To set this up you need to configure one of the dimensions of the iFrame to a percentage and tell the library to only update the other dimension. Normally you would set the width to 100% and have the height scale to fit the content.
-
-```html
-
-
-
-
-```
-
-**Note:** Using _min-width_ to set the width of the iFrame, works around an issue in iOS that can prevent the iFrame from sizing correctly.
-
-If you have problems, check the [troubleshooting](https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/troubleshooting.md) section.
-
-### Example
-
-To see this working take a look at this [example](https://davidjbradshaw.github.io/iframe-resizer/example/) and watch the [console](https://developer.mozilla.org/en-US/docs/Tools/Web_Console).
-
-## API Documentation
-
-IFrame-Resizer provides an extensive range of options and APIs for both the parent page and the iframed page.
-
-- **Parent Page API**
- - [Options](https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/parent_page/options.md)
- - [Events](https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/parent_page/events.md)
- - [Methods](https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/parent_page/methods.md)
-- **IFramed Page API**
- - [Options](https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/iframed_page/options.md)
- - [Events](https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/iframed_page/events.md)
- - [Methods](https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/iframed_page/methods.md)
-- **Use with Libraries and Frameworks**
- - [React](https://github.com/davidjbradshaw/iframe-resizer-react)
- - [Vue](https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/use_with/vue.md)
- - [Nuxt](https://github.com/davidjbradshaw/iframe-resizer/issues/831#issuecomment-665760332)
- - [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)
-- [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 © 2013-23 [David J. Bradshaw](https://github.com/davidjbradshaw) -
-Licensed under the [MIT License](LICENSE)
-
-
diff --git a/babel.config.cjs b/babel.config.cjs
new file mode 100644
index 000000000..77d4cb1ac
--- /dev/null
+++ b/babel.config.cjs
@@ -0,0 +1,12 @@
+module.exports = {
+ plugins: ['@babel/plugin-transform-runtime'],
+ presets: [
+ [
+ '@babel/preset-env',
+ {
+ targets: 'last 4 versions',
+ },
+ ],
+ '@babel/preset-react',
+ ],
+}
diff --git a/bin/getVersion.js b/bin/getVersion.js
new file mode 100644
index 000000000..f29a35f19
--- /dev/null
+++ b/bin/getVersion.js
@@ -0,0 +1,3 @@
+import pkg from '../package.json' with { type: 'json' }
+
+console.log(pkg.version)
diff --git a/bin/publish.sh b/bin/publish.sh
new file mode 100755
index 000000000..f79363510
--- /dev/null
+++ b/bin/publish.sh
@@ -0,0 +1,27 @@
+#! /bin/bash
+
+VERSION=`node bin/getVersion.js 2>/dev/null`
+echo
+echo "Publishing version $VERSION"
+echo
+
+
+npm run build:prod
+
+cd dist/parent
+npm publish
+cd ../child
+npm publish
+cd ../core
+npm publish
+cd ../jquery
+npm publish
+cd ../react
+npm publish
+
+
+git commit -am "Release $VERSION"
+git tag -a $VERSION -m "Release $VERSION"
+git push --tags
+git push
+
diff --git a/build/banner.js b/build/banner.js
new file mode 100644
index 000000000..c65a6de0d
--- /dev/null
+++ b/build/banner.js
@@ -0,0 +1,29 @@
+import pkg from '../package.json' with { type: 'json' }
+
+function capitalizeFirstLetter(string) {
+ return string.charAt(0).toUpperCase() + string.slice(1)
+}
+
+const date = new Date()
+const year = date.getFullYear()
+const today = date.toISOString().split('T')[0]
+
+export default (file, type) => `/*!
+ * @preserve
+ *
+ * @module iframe-resizer/${file} ${pkg.version} (${type}) ${type === 'iife' ? '' : `- ${today}`}
+ *
+ * @license ${pkg.license} for non-commercial use only.
+ * For commercial use, you must purchase a license from
+ * ${pkg.homepage}/pricing
+ *
+ * @desciption Keep same and cross domain iFrames sized to their content
+ *
+ * @author ${pkg.author.name} <${pkg.author.email}>
+ *
+ * @see {@link ${pkg.homepage}}
+ *
+ * @copyright (c) 2013 - ${year}, ${pkg.author.name}. All rights reserved.
+ */
+
+`
diff --git a/build/output.js b/build/output.js
new file mode 100644
index 000000000..01d1b30e9
--- /dev/null
+++ b/build/output.js
@@ -0,0 +1,23 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import terser from '@rollup/plugin-terser'
+
+import createBanner from './banner.js'
+
+export const output = (file) => (format) => ({
+ banner: createBanner(file, format),
+ file: `dist/${file}/index.${format}.js`,
+ generatedCode: 'es2015',
+ format,
+ plugins: terser({
+ output: {
+ comments: false,
+ preamble: createBanner(file, format),
+ },
+ }),
+ sourcemap: false,
+})
+
+export const outputs = (file) => {
+ const out = output(file)
+ return [out('esm'), out('cjs'), out('umd')]
+}
diff --git a/build/pkgJson.js b/build/pkgJson.js
new file mode 100644
index 000000000..5a2a2df00
--- /dev/null
+++ b/build/pkgJson.js
@@ -0,0 +1,54 @@
+const customConfig = (file) => {
+ const entryPoints = {
+ main: `index.cjs.js`,
+ module: `index.esm.js`,
+ browser: `index.umd.js`,
+ }
+
+ switch (file) {
+ case 'react':
+ return {
+ peerDependencies: {
+ react: '^16.8.0 || ^17.0.0 || ^18.0.0',
+ 'react-dom': '^16.8.0 || ^17.0.0 || ^18.0.0',
+ },
+ main: 'index.cjs.js',
+ module: 'index.esm.js',
+ types: `iframe-resizer.${file}.d.ts`,
+ }
+
+ case 'parent':
+ return {
+ ...entryPoints,
+ types: `iframe-resizer.${file}.d.ts`,
+ }
+
+ default:
+ return entryPoints
+ }
+}
+
+export default (file) =>
+ ({
+ version,
+ license,
+ homepage,
+ author,
+ description,
+ github,
+ repository,
+ funding,
+ keywords,
+ }) => ({
+ name: `@iframe-resizer/${file}`,
+ version,
+ license,
+ homepage,
+ author,
+ description,
+ github,
+ repository,
+ funding,
+ ...customConfig(file),
+ keywords: [...keywords, file],
+ })
diff --git a/build/plugins.js b/build/plugins.js
new file mode 100644
index 000000000..5a5364c9e
--- /dev/null
+++ b/build/plugins.js
@@ -0,0 +1,70 @@
+import strip from '@rollup/plugin-strip'
+import commonjs from '@rollup/plugin-commonjs'
+import clear from 'rollup-plugin-clear'
+import copy from 'rollup-plugin-copy'
+import generatePackageJson from 'rollup-plugin-generate-package-json'
+import stripCode from 'rollup-plugin-strip-code'
+import versionInjector from 'rollup-plugin-version-injector'
+
+import createPkgJson from './pkgJson.js'
+
+import pkg from '../package.json' with { type: 'json' }
+
+const vi = {
+ injectInComments: false,
+ logLevel: 'warn',
+}
+
+export const injectVersion = () => [versionInjector(vi)]
+
+export const pluginsBase = (stripLog) => (file) => {
+ const delog = [strip({ functions: ['log'] })]
+
+ const base = [versionInjector(vi), commonjs()]
+
+ return stripLog ? delog.concat(base) : base
+}
+
+const fixVersion = (file) =>
+ file in { core: 1, child: 1 }
+ ? {}
+ : { additionalDependencies: { '@iframe-resizer/core': pkg.version } }
+
+const today = new Date().toISOString().split('T').join(' - ')
+
+const createTransform = (file) => (contents) =>
+ String(contents)
+ .replace(/@@PKG_NAME@@/g, `@iframe-resizer/${file}`)
+ .replace(/@@PKG_VERSION@@/g, pkg.version)
+ .replace(/@@BUILD_DATE@@/g, today)
+
+export const pluginsProd = (file) => {
+ const dest = `dist/${file}`
+ const src = `packages`
+
+ const transform = createTransform(file)
+
+ const targets = [
+ { src: ['LICENSE', 'FUNDING.md' /* 'SECURITY.md' */], dest },
+ { src: `${src}/README.md`, dest, transform },
+ ]
+
+ return [
+ clear({ targets: [dest] }),
+ generatePackageJson({
+ ...fixVersion(file),
+ baseContents: createPkgJson(file),
+ outputFolder: dest,
+ }),
+ copy({
+ copyOnce: true,
+ targets,
+ verbose: true,
+ }),
+ stripCode({
+ start_comment: '// TEST CODE START //',
+ end_comment: '// TEST CODE END //',
+ }),
+ ...pluginsBase(true)(file),
+ ]
+}
diff --git a/docs/getting_started.md b/docs/getting_started.md
deleted file mode 100644
index 8c6a3f9bb..000000000
--- a/docs/getting_started.md
+++ /dev/null
@@ -1,40 +0,0 @@
-## Getting Started
-
-### Install
-
-This package can be installed via NPM (`npm install iframe-resizer --save`).
-
-### Usage
-
-The package contains two minified JavaScript files in the [js](../js) folder. The first ([iframeResizer.min.js](https://raw.githubusercontent.com/davidjbradshaw/iframe-resizer/master/js/iframeResizer.min.js)) is for the page hosting the iFrames. It can be called with **native** JavaScript;
-
-```js
-const iframes = iFrameResize( [{options}], [css selector] || [iframe] );
-```
-
-The second file ([iframeResizer.contentWindow.min.js](https://raw.github.com/davidjbradshaw/iframe-resizer/master/js/iframeResizer.contentWindow.min.js)) needs placing in the page(s) contained within your iFrame. This file is designed to be a guest on someone else's system, so has no dependencies and won't do anything until it's activated by a message from the containing page.
-
-### Typical setup
-
-The normal configuration is to have the iFrame resize when the browser window changes size or the content of the iFrame changes. To set this up you need to configure one of the dimensions of the iFrame to a percentage and tell the library to only update the other dimension. Normally you would set the width to 100% and have the height scale to fit the content.
-
-```html
-
-
-
-```
-
-**Note:** Using _min-width_ to set the width of the iFrame, works around an issue in iOS that can prevent the iFrame from sizing correctly.
-
-If you have problems, check the [troubleshooting](troubleshooting.md) section.
-
-### Example
-
-To see this working take a look at this [example](https://davidjbradshaw.github.io/iframe-resizer/example/) and watch the [console](https://developer.mozilla.org/en-US/docs/Tools/Web_Console).
diff --git a/docs/iframed_page/events.md b/docs/iframed_page/events.md
deleted file mode 100644
index b1425faa1..000000000
--- a/docs/iframed_page/events.md
+++ /dev/null
@@ -1,15 +0,0 @@
-## IFrame Page Events
-
-The following events can be included in the [options](options.md) object attached to the iframed page.
-
-### onMessage
-
- type: function (message)
-
-Receive message posted from the parent page with the `iframe.iFrameResizer.sendMessage()` method.
-
-### onReady
-
- type: function()
-
-This function is called once iFrame-Resizer has been initialized after receiving a call from the parent page. If you need to call any of the [parentIFrame methods](https://github.com/davidjbradshaw/iframe-resizer/blob/master/docs/iframed_page/methods.md) during page load, then they should be called from this event handler.
diff --git a/docs/iframed_page/methods.md b/docs/iframed_page/methods.md
deleted file mode 100644
index 4ec640e25..000000000
--- a/docs/iframed_page/methods.md
+++ /dev/null
@@ -1,78 +0,0 @@
-## IFrame Page Methods
-
-These methods are available in the iFrame via the `window.parentIFrame` object. These method should be contained by a test for the `window.parentIFrame` object, in case the page is not loaded inside an iFrame. For example:
-
-```js
-if ('parentIFrame' in window) {
- parentIFrame.close()
-}
-```
-
-### autoResize([bool])
-
-Turn autoResizing of the iFrame on and off. Returns bool of current state.
-
-### close()
-
-Remove the iFrame from the parent page.
-
-### getId()
-
-Returns the ID of the iFrame that the page is contained in.
-
-### getPageInfo(callback || false)
-
-Ask the containing page for its positioning coordinates. You need to provide a callback which receives an object with the following properties:
-
-* **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)
-* **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.
-
-Pass `false` to disable the callback.
-
-### scrollTo(x,y)
-
-Scroll the parent page to the coordinates x and y.
-
-### scrollToOffset(x,y)
-
-Scroll the parent page to the coordinates x and y relative to the position of the iFrame.
-
-### sendMessage(message,[targetOrigin])
-
-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])
-
-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
-}
-```
diff --git a/docs/iframed_page/options.md b/docs/iframed_page/options.md
deleted file mode 100644
index 30a6d567b..000000000
--- a/docs/iframed_page/options.md
+++ /dev/null
@@ -1,28 +0,0 @@
-## IFrame Page Options
-
-The following options can be set from within the iFrame page by creating a `window.iFrameResizer` object before the JavaScript file is loaded into the page.
-
-```html
-
-
-```
-
-### targetOrigin
-
- default: '*'
- type: string
-
-This option allows you to restrict the domain of the parent page, to prevent other sites mimicking your parent page.
-
-### heightCalculationMethod / widthCalculationMethod
-
- default: null
- type: string | function() { return integer }
-
-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.
-
-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.
diff --git a/docs/parent_page/events.md b/docs/parent_page/events.md
deleted file mode 100644
index 8889f1586..000000000
--- a/docs/parent_page/events.md
+++ /dev/null
@@ -1,67 +0,0 @@
-## Events
-
-The following callback events can be passed to iframe-resizer on the parent page, as part of the [options](options.md) object.
-
-### onClose
-
-```js
-onClose: (iframeID) => boolean
-```
-
-Called before iFrame is closed via `parentIFrame.close()` or `iframe.iFrameResizer.close()` methods. Returning `false` will prevent the iFrame from closing.
-
-### onClosed
-
-```js
-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
-onMessage: ({iframe,message}) => undefined
-```
-
-Receive message posted from iFrame with the `parentIFrame.sendMessage()` method.
-
-### onMouseEnter
-
-```js
-onMouseEnter: ({iframe,height,width,type}) => undefined
-```
-
-Function called after the mouse enters the iframe. Passes `messageData` object containing the **iFrame**, **screenX**, **screenY** and the **type** of event that triggered the callback.
-
-### onMouseLeave
-
-```js
-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.
-
-### onResized
-
-```js
-onResized: ({iframe,height,width,type}) => undefined
-```
-
-Function called after iFrame resized. Passes `messageData` object containing the **iFrame**, **height**, **width** and the **type** of event that triggered the iFrame to resize.
-
-### onScroll
-
-```js
-onScroll: ({x,y}) => [true|false]
-```
-
-Called before the page is repositioned after a request from the iFrame, due to either an in page link, or a direct request from either [parentIFrame.scrollTo()](../iframed_page/methods.md#scrolltoxy) or [parentIFrame.scrollToOffset()](../iframed_page/methods.md#scrolltooffsetxy). If this function returns **false**, it will stop the library from repositioning the page, so that you can implement your own animated page scrolling instead.
diff --git a/docs/parent_page/methods.md b/docs/parent_page/methods.md
deleted file mode 100644
index adfabbb7f..000000000
--- a/docs/parent_page/methods.md
+++ /dev/null
@@ -1,23 +0,0 @@
-## IFrame Object Methods
-
-Once the iFrame has been initialized, an `iFrameResizer` object is bound to it. This has the following methods available.
-
-### close()
-
-Remove the iFrame from the page.
-
-### moveToAnchor(anchor)
-
-Move to anchor in iFrame.
-
-### removeListeners()
-
-Detach event listeners from iFrame. This is option allows Virtual DOMs to remove an iFrame tag. It should not normally be required.
-
-### resize()
-
-Tell the iFrame to resize itself.
-
-### sendMessage(message, [targetOrigin])
-
-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, in case your iFrame navigates away to another domain.
diff --git a/docs/parent_page/options.md b/docs/parent_page/options.md
deleted file mode 100644
index 80af2a265..000000000
--- a/docs/parent_page/options.md
+++ /dev/null
@@ -1,171 +0,0 @@
-
-## Options
-
-The following options can be passed to iframe-resizer on the parent page.
-
-### log
-
- default: false
- type: boolean
-
-Setting the `log` option to true will make the scripts in both the host page and the iFrame output everything they do to the JavaScript console so you can see the communication between the two scripts.
-
-### autoResize
-
- default: true
- type: boolean
-
-When enabled changes to the Window size or the DOM will cause the iFrame to resize to the new content size. Disable if using size method with custom dimensions.
-
-Note: When set to false the iFrame will still inititally size to the contained content, only additional resizing events are disabled.
-
-### bodyBackground
-
- default: null
- type: string
-
-Override the body background style in the iFrame.
-
-### bodyMargin
-
- default: null
- type: string || number
-
-Override the default body margin 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.
-
-### bodyPadding
-
- default: null
- 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
-
- default: true
- type: boolean || array
-
-When set to true, only allow incoming messages from the domain listed in the `src` property of the iFrame tag. If your iFrame navigates between different domains, ports or protocols; then you will need to provide an array of URLs or disable this option.
-
-### inPageLinks
-
- default: false
- type: boolean
-
-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'
-
-By default the height of the iFrame is calculated by converting the margin of the `body` to px and then adding the top and bottom figures to the offsetHeight of the `body` tag.
-
-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` *
-* **documentElementOffset** uses `document.documentElement.offsetHeight`
-* **documentElementScroll** uses `document.documentElement.scrollHeight` *
-* **max** takes the largest value of the main four options *
-* **min** takes the smallest value of the main four options *
-* **lowestElement** Loops though every element in the DOM and finds the lowest bottom point †
-* **taggedElement** Finds the bottom of the lowest element with a `data-iframe-height` attribute
-
-Notes:
-
-**If the default option doesn't work then the best solutions is to use either** taggedElement, **or** lowestElement**.** 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.
-
- † 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.
-
-* These methods can cause screen flicker in some browsers.
-
-### maxHeight / maxWidth
-
- default: infinity
- type: integer
-
-Set maximum height/width of iFrame.
-
-### minHeight / minWidth
-
- default: 0
- type: integer
-
-Set minimum height/width of iFrame.
-
-### 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. Selecting this value can cause issues with some height calculation methods on mobile devices.
-
-### scrolling
-
- default: false
- type: boolean | 'omit'
-
-Enable scroll bars in iFrame.
-
-* **true** applies `scrolling="yes"`
-* **false** applies `scrolling="no"`
-* **'omit'** applies no `scrolling` attribute to the iFrame
-
-### sizeHeight
-
- default: true
- type: boolean
-
-Resize iFrame to content height.
-
-### sizeWidth
-
- default: false
- type: boolean
-
-Resize iFrame to content width.
-
-
-### tolerance
-
- default: 0
- type: integer
-
-Set the number of pixels the iFrame content size has to change by, before triggering a resize of the iFrame.
-
-
-### warningTimeout
-
- default: 5000
- type: integer
-
-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' |
- '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.
-
-Some CSS techniques may require you 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.offsetWidth`
-* **bodyScroll** uses `document.body.scrollWidth` *
-* **documentElementOffset** uses `document.documentElement.offsetWidth`
-* **documentElementScroll** uses `document.documentElement.scrollWidth` *
-* **scroll** takes the largest value of the two scroll options *
-* **max** takes the largest value of the main four options *
-* **min** takes the smallest value of the main four options *
-* **rightMostElement** Loops though every element in the DOM and finds the right most point †
-* **taggedElement** Finds the left most element with a `data-iframe-width` attribute
-
-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
-
- † 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.
-
-* These methods can cause screen flicker in some browsers.
diff --git a/docs/readme.md b/docs/readme.md
deleted file mode 100644
index 2aa170283..000000000
--- a/docs/readme.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# iFrame-Resizer Documentation
-
-- [Getting Started](getting_started.md)
-- **Parent Page API**
- - [Options](parent_page/options.md)
- - [Events](parent_page/events.md)
- - [Methods](parent_page/methods.md)
-- **IFramed Page API**
- - [Options](iframed_page/options.md)
- - [Events](iframed_page/events.md)
- - [Methods](iframed_page/methods.md)
-- **Use with Libraries and Frameworks**
- - [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)
- - [jQuery](use_with/jquery.md)
-- [Troubleshooting](troubleshooting.md)
-- [Upgrade from version 3](upgrade.md)
-- [Version history](../CHANGELOG.md)
diff --git a/docs/troubleshooting.md b/docs/troubleshooting.md
deleted file mode 100644
index 782241ea4..000000000
--- a/docs/troubleshooting.md
+++ /dev/null
@@ -1,119 +0,0 @@
-## Troubleshooting
-
-The first steps to investigate a problem is to make sure you are using the latest version and then enable the [log](#log) option, which outputs everything that happens to the [JavaScript Console](https://developers.google.com/chrome-developer-tools/docs/console#opening_the_console). This will enable you to see what both the iFrame and host page are up to and also see any JavaScript error messages.
-
-Solutions for the most common problems are outlined in this section. If you need further help, then please ask questions on [StackOverflow](http://stackoverflow.com/questions/tagged/iframe-resizer) with the `iframe-resizer` tag.
-
-Bug reports and pull requests are welcome on the [issue tracker](https://github.com/davidjbradshaw/iframe-resizer/issues). Please read the [contributing guidelines](https://github.com/davidjbradshaw/iframe-resizer/blob/master/CONTRIBUTING.md) before opening a ticket, as this will ensure a faster resolution.
-
-### Multiple IFrames on one page
-
-When the resizer does not work using multiple IFrames on one page, make sure that each frame has an unique id or no ids at all.
-
-### IFrame not sizing correctly
-
-If a larger element of content is removed from the normal document flow, through the use of absolute positioning, it can prevent the browser working out the correct size of the page. In such cases you can change the [heightCalculationMethod](./parent_page/options.md#heightcalculationmethod) to uses one of the other sizing methods.
-
-### IFrame not downsizing
-
-The most likely cause of this problem is having set the height of an element to be 100% of the page somewhere in your CSS. This is normally on the `html` or `body` elements, but it could be on any element in the page. This can sometimes be got around by using the `taggedElement` height calculation method and added a `data-iframe-height` attribute to the element that you want to define the bottom position of the page. You may find it useful to use `position: relative` on this element to define a bottom margin or allow space for a floating footer.
-
-Not having a valid [HTML document type](http://en.wikipedia.org/wiki/Document_type_declaration) in the iFrame can also sometimes prevent downsizing. At it's most simplest this can be the following.
-
-```html
-
-```
-
-### IFrame not resizing
-
-The most common cause of this is not placing the [iframeResizer.contentWindow.min.js](https://raw.github.com/davidjbradshaw/iframe-resizer/master/js/iframeResizer.contentWindow.min.js) script inside the iFramed page. If the other page is on a domain outside your control and you can not add JavaScript to that page, then now is the time to give up all hope of ever getting the iFrame to size to the content. As it is impossible to work out the size of the contained page, without using JavaScript on both the parent and child pages.
-
-### 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
-
-```js
-function resize(){
- if ('parentIFrame' in window) {
- // Fix race condition in FireFox with setTimeout
- setTimeout(parentIFrame.size.bind(parentIFrame),0);
- }
-}
-
-$(*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.
-
-```js
-function store() {
- this.x = this.offsetWidth
- this.y = this.offsetHeight
-}
-
-$('textarea')
- .each(store)
- .on('mouseover mouseout', function() {
- if (this.offsetWidth !== this.x || this.offsetHeight !== this.y) {
- store.call(this)
- if ('parentIFrame' in window) {
- parentIFrame.size()
- }
- }
- })
-```
-
-### IFrame flickers
-
-Some of the alternate [height calculation methods](./parent_page/options.md#heightcalculationmethod), such as **max** can cause the iFrame to flicker. This is due to the fact that to check for downsizing, the iFrame first has to be downsized before the new height can be worked out. This effect can be reduced by setting a [minSize](./docs/parent_page/options.md#minheight--minwidth) value, so that the iFrame is not reset to zero height before regrowing.
-
-In modern browsers, if the default [height calculation method](./parent_page/options.md#heightcalculationmethod) does not work, then it is normally best to use **taggedElement** or **lowestElement**, which are both flicker free.
-
-Please see the notes section under [heightCalculationMethod](./parent_page/options.md#heightcalculationmethod) to understand the limitations of the different options.
-
-### Localhost 127.0.0.1 and file:///
-
-When an iframe is located on your local machine the browser adds extra security restrictions to cross-domain iframes. These will stop iframe-resizer from functioning. If you need to test something locally, then it is best to use the external IP Address of the machine.
-
-### Failed to execute 'postMessage' on 'DOMWindow'
-
-This error occurs when the parent window tries to send a message to the iframe before it has loaded. IFrameResize makes multiple attempts to talk to the iFrame, so if everything is working then you can safely ignore this error message.
-
-If you're still having problems, or you really want to not ignore the error, then you can try delaying the call to `iframeResize()` until after the `onLoad` event of the iframe has fired.
-
-If this does not fix the problem then check `x-Frame-Options` http header on the server that is sending the iframe content, as this can also block calls to `postMessage` if set incorrectly.
-
-
-### ParentIFrame not found errors
-
-The `parentIFrame` object is created once the iFrame has been initially resized. If you wish to use it during page load you will need call it from the onReady.
-
-```html
-
-
-```
-
-### PDF and OpenDocument files
-
-It is not possible to add the required JavaScript to PDF and ODF files. However, you can get around this limitation by using [ViewerJS](http://viewerjs.org/) to render these files inside a HTML page, that also contains the iFrame JavaScript file ([iframeResizer.contentWindow.min.js](https://raw.github.com/davidjbradshaw/iframe-resizer/master/js/iframeResizer.contentWindow.min.js)).
-
-### Unexpected message received error
-
-By default the origin of incoming messages is checked against the `src` attribute of the iFrame. If they don't match an error is thrown. This behaviour can be disabled by setting the [checkOrigin](./docs/parent_page/options.md#checkorigin) option to **false**.
-
-### Width not resizing
-
-By default only changes in height are detected, if you want to calculate the width you need to set the `sizeWidth` option to true and the `sizeHeight` option to false.
-
-### Frame has not responded within 5 seconds
-
-This can happen when postMessage is being blocked in browser. There could be multiple reasons to that but in some cases we found that RocketLoader extension within Cloudflare was the reason. Try disabling it if you are using cloudflare.
diff --git a/docs/upgrade.md b/docs/upgrade.md
deleted file mode 100644
index 5456d70b4..000000000
--- a/docs/upgrade.md
+++ /dev/null
@@ -1,5 +0,0 @@
-## Upgrading to version 4
-
-In version 4 support for IE 8-10 and Andriod 4.4 has been removed, if you still need this then please use [version 3](https://github.com/davidjbradshaw/iframe-resizer/tree/V3) of this library.
-
-The callback methods have been renamed to onEvents, so for example `scrollCallback` is now called `onScroll`. This is to enable better integration with modern libraries such as React.
diff --git a/docs/use_with/jquery.md b/docs/use_with/jquery.md
deleted file mode 100644
index 355cef302..000000000
--- a/docs/use_with/jquery.md
+++ /dev/null
@@ -1,7 +0,0 @@
-## jQuery
-
-If jQuery is detected on the page, then this library provides a simple jQuery interface.
-
-```js
-$('iframe').iFrameResize([{ options }])
-```
diff --git a/docs/use_with/vue.md b/docs/use_with/vue.md
deleted file mode 100644
index cab8a5881..000000000
--- a/docs/use_with/vue.md
+++ /dev/null
@@ -1,84 +0,0 @@
-## Vue2
-
-Create the following Vue directive
-
-```js
-import Vue from 'vue'
-import iframeResize from 'iframe-resizer/js/iframeResizer';
-
-Vue.directive('resize', {
- bind: function(el, { value = {} }) {
- el.addEventListener('load', () => iframeResize(value, el))
- },
- unbind: function (el) {
- el.iFrameResizer.removeListeners();
- }
-})
-```
-
-and then include it on your page as follows.
-
-```html
-
-```
-
-- Thanks to [Aldebaran Desombergh](https://github.com/davidjbradshaw/iframe-resizer/issues/513#issuecomment-538333854) for this example
-
-## Vue3 (with Typescript)
-
-Create the following Vue directive (EG `utils/directives/iframeResize.ts`)
-
-```ts
-import { Directive, DirectiveBinding } from 'vue'
-import iframeResize from 'iframe-resizer/js/iframeResizer'
-
-interface ResizableHTMLElement extends HTMLElement {
- iFrameResizer?: {
- removeListeners: () => void
- }
-}
-
-const resize: Directive = {
- mounted(el: HTMLElement, binding: DirectiveBinding) {
- const options = binding.value || {}
-
- el.addEventListener('load', () => iframeResize(options, el))
- },
- unmounted(el: HTMLElement) {
- const resizableEl = el as ResizableHTMLElement
-
- if (resizableEl.iFrameResizer) {
- resizableEl.iFrameResizer.removeListeners()
- }
- },
-}
-
-export default resize
-```
-
-Register the directive
-```ts
-const app = createApp(App)
-...
-app.directive('resize', iframeResize)
-...
-app.mount('#app')
-
-```
-
-and then include it on your page as follows.
-
-```html
-
-```
-
diff --git a/example/frame.absolute.html b/example/child/frame.absolute.html
similarity index 79%
rename from example/frame.absolute.html
rename to example/child/frame.absolute.html
index 942af2dc6..cd5cec159 100644
--- a/example/frame.absolute.html
+++ b/example/child/frame.absolute.html
@@ -1,4 +1,4 @@
-
+
@@ -12,18 +12,20 @@
margin-left: 8px;
}
body {
+ margin: 0;
+ padding: 8px 10px;
border: solid 1px red;
}
p {
- padding: 5px 212px 5px 5px;
+ padding: 5px 112px 5px 5px;
margin: 0 0 5px;
}
#abs {
position: absolute;
top: 0;
right: 0;
- width: 200px;
- height: 600px;
+ width: 100px;
+ height: 900px;
background-color: wheat;
}
a.top {
@@ -43,14 +45,14 @@
Bottom
Scroll to iFrame
@@ -73,13 +75,15 @@
off selecting max if you need to change away from the default
bodyOffset option.
- +
Height Calculation Method -
+ a + +This option should be used sparingly, as the alternate methods can be @@ -99,7 +106,7 @@
Test in page anchor -This element will animate to a width of 800px using CSS keyframes.
++ This iframe contains a page element animated via CSS to change the height of the page. +
+ ++ This is an absolute positioned element that will animate to + a height of 800px using CSS keyframes. +
++ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint + occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. +
++ But I must explain to you how all this mistaken idea of denouncing + pleasure and praising pain was born and I will give you a complete + account of the system, and expound the actual teachings of the great + explorer of the truth, the master-builder of human happiness. No one + rejects, dislikes, or avoids pleasure itself, because it is pleasure, + but because those who do not know how to pursue pleasure rationally + encounter consequences that are extremely painful. Nor again is there + anyone who loves or pursues or desires to obtain pain of itself, because + it is pain, but because occasionally circumstances occur in which toil + and pain can procure him some great pleasure. To take a trivial example, + which of us ever undertakes laborious physical exercise, except to + obtain some advantage from it? But who has any right to find fault with + a man who chooses to enjoy a pleasure that has no annoying consequences, + or one who avoids a pain that produces no resultant pleasure? +
++ On the other hand, we denounce with righteous indignation and dislike + men who are so beguiled and demoralized by the charms of pleasure of the + moment, so blinded by desire, that they cannot foresee the pain and + trouble that are bound to ensue; and equal blame belongs to those who + fail in their duty through weakness of will, which is the same as saying + through shrinking from toil and pain. These cases are perfectly simple + and easy to distinguish. In a free hour, when our power of choice is + untrammelled and when nothing prevents our being able to do what we like + best, every pleasure is to be welcomed and every pain avoided. But in + certain circumstances and owing to the claims of duty or the obligations + of business it will frequently occur that pleasures have to be + repudiated and annoyances accepted. The wise man therefore always holds + in these matters to this principle of selection: he rejects pleasures to + secure other greater pleasures, or else he endures pains to avoid worse + pains. +
++ Mouse over the code example below. +
+ ++ Resize window or click one of the links in the nested iFrame to watch it + resize. +
++ iFrame + + Back to page 1 + + Bottom + + Scroll to iFrame + + Jump to iFrame anchor + Jump to parent anchor +
++ This page has an absolute position element that take it out side the + normal document body, which is marked with a red border on this page. This + prevents the normal height calculation, which is based on the body tag + from returning the correct height. +
++ a + + +
+ +Overflowing text
+ + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint + occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. + ++ Resize the textarea below. +
+ + + + + + + diff --git a/example/frame.content.html b/example/frame.content.html deleted file mode 100644 index 0f20f80c4..000000000 --- a/example/frame.content.html +++ /dev/null @@ -1,125 +0,0 @@ - - - - -- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim - veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea - commodo consequat. Duis aute irure dolor in reprehenderit in voluptate - velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat - cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id - est laborum. -
-- But I must explain to you how all this mistaken idea of denouncing - pleasure and praising pain was born and I will give you a complete account - of the system, and expound the actual teachings of the great explorer of - the truth, the master-builder of human happiness. No one rejects, - dislikes, or avoids pleasure itself, because it is pleasure, but because - those who do not know how to pursue pleasure rationally encounter - consequences that are extremely painful. Nor again is there anyone who - loves or pursues or desires to obtain pain of itself, because it is pain, - but because occasionally circumstances occur in which toil and pain can - procure him some great pleasure. To take a trivial example, which of us - ever undertakes laborious physical exercise, except to obtain some - advantage from it? But who has any right to find fault with a man who - chooses to enjoy a pleasure that has no annoying consequences, or one who - avoids a pain that produces no resultant pleasure? -
-- On the other hand, we denounce with righteous indignation and dislike men - who are so beguiled and demoralized by the charms of pleasure of the - moment, so blinded by desire, that they cannot foresee the pain and - trouble that are bound to ensue; and equal blame belongs to those who fail - in their duty through weakness of will, which is the same as saying - through shrinking from toil and pain. These cases are perfectly simple and - easy to distinguish. In a free hour, when our power of choice is - untrammelled and when nothing prevents our being able to do what we like - best, every pleasure is to be welcomed and every pain avoided. But in - certain circumstances and owing to the claims of duty or the obligations - of business it will frequently occur that pleasures have to be repudiated - and annoyances accepted. The wise man therefore always holds in these - matters to this principle of selection: he rejects pleasures to secure - other greater pleasures, or else he endures pains to avoid worse pains. -
- - - - - - - - diff --git a/example/frame.hover.html b/example/frame.hover.html deleted file mode 100644 index 75f39cad4..000000000 --- a/example/frame.hover.html +++ /dev/null @@ -1,76 +0,0 @@ - - - - -- Mouse over the code example below. -
-- In modern browsers size changes caused by CSS are detected via the ResizeObserver API, - however, if you have an element outside the standard document flow, or in really old browses you may need to detect this - yourself and ask iFrameResizer to update the page size. -
-- Uncomment the code below to see this working. -
- -- Resize window or click one of the links in the nested iFrame to watch it - resize. -
-- Resize the textarea below. -
- - - - - - - - - diff --git a/example/html/index.html b/example/html/index.html new file mode 100644 index 000000000..c26b1788c --- /dev/null +++ b/example/html/index.html @@ -0,0 +1,111 @@ + + + + ++ Resize window or click one of the links in the iFrame to watch it resize. + Or try with two iFrames. +
++ Resize window or click one of the links in the iFrame to watch it resize. + Or go back to a + single iFrame. +
++ Back to + horizontal iFrames. +
+- Resize window or click one of the links in the iFrame to watch it resize. - Or try with two iFrames. -
-This element will animate to a width of 800px using CSS keyframes.
++ This iframe contains a page element animated via CSS to change the height of the page. +
+ ++ This is an absolute positioned element that will animate to + a height of 800px using CSS keyframes. +
++ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint + occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. +
++ But I must explain to you how all this mistaken idea of denouncing + pleasure and praising pain was born and I will give you a complete + account of the system, and expound the actual teachings of the great + explorer of the truth, the master-builder of human happiness. No one + rejects, dislikes, or avoids pleasure itself, because it is pleasure, + but because those who do not know how to pursue pleasure rationally + encounter consequences that are extremely painful. Nor again is there + anyone who loves or pursues or desires to obtain pain of itself, because + it is pain, but because occasionally circumstances occur in which toil + and pain can procure him some great pleasure. To take a trivial example, + which of us ever undertakes laborious physical exercise, except to + obtain some advantage from it? But who has any right to find fault with + a man who chooses to enjoy a pleasure that has no annoying consequences, + or one who avoids a pain that produces no resultant pleasure? +
++ On the other hand, we denounce with righteous indignation and dislike + men who are so beguiled and demoralized by the charms of pleasure of the + moment, so blinded by desire, that they cannot foresee the pain and + trouble that are bound to ensue; and equal blame belongs to those who + fail in their duty through weakness of will, which is the same as saying + through shrinking from toil and pain. These cases are perfectly simple + and easy to distinguish. In a free hour, when our power of choice is + untrammelled and when nothing prevents our being able to do what we like + best, every pleasure is to be welcomed and every pain avoided. But in + certain circumstances and owing to the claims of duty or the obligations + of business it will frequently occur that pleasures have to be + repudiated and annoyances accepted. The wise man therefore always holds + in these matters to this principle of selection: he rejects pleasures to + secure other greater pleasures, or else he endures pains to avoid worse + pains. +
++ Mouse over the code example below. +
+ ++ Resize window or click one of the links in the nested iFrame to watch it + resize. +
++ iFrame + + Back to page 1 + + Bottom + + Scroll to iFrame + + Jump to iFrame anchor + Jump to parent anchor +
++ This page has an absolute position element that take it out side the + normal document body, which is marked with a red border on this page. This + prevents the normal height calculation, which is based on the body tag + from returning the correct height. +
++ a + + +
+ +Overflowing text
+ + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint + occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. + ++ Resize the textarea below. +
+ + + + + + + diff --git a/example/react/index.html b/example/react/index.html new file mode 100644 index 000000000..8d9900935 --- /dev/null +++ b/example/react/index.html @@ -0,0 +1,13 @@ + + + + + + +- Resize window or click one of the links in the iFrame to watch it resize. - Or go back to a - single iFrame. -
-pmyhtl-ylzpgly ylxbpylz h svd jvza vul aptl spjluzl mll. Mvy tvyl pumvythapvu cpzpa oaawz://pmyhtl-ylzpgly.jvt/wypjpun. pmyhtl-ylzpgly vwapvuz av NWSc3. pmyhtl-ylzpgly pz ilpun bzlk bukly aol alytz vm aol NWS C3 spjluzl. Aopz spjluzl hssvdz fvb av bzl pmyhtl-ylzpgly pu Vwlu Zvbyjl wyvqljaz, iba pa ylxbpylz fvby wyvqlja av il wbispj, wyvcpkl haaypibapvu huk il spjluzlk bukly clyzpvu 3 vy shaly vm aol NUB Nlulyhs Wbispj Spjluzl. pmyhtl-ylzpgly ylxbpylz h svd jvza vul aptl spjluzl mll. Mvy tvyl pumvythapvu cpzpa oaawz://pmyhtl-ylzpgly.jvt/wypjpun. pmyhtl-ylzpgly vwapvuz av NWSc3. pmyhtl-ylzpgly pz ilpun bzlk bukly aol alytz vm aol NWS C3 spjluzl. Aopz spjluzl hssvdz fvb av bzl pmyhtl-ylzpgly pu Vwlu Zvbyjl wyvqljaz, iba pa ylxbpylz fvby wyvqlja av il wbispj, wyvcpkl haaypibapvu huk il spjluzlk bukly clyzpvu 3 vy shaly vm aol NUB Nlulyhs Wbispj Spjluzl. pmyhtl-ylzpgly ylxbpylz h svd jvza vul aptl spjluzl mll. Mvy tvyl pumvythapvu cpzpa oaawz://pmyhtl-ylzpgly.jvt/wypjpun. pmyhtl-ylzpgly vwapvuz av NWSc3. pmyhtl-ylzpgly pz ilpun bzlk bukly aol alytz vm aol NWS C3 spjluzl. Aopz spjluzl hssvdz fvb av bzl pmyhtl-ylzpgly pu Vwlu Zvbyjl wyvqljaz, iba pa ylxbpylz fvby wyvqlja av il wbispj, wyvcpkl haaypibapvu huk il spjluzlk bukly clyzpvu 3 vy shaly vm aol NUB Nlulyhs Wbispj Spjluzl.
","\n").replaceAll("
","\n").replaceAll(/<[/a-z]+>/gi,"")))(ie)(...e)),le=e=>re(e);function ce(){!function(){try{U="iframeParentListener"in window.parent}catch(e){}}(),function(){const e=e=>"true"===e,t=N.slice(h).split(":");D=t[0],$=void 0===t[1]?$:Number(t[1]),C=void 0===t[2]?C:e(t[2]),L=void 0===t[3]?L:e(t[3]),z=void 0===t[6]?z:e(t[6]),j=t[7],I=void 0===t[8]?I:t[8],S=t[9],O=t[10],Z=void 0===t[11]?Z:Number(t[11]),R.enable=void 0!==t[12]&&e(t[12]),H=void 0===t[13]?H:t[13],G=void 0===t[14]?G:t[14],W=void 0===t[15]?W:e(t[15]),b=void 0===t[16]?b:Number(t[16]),w=void 0===t[17]?w:Number(t[17]),M=void 0===t[18]?M:e(t[18]),t[19],X=t[20]||X,q=void 0===t[21]?q:Number(t[21])}(),function(){function e(){const e=window.iFrameResizer;_=e?.onMessage||_,ee=e?.onReady||ee,"number"==typeof e?.offset&&(M&&(b=e?.offset),C&&(w=e?.offset)),J=e?.targetOrigin||J,I=e?.heightCalculationMethod||I,G=e?.widthCalculationMethod||G}function t(e,t){return"function"==typeof e&&(c[t]=e,e="custom"),e}if(1===q)return;"iFrameResizer"in window&&Object===window.iFrameResizer.constructor&&(e(),I=t(I,"height"),G=t(G,"width"))}(),function(){void 0===j&&(j=`${$}px`);se("margin",function(e,t){t.includes("-")&&(ae(`Negative CSS value ignored for ${e}`),t="");return t}("margin",j))}(),se("background",S),se("padding",O),function(){const e=document.createElement("div");e.style.clear="both",e.style.display="block",e.style.height="0",document.body.append(e)}(),function(){const e=e=>e.style.setProperty("height","auto","important");e(document.documentElement),e(document.body)}(),q<0?le(`${r(q+2)}${r(2)}`):X.codePointAt(0)>4||q<2&&le(r(3)),function(){if(!X||""===X||"false"===X)return void re(`
","\n").replaceAll("
","\n").replaceAll(/<[/a-z]+>/gi,"")))((e=>(...i)=>[`${a}[${e}]`,...i].join(" "))(e))(i)),d=e=>{if(!e)return"";let i=-559038744,t=1103547984;for(let n,o=0;o
","\n").replaceAll("
","\n").replaceAll(/<[/a-z]+>/gi,"")))((t=>(...i)=>[`${e}[${t}]`,...i].join(" "))(t))(i)),r="5.0.0-RC.3",a="[iFrameSizer]",s=a.length,l=Object.freeze({max:1,scroll:1,bodyScroll:1,documentElementScroll:1}),c=(e,t,i,n)=>e.addEventListener(t,i,n||!1),u=(e,t,i)=>e.removeEventListener(t,i,!1),d=e=>{if(!e)return"";let t=-559038744,i=1103547984;for(let n,o=0;o
-
- - - - - - - - + ++ Resize window or click one of the links in the nested iFrame to watch it + resize. +
+