window.openで空のwindowを開きつつ、開いたwindowのdocument.bodyにDOMをappendChildする 🪟

window.openで空のwindowを開き、開いた側のJavaScriptから開かれた側のHTMLの構造を変更する方法として、document.bodyにDOMをappendChildする方法があります。

ソースコード

index.js

document.querySelector('button').addEventListener('click', () => {
  const newWindow = window.open(); // windowオブジェクトを変数に入れる
  const p = document.createElement('p');

  p.innerText = 'Ya-Ha-!';

  newWindow.document.body.appendChild(p); // windowのdocument.bodyにDOMを追加
});

DEMO

開かれた側のwindowに「Ya-Ha-!」と表示されます。
ただし、一時的な処理なので、開かれた側のwindowをリロードすると消えます。

また、scriptタグを追加することもできます。

ソースコード

index.js

document.querySelector('button').addEventListener('click', () => {
  const newWindow = window.open(); // windowオブジェクトを変数に入れる
  const script = document.createElement('script');

  script.innerText = 'alert("Ya-Ha-!");';

  newWindow.document.body.appendChild(script); // windowのdocument.bodyにDOMを追加
});