阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 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。

      目录
      目录