javascript - 元素后的 HTML 脚本标签

Question

假设我有一段带有内联 javascript 的 html，如下所示:

<div id="myDiv">
</div>

<script type="text/javascript">
    var myElement = document.getElementById("myDiv");
    if(!myElement)
        throw "Invalid";
<script>

<div /> ...and so on

所以我有一个被 div 标签包围的脚本标签，脚​​本在它之前声明的 div 上运行。

这是一种浏览器安全/HTML 标准的处理方式吗？

Answer 1

Is this a browser safe/HTML standard way of doing things?

这是安全的，是的。甚至是advocated by the Google Closure library engineers .

更标准的方法是将所有脚本放在页面的最底部，就在结束之前 </body>标签，如 advocated by the YUI folks .

在它们作用的元素之后立即放置它们会导致很多小的script标签散布在整个内容标记中，这并不是很理想(特别是在标记/内容团队和脚本团队可能完全分开的大型团队中)。

相反，将所有脚本放在最底部会导致短暂的潜力，您可以在页面上放置用户可以点击(比方说)的内容，您打算在其中处理该点击在代码中，但用户设法在代码连接点击事件处理程序之前到达那里。这是一个很小的机会之窗，但它就在那里。为了解决这个问题，您有两种选择来缓解它:

1. 渐进式增强，即使脚本没有 Hook ，点击也会做一些有用的事情，或者

2. 页面顶部的一个小内联脚本(不是单独的文件) Hook document.body 上的相关事件(假设这是一个冒泡事件)，那个小脚本要么将点击排队，然后在主代码到达时分发它们，要么(这不太好)显示“稍等一下，我们仍在加载”排序的消息。

您不做曾经是将脚本放在head 中的标准做法是完全正确的。并依靠“就绪”式事件。如果您控制脚本的去向，则完全没有必要这样做。