iframeに読み込み効果を追加

問題: ページに iframe が埋め込まれている場合、iframe の読み込みに遅延が発生します。つまり、iframe 要素が表示される前に、iframe に埋め込まれた親ページはしばらく空白の画面になり、ユーザーは iframe ページが読み込まれていることが認識できず、エクスペリエンス効果はあまり良くありません。

解決策: ユーザー エクスペリエンスを向上させ、現在のページが iframe を読み込んでいることをユーザーに認識させるには、iframe が読み込まれる前に読み込み効果を追加して、元の白い画面を置き換えます。スタイルは、おおよそ次の図に示すとおりです。要素 ui の「コンポーネントの読み込み」で読み込み効果を参照できます。

具体的なコードの実装: 使用されるテクノロジ スタックは vue3+composition API です。iframe の @load イベントは、iframe ページがロードされた後にトリガーされます。つまり、次の handleIframeLoad 関数です。

 <div class="iframe-wrap">
    <loading v-if="isLoading"></loading>
    <iframe
        ref="iframeRef"
        class="iframe-wrap__iframe"
        allow="clipboard-read; clipboard-write"
        :src="iframeSrc"
        @load="handleIframeLoad"
    ></iframe>
</div>

isLoading 変数を変更することで、読み込み中アイコンを表示するかどうかを制御します。変数 isLoading を初期化して true に定義します。iframe がロードされるときに、変数 isLoading を false に設定し、ページを閉じる関数で変数 isLoading を再度 true に設定します。詳細は次のとおりです。

const isLoading = ref(true);
function handleIframeLoad() {
    isLoading.value = false;
}
function close() {
    isLoading.value = true;
}