iframe-resizer

https://iframe-resizer.com/
Admin
iframe-resizer automatically resizes iframes to fit their content, supports cross-domain iframes,...
Tokens:36,552
Snippets:391
Trust Score:6.5
Update:1 week ago
Show doc for...
Tokens:
Raw
### Install @iframe-resizer/vue with Bun

Source: https://iframe-resizer.com/frameworks/vue3

Install the @iframe-resizer/vue package using Bun.

```bash
bun add @iframe-resizer/vue
```

--------------------------------

### Install @iframe-resizer/core with Yarn

Source: https://iframe-resizer.com/frameworks/vue2

Install the core iframe-resizer Framework API using Yarn.

```bash
yarn add @iframe-resizer/core

```

--------------------------------

### Typical setup with ES Modules

Source: https://iframe-resizer.com/setup/parent

Setup using ES Modules: includes CSS and HTML iframe, then imports iframeResize and calls it with options and selector.

```html
<style>
  iframe {
    width: 100%;
    height: 100vh;
  }
</style>


<iframe id="myIframe" src="http://anotherdomain.com/iframe.html"></iframe>
```

```javascript
import iframeResize from '@iframe-resizer/parent'


const options = {
  license: 'xxxx',
  log: 'collapsed',
}


const iframeSelector = '#myIframe'


iframeResize(options, iframeSelector)
```

--------------------------------

### Typical setup with CommonJS

Source: https://iframe-resizer.com/setup/parent

Setup using CommonJS: includes CSS and HTML iframe, then requires iframeResize and calls it with options and selector.

```html
<style>
  iframe {
    width: 100%;
    height: 100vh;
  }
</style>


<iframe id="myIframe" src="http://anotherdomain.com/iframe.html"></iframe>
```

```javascript
const iframeResize = require("@iframe-resizer/parent")


const options = {
  license: 'xxxx',
  log: 'collapsed',
}


const selector = '#myIframe'


iframeResize(options, selector)
```

--------------------------------

### Install @iframe-resizer/vue with Yarn

Source: https://iframe-resizer.com/frameworks/vue3

Install the @iframe-resizer/vue package using Yarn.

```bash
yarn add @iframe-resizer/vue
```

--------------------------------

### Install @iframe-resizer/vue with npm

Source: https://iframe-resizer.com/frameworks/vue3

Install the @iframe-resizer/vue package using npm.

```bash
npm install @iframe-resizer/vue --save
```

--------------------------------

### Install @iframe-resizer/core with npm

Source: https://iframe-resizer.com/frameworks/vue2

Install the core iframe-resizer Framework API using npm.

```bash
npm install @iframe-resizer/core --save

```

--------------------------------

### Typical setup with Vanilla JS

Source: https://iframe-resizer.com/setup/parent

Complete setup for the parent page using Vanilla JS: includes CSS, HTML iframe, and script that calls iframeResize with options and selector.

```html
<style>
  iframe {
    width: 100%;
    height: 100vh;
  }
</style>


<iframe id="myIframe" src="http://anotherdomain.com/iframe.html"></iframe>


<script src="/node_modules/@iframe-resizer/parent/index.umd.js"></script>
<script>
  iframeResize({
    license: 'xxxx',
    log: 'collapsed',
  }, '#myIframe' )
</script>
```

--------------------------------

### Install @iframe-resizer/vue with pnpm

Source: https://iframe-resizer.com/frameworks/vue3

Install the @iframe-resizer/vue package using pnpm.

```bash
pnpm add @iframe-resizer/vue
```

--------------------------------

### Install @iframe-resizer/core with pnpm

Source: https://iframe-resizer.com/frameworks/vue2

Install the core iframe-resizer Framework API using pnpm.

```bash
pnpm add @iframe-resizer/core

```

--------------------------------

### Typical setup with jsDelivr CDN

Source: https://iframe-resizer.com/setup/parent

Setup using jsDelivr CDN: includes CSS, HTML iframe, and script tags that load the library and call iframeResize.

```html
<style>
iframe {
  width: 100%;
  height: 100vh;
}
</style>


<iframe id="myIframe" src="http://anotherdomain.com/iframe.html"></iframe>


<!-- replace '@5.5.9' below with the version you wish to use. -->
<script src="https://cdn.jsdelivr.net/npm/@iframe-resizer/parent@5.5.9"></script>
<script>
iframeResize({
  license: 'xxxx',
  log: 'collapsed',
}, '#myIframe')
</script>
```

--------------------------------

### Typical setup with Vanilla JS (UMD)

Source: https://iframe-resizer.com/setup

Typical setup using the vanilla JavaScript UMD build from a local node_modules path. Includes the necessary iframe CSS and HTML, loads the library, and calls `iframeResize()` with options and a CSS selector.

```html
<style>
  iframe {
    width: 100%;
    height: 100vh;
  }
</style>


<iframe id="myIframe" src="http://anotherdomain.com/iframe.html"></iframe>


<script src="/node_modules/@iframe-resizer/parent/index.umd.js"></script>
<script>
  iframeResize({
    license: 'xxxx',
    log: 'collapsed',
  }, '#myIframe' )
</script>

```

--------------------------------

### Install parent package with Yarn

Source: https://iframe-resizer.com/setup/parent

Install the @iframe-resizer/parent package using Yarn.

```bash
yarn add @iframe-resizer/parent
```

--------------------------------

### Install @iframe-resizer/react with Bun

Source: https://iframe-resizer.com/frameworks/react

Install the React package using Bun. Requires the @iframe-resizer/child package to be loaded on every page inside the iframe.

```bash
bun add @iframe-resizer/react
```

--------------------------------

### Install parent package with pnpm

Source: https://iframe-resizer.com/setup/parent

Install the @iframe-resizer/parent package using pnpm.

```bash
pnpm add @iframe-resizer/parent
```

--------------------------------

### Install parent package with npm

Source: https://iframe-resizer.com/setup/parent

Install the @iframe-resizer/parent package using npm.

```bash
npm install @iframe-resizer/parent --save
```

--------------------------------

### Create setup script for iframe

Source: https://iframe-resizer.com/third_party/share

Creates the iframe with the link to your content, then loads and configures iframe-resizer. Minify this code using Terser or UglifyJS before deploying.

```javascript
; (function () {
  // URL of the site where the iframe content is hosted
  const site = "https://your-domain.com"


  // Path to the iframe content
  const path = "iframe-content.html"


  // Path to the iframe-resizer parent script
  const parentScript = "node_modules/@iframe-resizer/parent/index.umd.min.js"


  // Options for iframe-resizer
  const options = {
    log: "collapsed",
  }


  // iframe configuration
  const width = "100%"
  const height = "100vh"


  // Create the iframe
  const iframe = document.createElement("iframe")
  iframe.src = `${site}/${path}`
  iframe.style.width = width
  iframe.style.height = height


  // Load iframe-resizer parent script
  const script = document.createElement("script")
  script.src = `${site}/${parentScript}`
  script.async = true
  script.fetchPriority = "high"
  script.onload = () => iframeResize(options, iframe)
  script.onerror = function () {
    console.error("Failed to load iframe-resizer library.")
  }


  // Insert iframe and script files after this script
  document.currentScript.replaceWith(iframe, script)
})()
```

--------------------------------

### Install @iframe-resizer/jquery with Yarn

Source: https://iframe-resizer.com/frameworks/jquery

Install the package using Yarn. Requires the @iframe-resizer/child package to be loaded into the iframe.

```bash
yarn add @iframe-resizer/jquery

```

--------------------------------

### Install @iframe-resizer/react with Yarn

Source: https://iframe-resizer.com/frameworks/react

Install the React package using Yarn. Requires the @iframe-resizer/child package to be loaded on every page inside the iframe.

```bash
yarn add @iframe-resizer/react
```

--------------------------------

### Install @iframe-resizer/jquery with npm

Source: https://iframe-resizer.com/frameworks/jquery

Install the package using npm. Requires the @iframe-resizer/child package to be loaded into the iframe.

```bash
npm install @iframe-resizer/jquery --save

```

--------------------------------

### Advanced example with events and methods

Source: https://iframe-resizer.com/frameworks/react

Demonstrates using options, events, and methods. Includes onResized and onMessage handlers, and uses a MessageData component to display data.

```jsx
import { useRef, useState } from 'react'
import IframeResizer from '@iframe-resizer/react'
import MessageData from './message-data.jsx'


function App() {
  const iframeRef = useRef(null)
  const [messageData, setMessageData] = useState()


  const onResized = (data) => setMessageData(data)


  const onMessage = (data) => {
    setMessageData(data)
    iframeRef.current.sendMessage('Hello back from the parent page')
  }


  return (
    <>
      <IframeResizer
        license='xxxx'
        forwardRef={iframeRef}
        inPageLinks
        onMessage={onMessage}
        onResized={onResized}
        src="child.html"
        style={{ width: '100%', height: '100vh'}}
      />
      <MessageData data={messageData} />
    </>
  )
}


export default App
```

```jsx
const MessageData = ({ data }) =>
  data ? (
    data.message ? (
      <span>
        <b>Frame ID:</b> {data.iframe.id} <br/>
        <b>Message:</b> {data.message}
      </span>
    ) : (
      <span>
        <b>Frame ID:</b> {data.iframe.id} <br/>
        <b>Height:</b> {data.height} <br/>
        <b>Width:</b> {data.width} <br/>
        <b>Event type:</b> {data.type}
      </span>
    )
  ) : null


export default MessageData
```

--------------------------------

### Install @iframe-resizer/core with npm, pnpm, or Yarn and save as dependency

Source: https://iframe-resizer.com/frameworks/angular

Install the core @iframe-resizer/core Framework API using npm, pnpm, or Yarn. Each package manager is an equivalent alternative; choose based on your project's package manager.

```bash
npm install @iframe-resizer/core --save

```

```bash
pnpm add @iframe-resizer/core

```

```bash
yarn add @iframe-resizer/core

```

--------------------------------

### Install @iframe-resizer/jquery with pnpm

Source: https://iframe-resizer.com/frameworks/jquery

Install the package using pnpm. Requires the @iframe-resizer/child package to be loaded into the iframe.

```bash
pnpm add @iframe-resizer/jquery

```

--------------------------------

### HTML snippet to include setup script on third-party page

Source: https://iframe-resizer.com/third_party/include

This HTML snippet is provided to third-party providers to include on each page they show in the iframe. It loads the setup script from your domain.

```html
<script async src="https://your-domain.com/include-iframe.js">
```

--------------------------------

### Install @iframe-resizer/react with pnpm

Source: https://iframe-resizer.com/frameworks/react

Install the React package using pnpm. Requires the @iframe-resizer/child package to be loaded on every page inside the iframe.

```bash
pnpm add @iframe-resizer/react
```

--------------------------------

### Install @iframe-resizer/react with npm

Source: https://iframe-resizer.com/frameworks/react

Install the React package using npm. Requires the @iframe-resizer/child package to be loaded on every page inside the iframe.

```bash
npm install @iframe-resizer/react --save
```

--------------------------------

### Parent page setup with vanilla JS iframe-resizer

Source: https://iframe-resizer.com/guides/wordpress

Sets up the parent page using the vanilla JS version of iframe-resizer. Includes CSS (width 100%, height 100vh), an iframe with id 'myIframe', and the initialization script. Replace 'xxxx' with your actual license key; for non-commercial GPLv3 projects, use 'GPLv3' as shown in the separate snippet.

```html
<style>
  iframe {
    width: 100%;
    height: 100vh;
  }
</style>


<iframe id="myIframe" src="http://anotherdomain.com/iframe.html"></iframe>


<script src="/wp-admin/js/iframe-resizer.parent.js"></script>
<script>
  iframeResize({
    license: 'xxxx',
    log: 'collapsed',
  }, '#myIframe');
</script>
```

--------------------------------

### Typical setup with width 100% and height 100vh

Source: https://iframe-resizer.com/frameworks/react

Configures the iframe to resize when the browser window changes or content changes. Sets width to 100% and initial height to 100vh for smoother loading.

```jsx
<IframeResizer
  license='xxxx'
  log="collapsed"
  src="http://anotherdomain.com/iframe.html"
  style={{ width: '100%',  height: '100vh' }}
/>
```

--------------------------------

### Install @iframe-resizer/parent package

Source: https://iframe-resizer.com/setup

Install the parent page package via npm, pnpm, Yarn, or jsDelivr CDN. Choose one method; the CDN script should be placed in your HTML head or body.

```shell
npm install @iframe-resizer/parent --save

```

```shell
pnpm add @iframe-resizer/parent

```

```shell
yarn add @iframe-resizer/parent

```

```html
<script src="https://cdn.jsdelivr.net/npm/@iframe-resizer/parent@5.5.9"></script>

```

--------------------------------

### Create iframe and load iframe-resizer parent script

Source: https://iframe-resizer.com/setup/third_party

Creates a self-contained setup script that builds an iframe linking to your content and loads the iframe-resizer parent library. Place the script on your server; minify it with Terser or UglifyJS before sharing.

```JavaScript
; (function () {
  // URL of the site where the iframe content is hosted
  const site = "https://your-domain.com"


  // Path to the iframe content
  const path = "iframe-content.html"


  // Path to the iframe-resizer parent script
  const parentScript = "node_modules/@iframe-resizer/parent/index.umd.min.js"


  // Options for iframe-resizer
  const options = {
    log: "collapsed",
  }


  // iframe configuration
  const width = "100%"
  const height = "100vh"


  // Create the iframe
  const iframe = document.createElement("iframe")
  iframe.src = `${site}/${path}`
  iframe.style.width = width
  iframe.style.height = height


  // Load iframe-resizer parent script
  const script = document.createElement("script")
  script.src = `${site}/${parentScript}`
  script.async = true
  script.fetchPriority = "high"
  script.onload = () => iframeResize(options, iframe)
  script.onerror = function () {
    console.error("Failed to load iframe-resizer library.")
  }


  // Insert iframe and script files after this script
  document.currentScript.replaceWith(iframe, script)
})()

```

--------------------------------

### Install @iframe-resizer/child with npm, pnpm, Yarn, or jsDelivr

Source: https://iframe-resizer.com/setup/child

Install the @iframe-resizer/child package using npm, pnpm, Yarn, or the jsDelivr CDN. The CDN script tag loads version 5.5.9 directly from the CDN.

```bash
npm install @iframe-resizer/child --save
```

```bash
pnpm add @iframe-resizer/child
```

```bash
yarn add @iframe-resizer/child
```

```html
<script src="https://cdn.jsdelivr.net/npm/@iframe-resizer/child@5.5.9"></script>
```

--------------------------------

### onReady event callback

Source: https://iframe-resizer.com/api/parent

Callback event for the parent page called after initial setup.

```typescript
onReady: (iframe) => void

```

--------------------------------

### Typical setup with IframeResizer component

Source: https://iframe-resizer.com/frameworks/vue3

A complete Vue 3 setup with script, template, and scoped styles. Configures the iframe to resize with the browser window and content changes by setting width to 100% and height to 100vh. Includes a license, log option, and on-ready event handler.

```html
<script setup>
  import IframeResizer from '@iframe-resizer/vue/sfc'
</script>


<template>
  <IframeResizer
    license='xxxx'
    log="collapsed"
    src="http://anotherdomain.com/iframe.html"
    @on-ready="() => console.log('onReady')"
  />
</template>


<style scoped>
  iframe {
    width: 100%;
    height: 100vh;
  }
</style>
```

--------------------------------

### Share setup script with third parties

Source: https://iframe-resizer.com/third_party/share

External client websites include this script tag at the location they wish to place the iframe. It creates the iframe and configures iframe-resizer on their page.

```html
<script async src="https://your-domain.com/load-iframe.js">
```

--------------------------------

### Share setup script to third parties

Source: https://iframe-resizer.com/setup/third_party

External clients include this script tag on their page at the location where they want the iframe to appear. Loading this script creates the iframe and configures iframe-resizer.

```HTML
<script async src="https://your-domain.com/load-iframe.js"></script>
```

--------------------------------

### Accessing methods via forwardRef

Source: https://iframe-resizer.com/frameworks/react

Shows how to pass a forwardRef to access methods like getElement(). The example logs the iframe element on each render.

```jsx
import React, { useRef, useEffect } from 'react'
import IframeResizer from '@iframe-resizer/react'


export default () => {
  const iframeRef = useRef(null)


  useEffect(() => {
    console.log(iframeRef?.getElement())
  })


  return (
    <IframeResizer forwardRef={iframeRef} />
  )
```

--------------------------------

### Create a setup script to load iframe-resizer child

Source: https://iframe-resizer.com/third_party/include

This JavaScript snippet creates an iframe pointing to your site and loads the iframe-resizer child script. It sets the targetOrigin option and handles script loading errors. Recommended to minify with Terser or UglifyJS.

```javascript
; (function () {
  // URL of your site
  const yourSite = 'https://your-domain.com'


  // Path to the iframe-resizer child script
  const childScript = 'node_modules/@iframe-resizer/child/index.umd.min.js'


  // Options for iframe-resizer  (See Child Page API for more details)
  window.iframeResizer = {
    targetOrigin: yourSite,
  }


  // Load iframe-resizer child script
  const script = document.createElement('script')
  script.src = `${yourSite}/${childScript}`
  script.async = true
  script.fetchPriority = 'high'
  script.onerror = function () {
    console.error('Failed to load iframe-resizer library')
  }


  // Insert iframe-resizer child after this script
  document.currentScript.replaceWith(script)
})()
```

--------------------------------

### Parent page setup with jQuery iframe-resizer

Source: https://iframe-resizer.com/guides/wordpress

Sets up the parent page using the jQuery version of iframe-resizer. Includes CSS, an iframe with id 'myIframe', and the initialization call. Requires jQuery to be loaded. Replace 'xxxx' with your license key.

```html
<style>
  iframe {
    width: 100%;
    height: 100vh;
  }
</style>


<iframe id="myIframe" src="http://anotherdomain.com/iframe.html"></iframe>


<script src="/wp-admin/js/iframe-resizer.jquery.js"></script>
<script>
  $('#myIframe').iframeResize({
    license: 'xxxx',
    log: 'collapsed',
  });
</script>
```

--------------------------------

### Initialize iframe-resizer with GPLv3 license key

Source: https://iframe-resizer.com/gpl

Use the license key 'GPLv3' to accept the GPLv3 terms for open source projects. This key is passed to the iframeResize function.

```javascript
iframeResize({ license: "GPLv3" });
```

--------------------------------

### Example of iframe with and without title attribute

Source: https://iframe-resizer.com/accessibility

Shows an iframe without a title attribute and the same iframe with a title attribute set to 'Example Content'. iframe-resizer automatically adds the title attribute when missing, using the content's <title> element.

```html
<!-- Without title -->
<iframe src="example.html"></iframe>


<!-- With title -->
<iframe src="example.html" title="Example Content"></iframe>
```

--------------------------------

### license type

Source: https://iframe-resizer.com/api/child

Shows the type for the license setting. Enter the commercial license key or set to 'GPLv3' for open-source use under GNU GPL v3.

```text
type:    string
```

--------------------------------

### HTML doctype for Standards Mode

Source: https://iframe-resizer.com/troubleshooting

Ensure the iframed page starts with this doctype to run in Standards Mode, avoiding Quirks Mode which can prevent iframe-resizer from detecting page size changes.

```html
<!doctype html>
```

--------------------------------

### onScroll callback with scroll offset

Source: https://iframe-resizer.com/api/parent

Example showing how to adjust the scroll point in the onScroll callback, useful for sticky headers. It adds a scroll offset and returns false to stop iframe-resizer from scrolling the page.

```javascript
const SCROLL_OFFSET = 50


iframeResize({
  onScroll: ({ top, left }) {
    window.scrollTo({
      top: top + SCROLL_OFFSET,
      left,
      behavior: 'auto'
    })


    return false // Stop iframe-resizer scrolling the page
  }
})

```

--------------------------------

### Child page script include for iframe-resizer

Source: https://iframe-resizer.com/guides/wordpress

Add this script tag to every page shown in the iframe to enable communication with the parent page. The child script is self-contained, has no dependencies, and only starts after receiving a message from the parent.

```html
<script src="/wp-admin/js/iframe-resizer.child.js"></script>
```

--------------------------------

### Set GPLv3 license option

Source: https://iframe-resizer.com/setup

Set the license option to 'GPLv3' to confirm your project is compatible with the GPL open source license. Available for non-commercial open source projects.

```javascript
iframeResize({ license: 'GPLv3' })

```
Tokens:
Raw