SPA が有効になっていると、Javascript コードが 2 回レンダリングされる

ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。

問題

• 次のコードは、DOM コンテンツが読み込まれるときにモーダル ウィンドウをレンダリングします。

...

if (document.readyState === 'loading'){
        document.addEventListener("DOMContentLoaded", onContentLoaded);
} else {
        onContentLoaded();
}

...

• サイトのページを移動します。
• メソッド onContentLoaded 2 回以上実行されるため、モーダル SPA もイベントDOMContentLoaded を使用してそれ自体をロードします。
• カスタムコードのロード後に Liferay SPA がロードされた場合、 Liferay SPA ロジックがこの時点で存在する要素でページを再レンダリングするため、モーダルが2回表示されます。
• これは、カスタム コードに既にマークアップが含まれ、そのイベントが登録されている場合、 Liferay SPA はそれらを削除し、それがまだ新しいナビゲーションであると見なすため、それらを再度ロードするために発生します。

Environment

• DXP 7.0+

解決策

• このような状況を防ぐために、 Liferay SPA が完全にロードされた後にカスタム コードが実行されるように調整する必要があります。 次の方法が考えられます。

if (Liferay && Liferay.SPA) {
	Liferay.on('SPAReady', function() {
                 // The custom logic
        });
}

• この例を有効にするには、ファイル portal_normal.ftlの <@liferay_util["include"] page=top_head_include />行の後にカスタム コードを配置する必要があります。 これが保証されない場合、Liferay オブジェクトが定義されていない可能性があります。