iframe resizer

介绍

iframe-resizer库旨在消除使用 iframe 的痛点。它将调整您的 iframe 大小以匹配内容的大小，然后监视 iframe 以确保它始终是完美的大小。

可靠的尺寸调整

由于浏览器不提供单一一致可靠的方法来计算内容大小，因此iframe-resizer会在每次检测到更改时自动检查您的页面并为您的内容选择最佳值。

高性能

为了确保对您网站的影响最小， iframe-resizer进行了高度优化，并利用集合理论来确保它只检查影响 iframe 大小的页面元素。

即使在最复杂的页面上， iframe-resizer也可以检测 HTML 和 CSS 的更改，计算修改后的内容尺寸并在亚毫秒时间内更新 iframe。

跨域

通过一个简单的 JS 文件支持内部（同域）和外部（跨域）iframe，该文件被设计为对托管它的网站的零影响来宾。

扩展API

此外， iframe-resizer还提供了一系列缺失的浏览器 API 功能，使您可以将 iframe 内容与父页面安全地集成。

• 相对于 iframe 或父页面的位置滚动页面
• 获取iframe的位置、滚动位置和父页面视口的详细信息
• 修复了 iframe 中的页面链接并允许链接传播到父页面
• 将onMouseEnter和onMouseLeave事件添加到 iframe 元素
• 简化 iframe 和父页面之间的消息传递
• 自动域认证
• 增强的辅助功能

与viewer.js结合使用时，它甚至可以调整包含PDF和ODF文档的iframe的大小。

设置和 API 指南

请参阅iframe-resizer网站以获取设置指南和 API 文档。这包括以下版本：

• 香草JS
• 反应
• 维埃
• 角
• jQuery

以及以下设置指南：

• WordPress
• 谷歌应用脚​​本

它们也是支持创建其他自定义组件的 API。

版本5

此版本的 iframe-resizer 已被广泛重写，以使用现代浏览器 API，这在检测内容大小调整事件方面实现了显着更好的性能和更高的准确性。

在此版本中，我们有机会刷新和简化 API，如果您来自以前的版本，那么他们有一个升级指南来解释这些更改。

主要套餐

对于版本 5， iframe-resizer分为两个主要包，以便更轻松地跨不同域部署并更好地支持树摇动。这两个包可以从 NPM 安装，也可以作为 zip 文件下载。

@iframe-resizer/父级

父页面包设置一个 iframe 以自动调整内容大小。它们是这个包的几个流行库和框架的版本（见下文）。

@iframe-resizer/child

该包需要加载到 iframe 中，在初始化之前它将静静地等待来自父页面的消息。它被设计为成为其他网站上的好客人。

框架和库

除了两个主包之外，它们是适用于以下平台的父包版本。

@iframe-resizer/react

父页面的React组件。

@iframe-resizer/vue

父页面的Vue组件。

@iframe-resizer/jquery

父页面的简单jQuery包装器。

应用程序编程接口

@iframe-resizer/核心

父页面的核心 API（由@iframe-resizer/parent使用）以及框架和库组件版本。

---

版权所有 © 2013-24 David J. Bradshaw - 根据 GPL V3 许可