davidjbradshaw / iframe-resizer

The library allows automatic resizing of height and width of both same and cross domain iFrames to fit their contained content.This libraryは、コンテンツに合わせて、同一の iFrame およびクロスドメインの iFrame の縦横のサイズを自動的に調整することができます。 iFrame を使用する際の最も一般的な問題に対処するためのさまざまな機能を提供します。

• iFrame の高さと幅をコンテンツ サイズにリサイズ。
• 複数の iFrame および入れ子になった iFrame で動作。
• MutationObserver を使用して、ページのサイズを変更する原因となる DOM への変更を検出します。
• ページのサイズを変更する原因となるイベント (Window Resize、CSS Animation と Transition、Orientation Change および Mouse イベント) を検出します。
• iFrame と postMessage を介したホスト ページ間の簡略化されたメッセージング。
• iFrame のページ リンクで修正し、iFrame と親ページ間のリンクをサポートします。
• カスタム サイズ調整およびスクロール方法を提供。
• 親の位置とビューポート サイズを iFrame に公開。
• iFrame 用に onMouseEnter および onMouseLeave イベントを提供。
• Supports IE 11 (V3 は IE8 までサポート)

Donate

Iframe-resizer は何百時間もの作業の結果であり、もしあなたが他の人と一緒にこのプロジェクトの開発継続を支援したいなら、どうぞお気軽に私にコーヒーを奢ってください。

Getting Started

Install

このパッケージは NPM (npm install iframe-resizer --save) によってインストールできます。

Usage

このパッケージには js フォルダに 2 つのミニファイリングファイルが含まれています。 最初のファイル (iframeResizer.min.js) は、iFrame をホストするページ用です。 これは、JavaScript で呼び出すことができます。

const iframes = iFrameResize( , || );

2 番目のファイル (iframeResizer.contentWindow.min.js) は、iFrame に含まれるページ (s) に配置する必要があります。 このファイルは、他の誰かのシステム上でゲストとして設計されているため、依存関係がなく、含まれているページからのメッセージによってアクティブになるまで何も行いません。 これを設定するには、iFrame の寸法の 1 つをパーセンテージで構成し、もう 1 つの寸法のみを更新するようにライブラリに指示する必要があります。

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

注意: iFrame の幅を設定するために min-width を使用すると、iFrame が正しくサイズ設定されない iOS の問題を回避できます。

例

これが動作するのを確認するには、この例を見て、コンソールを見てください。

API ドキュメント

IFrame-Resizer は親ページと iframe ページの両方に対して幅広いオプションと API を提供します。

• 親ページ API
  • Options
  • Events
  • Methods
• Iframed ページ API
  • Options
  • Events
  • Methods
• Libraries and Frameworks
  との併用
  • React
  • Vue
  • Angular
  • Ember
  • jQuery
  • Google Apps Script

  。

• トラブルシューティング
• バージョン3からのアップグレード
• バージョン履歴

ライセンス

について