公民框架
用于 Civil Auth 应用程序的轻量级、高效的iframe 重塑功能.
概览
Civil Iframe Resizer是一个分为两部分的系统:
- 父组件: 反应组件( )
IframeResizer)将标准iframe包裹起来,并听取更改大小的消息 - 儿童脚本: 在 Iframe 内容内运行以测量和报告大小变化的脚本
父组件使用
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 中添加以下脚本标签 :
<script src="https://your-cdn-or-path/iframe-resizer.child.js"></script>
方法 2: 在 JavaScript 中导入
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();
如何运作
- 儿童脚本测量内容的高度( 默认: 文档. body)
- 当发现大小变化时, 孩子会向父母发送信件
- 父收到信件并相应调整 Iframe 高度
儿童脚本使用多种检测方法实现最大可靠性:
- 更改观察员大小( 现代浏览器)
- 变异观察员(DOM更改)
- 窗口调整事件大小
- 定期间隔投票(倒计时)
选项
父组件道具
| Prop | 类型 | 默认 | 说明 |
|---|---|---|---|
| 首发高度 | 字符串 | "100px" (英语) | 更改信件大小前的初始高度 |
| 动画 | 布尔 | 真实 | 是否动画高度变化 |
| 动画期限 | 编号 | 250号 | 动画持续时间( ms) |
| 恢复高音 | 函数 | 未定义 | 高度变化时召回 |
| 检查奥里金 | 布尔弦 [] | 虚假 | 是否检查信件来源 |
| 允许的Origins | 字符串 [] | [ | 如果检查Origin属实, 允许来源 |
| + 标准iframe道具 | - 说吧 | - 说吧 | src, id, 标题等. |
儿童脚本选项
| 选项 | 类型 | 默认 | 说明 |
|---|---|---|---|
| 目标元素 | HTML 元素 | 文档 | 测量高度的元素 |
| 检查Interval | 编号 | 200个 | 投票高度变化间隔(毫秒) |
| 跳出延迟 | 编号 | 第50条 | 取消更改事件大小的延迟( ms) |
| 调试 | 布尔 | 虚假 | 启用调试日志 |
解决问题
如果iframe 不正确调整大小 :
- 检查是否正在装入 iframe 内容中的孩子脚本
- 确保没有内容安全政策问题阻碍消息传递
- 尝试设置
debug: true在儿童选项中查看详细的日志 - 检查是否检测出高度变化( 检查任何 CSS 问题)