読者です 読者をやめる 読者になる 読者になる

latest log

酩酊状態で書いたエンジニアポエムです。酩酊状態で読んでください。

iframe 内のページ遷移を親 window で検出する

iframe 内で発生したページ遷移を親windowで検出し、以前のページを強制的に再表示する例です。

ページ遷移そのものを抑止しているわけではなく、遷移直後にページを戻しています。

短いながらも、なかなかトリッキーなコードです。

index.html (parent window)

<html><body style="background:lime;width:100%;height:100%">
<iframe id="iframe" src="iframe.html" style="width:300px;height:300px"></iframe>

<script>
var iframe = document.querySelector("#iframe");
var src = iframe.src;

Object.defineProperty(window, "notify", {
  get: function() { // [1] parent.notify のタイミングで呼ばれる
    reload();
  }
});

function reload() {
  // コンテキストスイッチが発生したタイミングでページを戻す
  // setTimeout() が必要
  setTimeout(function() { iframe.src = src; }, 0);
}

iframe.onload = function() {
  iframe.contentWindow.onpagehide = function() { // pagehide イベントハンドラを注入
    parent.notify; // [1] を呼び出す
  };
};
</script>

</body></html>

iframe.html

<body style="background:white">
  <a href="//yahoo.co.jp">yahoo</a>
</body>

(ε・◇・)з o O ( この動画のタイトルは…
(ε・◇・)з o O ( 「子離れできない親」もしくは…
(ა✘﹏✘)ა o O ( 「イヤよ~ イヤイヤ」