【问题标题】：Is it bad to have script tag inside div?在 div 中包含 script 标签是不是很糟糕？
【发布时间】：2012-10-16 01:04:28
【问题描述】：

在body里面的div里面有一个script标签有什么不好的？

我正在动态更新 div 以在 div 中重新加载 javascript 代码。有什么需要担心的问题吗？

编辑

@Bergi 坚持要查看代码。在这里（见下文）。这个div（连同其他包含演示HTML 元素的div(s)）通过AJAX 更新。 div 内的 script 包含映射，用于处理页面上新加载的 HTML 元素以及原始数据。

        <div>
            <script type="text/javascript">
                var namesMap = <dynamic string from server here>;
                var addressesMap = <dynamic string from server here>;
            </script>
        </div>

【问题讨论】：

您为什么要这样做？如果您希望此脚本在加载 div 后立即运行，您可以将其附加到其加载事件。如果您正在动态更新 div（这表明 DOM 已经加载），将脚本放在 div 中与将其放在任何地方具有相同的效果，在这种情况下，最好将其附加到正文中。
"更新 div 以重新加载 javascript 代码" 听起来像是不好的做法，是的。一般来说，正文中的<script>标签没什么好担心的，而且往往有充分的理由。请向我们展示您实际操作的代码。
@Bergi：在重新加载的 JS 代码中，我正在使用来自服务器的动态数据初始化一些地图和其他对象，以处理在此 AJAX 请求中加载的页面上的一些原始数据。
@Bergi：这个用例有意义吗？
Show我们请提供代码，我真的无法理解。但是，听起来您应该使用 Ajax 而不是（动态？）脚本注入

标签： javascript html

【解决方案1】：

可以将<script> 标签放在文档正文的任何位置。

来自here，

SCRIPT 元素将脚本放置在文档中。这个元素可以在 HTML 文档的 HEAD 或 BODY 中出现任意次数。

但是，每当出现<script> 标记时，它就会暂停对代码的解析，直到脚本被加载并执行。

【讨论】：

将

【解决方案2】：

您可以在 DIV 标记中添加<script></script>。只需检查 w3c，它是有效的 HTML。

【讨论】：

【解决方案3】：

这没什么不好。大多数小部件都以这种方式工作。它仍然是有效的 HTML。

如果您想在网页中嵌入 AdSense 单元，则需要这样做。亚马逊小部件也是如此。这意味着大多数网站在 div 中都有一个 script 标签。

【讨论】：

【解决方案4】：

将脚本放入 html 有利有弊。好处是可以将一个小脚本放置在使用它的位置附近，这样您就可以更轻松地了解页面在做什么。

如果没有其他人需要那个脚本，那么我认为可以把它放在那里。

不好的是，当您将程序的各个部分划分为多个位置时，查看和管理这些部分如何相互作用和相互干扰会变得更加困难。然而，如果您将 html 和 javascript 保存在单独的文件中，则更容易独立理解它们，然后最终关注它们如何相互交互。它们之间的“接口”是什么。

如果 JavaScript 散布在 html 中，那么您不能将脚本代码与组织 HTML 分开。

还有一点需要注意：如果您有一个 DIV，您可能会认为您可以通过重新分配其 innerHTML 来操纵其内容。这很有效，但您不能以这种方式将脚本注入 DIV。见：

Can scripts be inserted with innerHTML?

因此，在 DIV 中包含脚本的一个坏处是，您无法通过重新分配其 innerHTML 来替换此类脚本。

【讨论】：

【解决方案5】：

<DIV> 中的脚本仍在工作。但是您的布局有些烦人-滚动时会晃动。最佳解决方案：将脚本放入 <body> 或 <head> ：D

【讨论】：

【解决方案6】：

尝试将<script></script> 标记放在<head></head> 中始终是一个好习惯。然而，最近出现了争论是否将标签放在<body></body>标签的末尾，就在之前使页面更快。

我建议将您的 <script></script> 放在 HTML 文档的 <head></head> 部分，因为它更受欢迎。此外，将 <script></script> 放在 DIV 中并不是一个好习惯。

您可以发布您的示例以获得关于组织文档结构的更好答案。

总而言之，你所做的没有问题。但我建议采用更有条理的方式。

【讨论】：

您需要使用&lt; 转义标签或用反引号(`) 将它们包围作为代码sn-ps
在 div 中包含带有 ID 的脚本将使我们能够在需要更改脚本时对其进行更改。例如，Google Analytic 和 AdSense 脚本每年都会发生变化。如果我们把一个网站的所有页面都放在正文的开头或结尾，那会有些麻烦，特别是如果有些页面是手动更改的，有些页面需要自动更改。将脚本放在 div 中可以更轻松地自动查找 DIV 的 ID 并替换整个站点的脚本。