WebViewer の内部: インスタンス化、iframe、別ドメインからの読み込み

WebViewer のパッケージをダウンロードすると、主に 3 つのコンポーネントが含まれています。

webviewer.js はこのパッケージのメイン エントリ ポイントで、UI と Core の名前空間を使用して、iframe 内または Web コンポーネント内に WebViewer アプリをレンダリングします。webviewer.js をインポートした後、WebViewer.WebViewer コンストラクターを使用することで、UI と Core からなる WebViewer アプリのインスタンスを作成することができます。閲覧サンプルを見ると、iframe 内にアプリが作成されていることがわかります。

インスタンス化の詳細

インスタンス化は一文でまとめることができます。

インスタンス化 === WebViewer がオプションに基づいて iframe ラッピングされたアプリを作成

サンプル コード:

JavaScript

WebViewer({
  path: '/WebViewer/lib',
  initialDoc: 'mydoc.pdf',
}, viewerElement)
  .then(instance => {
    // API functions are now ready to be called on instance
  });

次のステップが実行されます。

1. コンストラクターは webviewer.js に UI と Core を含むライブラリ ファイルをロードする path を伝えます。
2. コンストラクターは、提供された viewerElement に UI をマウントします。
3. UI は initialDoc オプションを見て、Core から loadDocument 関数を呼び出します。
4. Core は myDoc.pdf ドキュメントを処理し、UI にレンダリングします。

WebViewer には、ビューアーを設定するための他のコンストラクター オプションもあります。

WebViewer の iframe

WebViewer の iframe は、HTML ページから分離された完全に別のウィンドウであることにご注意ください。つまり、すべての WebViewer オブジェクトと名前空間は iframe 内でのみ利用可能です。では、iframe 内のオブジェクトにアクセスして関数を呼び出したり、イベントをリッスンしたりするにはどうすればよいのでしょうか。コンストラクターのプロミスから返される instance でそれを行うことができます。

JavaScript

// Your script
WebViewer(...)
  .then(instance => {
    const { UI, Core } = instance;
    ...
  });

プロミスから返される instance 引数は、iframe のオブジェクトと名前空間、および役立つ API を含むオブジェクトです。つまり、次のことが可能となります。

• instance.Core.documentViewer.addEventListener('documentLoaded', documentLoadedHandler) を呼び出し、ドキュメントがロードされたときに関数を実行する。
• instance.Core.Annotations にアクセスし、利用可能なさまざまなアノテーション クラスを確認する。
• または instance.UI.setCurrentPageNumber(5) を呼び出して、ビューアーを 5 ページ目に移動させる。

詳しくは、ご利用ガイドまたは WebViewer クラスの API を参照してください。

別ドメインからの WebViewer の読み込み

シナリオによっては、WebViewer ライブラリ ファイルを別のドメインに配置する必要がある場合があります。これは完全に可能ですが、WebViewer iframe のソースが別のドメインを指すように変更され、これに伴い、追加の考慮事項が発生します。

詳細はこちらのガイドを参照してください。