JSFiddle - React, Tailwind, and code Playground

by Weston Ruter

HTML

<marquee>Hello World</marquee>

<input id=test>
    
<button id="move" type="button">Move to window</button>

<button id="increment" type="button">Update test input</button>

JavaScript

document.getElementById('test').value = 'fooood';

var incrementBtn = document.querySelector('#increment');

document.querySelector('#move').onclick = function () {
    var win = window.open( 'about:blank', 'documentmoved', 'width=400,height=400' );
    var idocument = win.document;
    var root = document.documentElement;
    this.parentNode.removeChild( this ); // remove Move button
    idocument.adoptNode( root );
    idocument.replaceChild( root, idocument.documentElement );
    
    document.open();
    document.write('<p>I am replacing the document which is now in the other window!</p>');
    document.close();
};
incrementBtn.onclick = function () {
    this.ownerDocument.querySelector( '#test' ).value = new Date().valueOf();
};

// Problem: any timers in the source window will keep running :-(
// Problem: Any JS in the original document that refers to document needs to be changed to refer to this.ownerDocument since the closure is keeping the original document reference.