◆ close しないとずっと readyState が loading
◆ loading のままだと省略した body とかの HTML 補完が行われない
◆ module の実行も開始されない

前に HTML 本文中の HTML コードを簡単にプレビューしたくてプレビューボタンでプレビューページを開けるようにしました

トップフレームの Data URL は Chrome が使えなくしたので Blob か about:blank+document.write になって 楽にできる about:blank+document.write にしました

ただ一部のコードがうまく動きません

module が動かない

単純に HTML を表示する分には問題ないのですが type="module" のスクリプトを使うとうまく動きませんでした

window.open().document.write(`
<script>console.log(1)</script>
<script type="module">console.log(2)</script>
`)

これが 1 だけ表示されて 2 が表示されません
iframe でも一緒です

const frame = document.createElement("iframe")
document.body.append(frame)
frame.contentDocument.write(`
<script>console.log(1)</script>
<script type="module">console.log(2)</script>
`)

body が省略できない

write のあとに開いたタブや iframe の document.body にアクセスすると null です
それどころか load イベントが起きません

window.open().document.write(`
<script>
console.log(document.readyState)
window.onload = () => { console.log("loaded") }
document.onreadystatechange = () => { console.log("state changed") }
</script>
`)
loading

close 必要

考えてみたら module が実行されないのも loading のままだからな気がしてきました
そういえば document って普段 write しか使わないけど正確には

document.open()
document.write(html)
document.close()

の 3 つがあります

close すれば loading 終わるかなと試してみると

const subwindow = window.open()
subwindow.document.write(`
<script>
console.log(document.readyState)
window.onload = () => { console.log("loaded") }
document.onreadystatechange = () => { console.log("state changed") }
</script>
<script type="module">console.log("module")</script>
`)
subwindow.close()
loading
state changed
state changed
module
loaded

無事動きました