Firefox だと about:blank の iframe でもロードが起きる
◆ ロードの前後で document が変わる
◆ 事前に変数に保持していると前の document を操作することになって iframe 中の画面は更新されない
◆ 事前に変数に保持していると前の document を操作することになって iframe 中の画面は更新されない
この HTML のページを開いて #btn をクリックするとどうなるでしょうか
true になるのが当たり前 と思ってました
ですが それは Chrome 系であって Firefox では false です
Firefox だとクリック時の iframedoc と frames[0].document は異なるドキュメントになります
どちらも iframe の document であることは同じなのですが iframedoc 変数に格納するタイミングではロードが完了していません
格納後にロードが完了して そのタイミングで新たな document が iframe に設定されます
このようにロードの前後で別の document になるので alert 結果は false となります
確認のために少し HTML を修正しました
#frame に対する onload のリスナ設定が追加されています
Chrome では 「load」 は表示されません
Firefox では表示されます
Firefox でも Chrome と同じように動くようにするには
として load イベント時に再度 iframedoc に格納するか iframedoc 変数を持たず 毎回 frames[0].document から取得すればなんとかなります
実際ロードするファイルとかはなく一瞬なのでロード速度はあまり気にしなくてもいいですが 同期的な処理の場合は load 前のドキュメントに対してのものとなってしまうので 非同期処理化したり 厳密にするなら onload リスナ中で処理を実行するようにします
最近あまり Firefox での確認はしてませんでしたが まだまだ違いはありますね
<!doctype html>
<iframe id="frame"></iframe>
<button id="btn">btn</button>
<script>
const iframedoc = frames[0].document
document.querySelector("#btn").onclick = eve => {
alert(iframedoc === frames[0].document)
}
</script>
true になるのが当たり前 と思ってました
ですが それは Chrome 系であって Firefox では false です
Firefox だとクリック時の iframedoc と frames[0].document は異なるドキュメントになります
どちらも iframe の document であることは同じなのですが iframedoc 変数に格納するタイミングではロードが完了していません
格納後にロードが完了して そのタイミングで新たな document が iframe に設定されます
このようにロードの前後で別の document になるので alert 結果は false となります
確認のために少し HTML を修正しました
<!doctype html>
<iframe id="frame"></iframe>
<button id="btn">btn</button>
<script>
const iframedoc = frames[0].document
document.querySelector("#frame").onload = eve => {
console.log("load")
}
document.querySelector("#btn").onclick = eve => {
alert(iframedoc === frames[0].document)
}
</script>
#frame に対する onload のリスナ設定が追加されています
Chrome では 「load」 は表示されません
Firefox では表示されます
Firefox でも Chrome と同じように動くようにするには
<!doctype html>
<iframe id="frame" src="about:blank"></iframe>
<button id="btn">btn</button>
<script>
let iframedoc = frames[0].document
document.querySelector("#frame").onload = eve => {
iframedoc = frames[0].document
}
document.querySelector("#btn").onclick = eve => {
alert(iframedoc === frames[0].document)
}
</script>
として load イベント時に再度 iframedoc に格納するか iframedoc 変数を持たず 毎回 frames[0].document から取得すればなんとかなります
実際ロードするファイルとかはなく一瞬なのでロード速度はあまり気にしなくてもいいですが 同期的な処理の場合は load 前のドキュメントに対してのものとなってしまうので 非同期処理化したり 厳密にするなら onload リスナ中で処理を実行するようにします
最近あまり Firefox での確認はしてませんでしたが まだまだ違いはありますね