Javascript - 功能 VS 无功能......这是如何工作的？

Question

如果我将以下脚本放在脚本正在搜索的元素上方，我会收到一个错误:

<script type="text/javascript">
document.getElementById('my_iframe').src = "my_file.php";
</script>

当然，为了让它再次工作，我需要将它放在元素的下方。

然而，如果我将相同的东西变成一个函数并将它放在脚本正在搜索的元素上方，它会完美地工作:

function loadnew(){
    document.getElementById('my_iframe').src = "my_file.php";
}

问题是，如果我使用一个函数，为什么它会起作用？我一直认为，为了让脚本找到它需要放置在它正在搜索的元素下方的东西？

谢谢!

Answer 1

它放在哪里并不重要，唯一重要的是它何时被执行。

如果它在有 id 为 my_iframe 的元素之前执行，它将失败，如果有，它将成功。

因此，如果您只是执行一个内联脚本标签，然后将您的一个衬里放在那里，它将立即执行，如果脚本标签恰好位于 ID 为 my_iframe 的标签之前，则不会找到任何内容- getElementById 返回 null，它不是普通对象，因此不能具有属性 src，因此您的代码失败。

如果您定义一个函数并在具有 id my_iframe 的元素存在后执行它，它将返回一个元素对象并且您的代码运行正常(诅咒假设该元素对象允许 src 要设置的属性)。