Corredor

ウェブ、プログラミングの勉強メモ。

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

3ステップでしっかり学ぶ JavaScript入門 [改訂2版]

3ステップでしっかり学ぶ JavaScript入門 [改訂2版]

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

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

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

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

See the Pen Get Plain Console by Neos21 (@Neos21) on CodePen.

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

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

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