iframeのsrcをscript内に記述する方法について

Question

iframeのsrcを、直接じゃなくJavaScriptに記述したいと思います。

<script>
document.getElementById("ifr").src="test.htm";
</script>

<iframe src="" id="ifr" width="300" height="300"></iframe>

とすれば、test.htmがiframeに表示されると思うのですが、表示されません。
どのように記述すれば、表示されるようになるのでしょうか？

Answer 1

どちらを先に書きましたか？下記のようにすればたぶん動くと思います。

<iframe src="" id="ifr" width="300" height="300"></iframe>
<script>
document.getElementById("ifr").src="https://teratail.com/questions/41623";
</script>

Comments

[raguel]

ありがとうございます。
出来ました。
scriptは、head内、iframeはbody内に書いてました。
scriptはiframeの後ろに記述しなければならなかったんですね。
勉強になりました。

[kei344]

プログラムは先頭から順番に評価されていくので、先に書いた場合は `ifr` がまだ無い（作られていない）ということになります。

先頭に書く場合は load などのイベントに紐付けて処理します。
window.addEventListener(‘load’, function(){
document.getElementById("ifr").src="https://teratail.com/questions/41623";
}, false);

【onload - 読み込み完了時に発火する】
https://syncer.jp/javascript-reference/event-handler/onload