iFrame Resizer V4

该库支持自动调整同域和跨域 iFrame 的高度和宽度以适应其包含的内容。它提供了一系列功能来解决使用 iFrame 时最常见的问题，其中包括：

• 将 iFrame 的高度和宽度调整为内容大小。
• 适用于多个嵌套的 iFrame。
• 跨域 iFrame 的域身份验证。
• 提供一系列页面大小计算方法来支持复杂的 CSS 布局。
• 使用MutationObserver检测可能导致页面调整大小的 DOM 更改。
• 检测可能导致页面调整大小的事件（窗口调整大小、CSS 动画和过渡、方向更改和鼠标事件）。
• 通过postMessage简化 iFrame 和主机页面之间的消息传递。
• 修复 iFrame 中的页面链接并支持 iFrame 和父页面之间的链接。
• 提供自定义大小和滚动方法。
• 将父位置和视口大小暴露给 iFrame。
• 为 iFrame提供onMouseEnter和onMouseLeave事件。
• 与ViewerJS配合使用以支持 PDF 和 ODF 文档。
• 支持 IE 11（V3 支持回 IE8）

捐

iframe-resizer 是数百小时工作的成果，如果你想和其他人一起支持这个项目的持续发展，那么请随时给我买杯咖啡。

入门

安装

这个包可以通过 NPM ( npm install iframe-resizer --save)安装。

用法

该包在js文件夹中包含两个缩小的 JavaScript 文件。第一个 ( iframeResizer.min.js ) 用于托管 iFrame 的页面。它可以通过 JavaScript 调用：

const iframes = iFrameResize( [{options}], [css selector] || [iframe] );

第二个文件 ( iframeResizer.contentWindow.min.js ) 需要放置在 iFrame 中包含的页面中。此文件被设计为其他人系统上的访客，因此没有任何依赖性，并且在被包含页面的消息激活之前不会执行任何操作。

典型设置

正常的配置是在浏览器窗口改变大小或 iFrame 的内容改变时让 iFrame 调整大小。要进行设置，您需要将 iFrame 的一个维度配置为百分比，并告诉库仅更新另一个维度。通常，您会将宽度设置为 100%，并设置高度以适应内容。

<style>
  iframe {
    width: 1px;
    min-width: 100%;
  }
</style>
<iframe id="myIframe" src="http://anotherdomain.com/iframe.html"></iframe>
<script>
  iFrameResize({ log: true }, '#myIframe')
</script>

注意：使用min-width设置 iFrame 的宽度，可以解决 iOS 中阻止 iFrame 正确调整大小的问题。

如果您遇到问题，请查看故障排除部分。

例子

要查看此工作，请查看此示例并查看控制台。

API 文档

IFrame-Resizer 为父页面和 iframe 页面提供了广泛的选项和 API。

• 父页面 API
  • 选项
  • 活动
  • 方法
• IFramed 页面 API
  • 选项
  • 活动
  • 方法
• 与库和框架一起使用
  • 反应
  • 视图
  • 角
  • 余烬
  • jQuery
  • Google Apps 脚本
• 故障排除
• 从版本 3 升级
• 版本历史

执照

版权所有 © 2013-21 David J. Bradshaw – 在MIT许可下获得许可