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

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

如果在存在标识为my_iframe的元素之前执行它将失败，如果存在，则会失败。

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

如果定义一个函数并在id为src的元素存在之后执行它，它将返回一个元素对象，并且你的代码运行正常（假设元素对象允许my_iframe属性的诅咒设定）。

Answer 2

当DOM准备就绪时，您需要执行此代码。

window.onload=function(){
  loadnew()
}

Answer 3

执行浏览器解析器¹时遇到的Javascript代码。这意味着如果您查询<SCRIPT>标记下面的元素，它将找不到它，因为它下面的元素尚未被执行创建。

但是，由于您将代码放在函数中，因此执行的是函数的创建，而不是函数内部的代码。因此它适用于您提供的案例（因为您没有调用该函数）。

如果您需要更多说明，我可以提供更多详细信息和示例。

[1]请注意，某些浏览器可能在与HTML呈现器不同的单独线程中执行Javascript，但它仍然会在遇到时执行。

Answer 4

听起来你把脚本放在身体里。如果将它放在正文中，则可以将所有功能提供给浏览器供应商。

每个浏览器都会处理体内脚本的执行略有不同。大多数将按照解析的顺序运行它。发生这种情况的确切时间会有所不同，从而导致其他浏览器出现不同的行为。

<强>解释：

换句话说，如果未包含在函数中的全局范围代码放在上面尚未呈现的DOM元素，那么该代码将导致错误，因为有问题的对象未定义。

当代码低于元素时，浏览器通常有时间在代码运行之前呈现DOM元素。

看到JavaScript遍布HTML文档，这简直太乱了。它造成了维护噩梦。只要问这个海报谁花了他一整天解开纠结的JavaScript和HTML来找到代码中的一个讨厌的错误：Debugging HTML & JavaScript with Firebug

假设您对HTML进行了调整并在页面上移动元素。想象一下你需要改变的所有JavaScript。

<强>解决方案：

要防止此问题成为问题，请将您的脚本放在它所属的位置，在头部中链接的外部JavaScript文件中作为脚本标记。在DOM完全加载之前，脚本不会运行，防止与尚未在范围内的元素相关的错误，并且消除了担心文件加载顺序的细节。

Answer 5

在第一个示例中，代码在构建DOM树之前执行。 'my_iframe'尚不存在。如果将它放在元素下面，则构建DOM树并且您的元素存在。通过创建一个函数（并在以后调用它），您推迟执行代码，直到构建了DOM树。

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

5 个答案: