# @civic/iframe-resizer 中文文档

规范地址：https://npmcn.com/package/%40civic/iframe-resizer/

版本：0\.1\.2
npm 元数据更新时间：2026-10-30T07:49:27.023Z
中文译文更新时间：2026-11-09T22:29:06.782Z
软件包许可：未声明

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40civic/iframe-resizer
原文对照：https://npmcn.com/package/%40civic/iframe-resizer/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：92 kB，14 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react \>=18
- 首次发布：2025-04-02T12:48:39.815Z
- 最新版本发布：2025-04-04T07:17:56.187Z
- 近 30 天下载量：4546（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：3（近 12 个月 0 个）

## 中文简介

用于 Civil Auth 的自定义新框架

## 安装

```sh
npm install @civic/iframe-resizer
```

也可以使用：`pnpm add @civic/iframe-resizer`、`yarn add @civic/iframe-resizer`、`bun add @civic/iframe-resizer`

## README

# 公民框架

用于 Civil Auth 应用程序的轻量级、高效的iframe 重塑功能.

## 概览

Civil Iframe Resizer是一个分为两部分的系统:

1.  **父组件**: 反应组件( )`IframeResizer`)将标准iframe包裹起来,并听取更改大小的消息
2.  **儿童脚本**: 在 Iframe 内容内运行以测量和报告大小变化的脚本

## 父组件使用

```tsx
import { IframeResizer } from "@civic/iframe-resizer";

function MyComponent() {
  return (
    <IframeResizer 
      src="https://example.com/content"
      initialHeight="100px"
      animate={true}
      animationDuration={250}
      onResizeHeight={(height) => console.log(`Iframe height changed to ${height}px`)}
      checkOrigin={false}
      allowedOrigins={["https://example.com"]}
      // Additional standard iframe props
      id="my-iframe"
      title="Content Frame"
      allow="camera"
      allowFullScreen={true}
      style={{ borderRadius: '8px' }}
    />
  );
}
```

## 儿童脚本集成

为了实现再大小化,iframe中装入的内容必须包括子脚本.

### 方法 1: 通过脚本标记包含

在您的 Iframe 内容的 HTML 中添加以下脚本标签 :

```html
<script src="https://your-cdn-or-path/iframe-resizer.child.js"></script>
```

### 方法 2: 在 JavaScript 中导入

```js
import iframeResizerChild from "@civic/iframe-resizer/child";

// The script auto-initializes, but you can call init() explicitly if needed
iframeResizerChild.init();

// For advanced usage, you can create a custom instance with options
import { IframeResizerChild } from "@civic/iframe-resizer/child";

const myResizer = new IframeResizerChild({
  targetElement: document.getElementById('content'),
  checkInterval: 300,
  debounceDelay: 100,
  debug: true
});

myResizer.init();
```

## 如何运作

1.  儿童脚本测量内容的高度( 默认: 文档. body)
2.  当发现大小变化时, 孩子会向父母发送信件
3.  父收到信件并相应调整 Iframe 高度

儿童脚本使用多种检测方法实现最大可靠性:

-   更改观察员大小( 现代浏览器)
-   变异观察员(DOM更改)
-   窗口调整事件大小
-   定期间隔投票(倒计时)

## 选项

### 父组件道具

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| 首发高度 | 字符串 | "100px" (英语) | 更改信件大小前的初始高度 |
| 动画 | 布尔 | 真实 | 是否动画高度变化 |
| 动画期限 | 编号 | 250号 | 动画持续时间( ms) |
| 恢复高音 | 函数 | 未定义 | 高度变化时召回 |
| 检查奥里金 | 布尔弦 \[\] | 虚假 | 是否检查信件来源 |
| 允许的Origins | 字符串 \[\] | \[ | 如果检查Origin属实, 允许来源 |
| \+ 标准iframe道具 | \- 说吧 | \- 说吧 | src, id, 标题等. |

### 儿童脚本选项

| 选项 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| 目标元素 | HTML 元素 | 文档 | 测量高度的元素 |
| 检查Interval | 编号 | 200个 | 投票高度变化间隔(毫秒) |
| 跳出延迟 | 编号 | 第50条 | 取消更改事件大小的延迟( ms) |
| 调试 | 布尔 | 虚假 | 启用调试日志 |

## 解决问题

如果iframe 不正确调整大小 :

1.  检查是否正在装入 iframe 内容中的孩子脚本
2.  确保没有内容安全政策问题阻碍消息传递
3.  尝试设置 `debug: true` 在儿童选项中查看详细的日志
4.  检查是否检测出高度变化( 检查任何 CSS 问题)

## 常见问题

### @civic/iframe-resizer 是什么？

用于 Civil Auth 的自定义新框架

### 如何安装 @civic/iframe-resizer？

在项目目录运行 npm install @civic/iframe-resizer，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\>=18）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @civic/iframe-resizer 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @civic/iframe-resizer 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @civic/iframe-resizer 可以商用吗？

@civic/iframe-resizer 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @civic/iframe-resizer 的下载量有多少？

根据 npm 官方下载统计，@civic/iframe-resizer 在 2026/10/10 – 2026/11/08 这 30 天内被下载 4,546 次，日均约 152 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @civic/iframe-resizer 还在维护吗？

最新版本 0\.1\.2 发布于 2025/04/04（1\.6 年前）；至今共发布 3 个版本，其中过去 12 个月发布了 0 个；首次发布于 2025/04/02。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。