onload 需要在解析时识别函数？

Question

我有这个 iframe：

 <iframe src='http://jsbin.com/iyaVOSe/1' onload='aaa()' id='ifr'/>

但只有在 iframe 之前声明函数时 onload 才有效：

工作： (http://jsbin.com/ObeQERE/3/edit)

<script>  
    window.aaa= function ()
    {
      alert('load');
       
    }
 </script>
 <iframe src='http://jsbin.com/iyaVOSe/1' onload='aaa()' id='ifr'/>

不工作：（aaa 未定义）（http://jsbin.com/ObeQERE/4/edit）

 <iframe src='http://jsbin.com/iyaVOSe/1' onload='aaa()' id='ifr'/>
<script>  
    window.aaa= function ()
    {
      alert('load');
       
    }
 </script>

这很奇怪，因为 onload 有一点延迟发生，而且 - 不使用 iframe 而使用 onclick 事件也没关系：

输入工作示例

 <input onclick='aaa()' />
      <script>  
        window.aaa= function ()
        {
          alert('load');
           
        }
       
        </script>
  
 

另外 - 在 iframe 示例中 - ：aaa 被翻译为：

即便如此——它在解析时并不需要知道aaa。 - 因为有一个包装函数。

注意：iframe 的加载事件是为了加载页面而不是创建元素。

所以 - 当它解析 iframe 时 - 它开始 异步加载 iframe - 不阻塞 ，然后立即转到声明 aaa 的脚本部分。

我错过了什么（我正在寻找一个原因 - 不是解决方案）。 ?如果我调用 onload 或 onclick 有什么区别？

看起来 iframe onload 在解析时需要该函数。 （而不是在运行时 - 事件实际发生时。）

Answer 1

iframe 元素未定义为 EMPTY。 （如果 iframe 不受支持或被禁用，则元素的内容是要呈现的内容）。因此，您不能使用 XML 空元素语法来表示 iframe。你需要一个明确的结束标签。

您正在提供您的脚本元素作为替代内容。如果 iframe 被渲染，替代内容将被忽略，因此脚本将不会被执行，并且函数将永远不会添加到 JS 环境中。

使用<iframe></iframe> 代替<iframe /> 和your non-working example is fixed。

Answer 2

元素在代码本身中按照它们的顺序呈现。脚本也是如此（使用defer 或async 指定的外部脚本除外）。因此，当iframe 被加载时，它无法立即找到aaa 的函数定义，因此在onload 的情况下不会调用aaa() 但在onclick() 的情况下script 和iframe在click 事件发生之前已经加载（因为click 是手动执行的，而load 是自动执行的）。

因此，建议将所有函数定义保留在 head 的 script 部分中，以便将来调用这些函数。