# iframe-height

> set iframe height

Latest version **1.0.4** (published 2023-05-25) · ISC license · 0 weekly downloads

## Install

```sh
npm install iframe-height
pnpm add iframe-height
yarn add iframe-height
bun add iframe-height
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2023-05-25 |
| First published | 2023-05-22 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 11.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | sherry.li |
| Maintainers | sherry-li-or |

## Links

- npm: https://www.npmjs.com/package/iframe-height
- npm.io page: https://npm.io/package/iframe-height

## Dependencies (1)

- [@babel/core](https://npm.io/package/@babel/core.md) ^7.21.8

## Recent versions

- 1.0.4 (latest) — 2023-05-25
- 1.0.3 — 2023-05-24
- 1.0.2 — 2023-05-22
- 1.0.1 — 2023-05-22

## README

# iframe-height

## Description

iframe-height 是一個 web component，用來自動調整 iframe 高度

## Installation

### if use yarn

```sh
yarn add iframe-height
```

### script tag

```html
<script
  type="module"
  src="https://www.unpkg.com/iframe-height@1.0.2/dist/bundle.js"
></script>
```

## Usage

### Web component Web 組件通常使用 HTML、CSS 和 JavaScript 的組合來創建，並且可以在任何 Web 頁面或 Web 應用程序中使用，而不受使用的框架或庫的影響

| 組件          | props | 說明            |
| ------------- | ----- | --------------- |
| iframe-height | src   | 傳入 iframe src |
| iframe-height | id    | 傳入 iframe id  |



```html
<iframe-height src="https://www.google.com" id="iframe"></iframe-height>
```

### 注意事項

你所嵌入的 iframe 記得 post message ，該 web component 才能正常運作


```js
window.addEventListener('load', () => {
  const message = {
    height: document.body.scrollHeight,
    width: document.body.scrollWidth,
  };
     // window.top refers to parent window
    window.top.postMessage(message, '*');
  });
 ```

---
_Source: https://npm.io/package/iframe-height · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._