画面の読み込みが完了したことをトリガーにjavascriptのロジックを走らせるときは、onloadや、jqueryでは$(document).readyなどが使用できる。
Single Page Application (SPA)では、画面遷移時では画面の一部のDOMが更新されるだけ(ページ全体が再読み込みされない)で、onload、raedyなどのファンクションが使用できない。
この時に、DOMの変更を監視することができる機能(MutationObserver)がある。
これを使用し、画面の内容が変わったので、このscriptを実行する のような動きを行うことができる。
こちらがオリジナル記事
MutationObserverの説明はこちら
//オブサーバーを定義
var observer = new MutationObserver(function() {
var elm = document.getElementById("監視するIDを指定");
if (elm) {
// このなかでonload、readyファンクションで行おうとしていること記載する
// これ以上監視を続けない場合は、observer.disconnect()する
}
});
//監視開始
observer.observe(document, {childList: true, subtree: true});