插件 jQuery.Iframe Resizer 中文API文档

插件 jQuery.Iframe Resizer 中文API文档 https://github.com/davidjbradshaw/iframe-resizer

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

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

Getting Started

Install

该软件包可以通过NPM (npm install iframe-resizer --save).

Usage

The package contains two minified JavaScript files in the js folder. The first (iframeResizer.min.js) is for the page hosting the iFrames. It can be called with via JavaScript:

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

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

Typical setup

正常配置是在浏览器窗口更改大小或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>

Note: 使用min-width设置iFrame的宽度，可以解决iOS中可能阻止iFrame正确调整大小的问题.

Example

To see this working take a look at this example and watch the console.

API Documentation

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

• 父页面API
  • Options
  • Events
  • Methods
• IFramed Page API
  • Options
  • Events
  • Methods
• 与jQuery一起使用
• Troubleshooting
• Upgrade from version 3
• Version history