汚染されているグローバルオブジェクトを回避し、ピュアなグローバルオブジェクトを得る方法

いつ使うのか感があるけど…。

例えば、console.log() が独自に上書きされているページに対し、ピュアな console.log() を利用したブックマークレットを作るような場合が考えられるだろうか。

// 元々のページで window.console オブジェクトが破壊されている
console = {
  log: (text) => {
    // 独自の console.log() 的な処理…
  }
  // console.error() などもなくなってしまっている
}

このようなページで、通常の window.console を取り戻す方法だ。

• デモ : Get Plain Console
• コード : frontend-sandboxes/index.html at master · Neos21/frontend-sandboxes

仕組みは簡単で、空のインラインフレームを生成し、その中からグローバルオブジェクトを取り出せば良い。

// iframe 要素を生成し body 要素に突っ込む
const iframe = document.body.appendChild(document.createElement('iframe'));
// iframe 要素は非表示にしておく
iframe.style.display = 'none';
// 「contentWindow」配下からクリーンな console を得る
window.console = iframe.contentWindow.console;

覚えておいたら使えるかもしれない？

• 参考 : console.logが無効化されている場合に汚染されてないconsole.logを召喚する方法 - Qiita