後から document.write するなら close 必要だった
- カテゴリ:
- JavaScript
- コメント数:
- Comments: 0
◆ close しないとずっと readyState が loading
◆ loading のままだと省略した body とかの HTML 補完が行われない
◆ module の実行も開始されない
◆ loading のままだと省略した body とかの HTML 補完が行われない
◆ module の実行も開始されない
前に HTML 本文中の HTML コードを簡単にプレビューしたくてプレビューボタンでプレビューページを開けるようにしました
トップフレームの Data URL は Chrome が使えなくしたので Blob か about:blank+document.write になって 楽にできる about:blank+document.write にしました
ただ一部のコードがうまく動きません
これが 1 だけ表示されて 2 が表示されません
iframe でも一緒です
それどころか load イベントが起きません
そういえば document って普段 write しか使わないけど正確には
の 3 つがあります
close すれば loading 終わるかなと試してみると
無事動きました
トップフレームの 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
無事動きました