iframe-resizerライブラリは、iframe を使用する際の問題点を取り除くことを目的としています。コンテンツのサイズに合わせて iframe のサイズを変更し、iframe を監視して常に完璧なサイズであることを確認します。
ブラウザーにはコンテンツ サイズを計算する一貫して信頼できる単一の方法が提供されていないため、 iframe-resizer は自動的にページを検査し、何か変更が検出されるたびにコンテンツに最適な値を選択します。
サイトへの影響を最小限に抑えるために、 iframe-resizer は高度に最適化されており、集合論を利用して iframe のサイズ変更に影響を与えるページ要素のみをチェックします。
最も複雑なページであっても、 iframe-resizer はHTML と CSS の両方に対する変更を検出し、修正されたコンテンツのサイズを計算し、ミリ秒未満の時間で iframe を更新できます。
シンプルな JS ファイルを介して内部 (同一ドメイン) と外部 (クロスドメイン) の両方の iframe をサポートします。このファイルは、ホストしているサイトに影響を与えないゲストとなるように設計されています。
さらに、 iframe-resizer は、不足しているさまざまなブラウザ API 機能を提供し、iframe コンテンツを親ページと安全に統合できるようにします。
onMouseEnter
およびonMouseLeave
イベントを iframe 要素に追加しますviewer.js と組み合わせると、PDF および ODF ドキュメントを含む iframe のサイズを変更することもできます。
セットアップ ガイドと API ドキュメントについては、 iframe-resizer Web サイトを参照してください。これには、次のバージョンが含まれます。
以下のセットアップ ガイドとともに:
これらは、追加のカスタム コンポーネントの作成をサポートする API でもあります。
このバージョンの iframe-resizer は、最新のブラウザ API を使用するように大幅に書き直されました。これにより、パフォーマンスが大幅に向上し、コンテンツ サイズ変更イベントの検出精度が向上しました。
このリリースでは、API を更新して簡素化する機会が設けられています。以前のバージョンから使用している場合は、変更点を説明するアップグレード ガイドを参照してください。
バージョン 5 では、 iframe-resizerは 2 つのメイン パッケージに分割され、異なるドメイン間でのデプロイが容易になり、ツリー シェーキングのサポートが向上しました。これら 2 つのパッケージは、NPM からインストールすることも、zip ファイルとしてダウンロードすることもできます。
親ページ パッケージは、コンテンツの自動サイズ変更用に iframe を設定します。これらは、いくつかの一般的なライブラリおよびフレームワーク用のこのパッケージのバージョンです (以下を参照)。
このパッケージは iframe にロードする必要があり、初期化する前に親ページからのメッセージを静かに待ちます。他の人のサイトの良いゲストになるように設計されています。
2 つのメイン パッケージに加えて、これらは次のプラットフォーム用の親パッケージのバージョンです。
親ページのReactコンポーネント。
親ページのVueコンポーネント。
親ページの単純なjQueryラッパー。
@iframe-resizer/parent
によって使用される親ページのコア API と、フレームワークおよびライブラリ コンポーネントのバージョン。
Copyright © 2013-24 David J. Bradshaw - GPL V3 に基づいてライセンス供与