35411


SPAでページ遷移時に動的に挿入されるDOMElementに対して`$(DOMElement).on('load',func)`のような、特定のDOMのロード時に処理を行うにはどうすれば良いでしょうか。

例えば、  
<http://example.xxx/hoge> ページにある  
<http://example.xxx/fuga> のリンクをクリックすると/fugaに遷移し、  
遷移時に挿入された`<div id="piyo"></div>`という要素のロード時に処理を行いたいです。

chromeの拡張機能で処理を行う制限があります。jQueryを使用しなくても良いです。  
よろしくお願いします。


CC BY-SA 3.0
2017-02-06T13:57:47.573
32430
2020-03-18T01:46:56.920
2020-03-18T01:46:56.920
19110
20534
question
javascript jquery single-page-application
SPAで動的に挿入されるDOMに対する$(DOMElement).on('load',...)


pushStateを利用しているSPAなら、popstateイベントを監視することで遷移が分かります。


CC BY-SA 3.0
2017-04-27T14:05:36.770
34330
2017-04-27T14:05:36.770
5721
32430
answer


MutationObserverを使うとどうでしょうか。  
DOMの変更を監視できるので、対象のDOM要素がロードされる =
document.getElementById()で取得できるという風に考えると、目的を達成できるかと。

[code]

    var observer = new MutationObserver(function() {
      var elm = document.getElementById("piyo");
      if (elm) {
        // 対象の要素が読み込まれたので、ここで好きなことを行う
        // これ以上監視を続けない場合は、observer.disconnect()する
      }
    });
    
    observer.observe(document, {childList: true, subtree: true});
    
[/code]

詳しくはドキュメントなどを参照すると良いでしょう。  
<https://developer.mozilla.org/ja/docs/Web/API/MutationObserver>


CC BY-SA 3.0
2017-06-08T15:09:39.827
35411
2017-06-08T15:09:39.827
7655
32430
answer