JavaScript loadについて

Question

SPA構築されたサイトで、
window.onload=function(){}が定義されたページで新たにコンソールから
読み込みが終わった探知はできないのでしょうか？

既存のコード
window.onload=function(){alert("aaa");}

コンソールから追加した処理　発生しない　発生させる方法はあるのか？
window.onload=function(){alert("bbb");}

Comments

[maisumakun]

コンソールを触る頃にはページ全体の読み込みも終わっているかと思うのですが、何を検知したいのでしょうか？

[tyrwe]

そうなんですよね、SPAなのでいじりようがないとみていいでしょうか？

[arcxor]

addEventListener を使わずイベントハンドラープロパティに直接代入しているのは何故ですか？

window.onload に代入したものをどうにかしたいというのがよく分かりません。

[maisumakun]

> SPAなのでいじりようがないとみていいでしょうか？

そもそも、操作したいサイトは自分が管理するものなのでしょうか？そうではないのでしょうか？

[miyabi_pudding]

SPAに使用しているフレームワークなどあれば、それを提示してください。

だいたいのSPA系フレームワークでは、ライフサイクルがあり、
そのライフサイクルの中で実行される関数がわかれば、
その関数内で処理を実行するようにできるはずです。

Answer 1

document.readyState を見ればよいのではないでしょうか。

Answer 2

状況がわかりませんが、新たに追加する要素のonloadで検出すればいいのでは？

• sample.php（わざと遅延させるサンプル）

<?PHP
sleep(3);
print "content";

SPAであれば呼び出すfetchなどにロード状況を仕込む

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const url="sample.php";
  btn.addEventListener('click',e=>{
    fetch(url).then(res=>res.text()).then(txt=>{
      container.innerHTML=txt;
      console.log('loaded');
    })
  });
});
</script>
<input type="button" value="load" id="btn">
<div id="container"></div>

もしくはcontainerをMutationObserverで監視するとか

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const url="sample.php";
  const mo = new MutationObserver(n=>{
    console.log('loaded');
  });
  const opt = {
  childList:true,
  };
  mo.observe(container, opt);
  btn.addEventListener('click',e=>{
    fetch(url).then(res=>res.text()).then(txt=>{
      container.innerHTML=txt;
    })
  });
});
</script>
<input type="button" value="load" id="btn">
<div id="container"></div>

Comments

[tyrwe]

それが判別できない限り不可能ということですね

[yambejp]

＞それが判別できない限り不可能ということですね　

コメントの意味がわかりませんが、スクレイピングかなにかですか？
windowのloadイベントと非同期要素の追加読み込みでは対象が違うというだけです

[tyrwe]

SPAはscriptタグを動的にロードしてると思うのでscriptタグに仕掛ける以外に考えられる手法があるのでしょうか
というかonloadは上書きできないから無理では？

[tyrwe]

初回の読み込みが発生した時点で
window.onloadは以後効力を発揮しないと思います

[yambejp]

他人のサイトでなければ追加分をロードする処理に読み込み完了を知らせる機能をつけるだけですよね？
質問に対する情報量がすくなくて、もうすこし具体的に書かないとこれ以上の回答はぼんやりしかできず
無意味だと思います

Answer 3

イベントリスナーの追加
新たなJavaScriptコードが追加された場合に、そのコードを実行したいイベント（クリックなど）にイベントリスナーを追加します。例えば、以下のようなコードを実行することで、ボタンをクリックした時に新たに追加されたwindow.onloadコードを実行することができます。

document.querySelector('button').addEventListener('click', function() {
  window.onload = function() {
    alert('bbb');
  }
});

Comments

[tyrwe]

buttonに追加するとかではなくwindow.onloadが定義されてうえでSPA構築されたサイトで発生させたいです