Question

我正在研究的团队养成了在HTML页面正文中的随机位置使用<script>标记的习惯。例如：

<html>
    <head></head>
    <body>
        <div id="some-div">
            <script type="text/javascript">//some javascript here</script>
        </div>
    </body>
</html>

我之前没见过这个。它似乎适用于我测试过的少数浏览器。但据我所知，将脚本标签放在这样的地方是无效的。

我错了吗？我们在这样的div标签中放置脚本标签有多糟糕？我应该注意哪些浏览器兼容性问题？

Answer 1

完全有效。

您不希望将大量代码块混合在那里的标记中（最好使用外部脚本），但它可能对以下内容有用：

为渐进增强添加额外的绑定信息（其中数据难以适应类名或其他方法以隐藏属性中的扩展信息）;或
需要尽快启动脚本增强功能（而不是等待窗口加载/文档就绪）。这方面的一个例子就是自动对焦，如果太迟发射会刺激它。

您可能会考虑<style>中不允许的<body>元素（尽管大多数浏览器仍允许这样做）。

Answer 2

实际上，这很常见。例如，Google's analytics tracking code仅使用以下语法：

<script type="text/javascript">
  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>

如果这对谷歌来说足够好......

Answer 3

它是有效的，并且，根据您的服务器端框架和代码的性质，有时很难避免。

Answer 4

正如有几个人提到的，它是有效的，它有效，并且它被广泛使用。

就语义推荐（或至少习惯推荐）而言，最佳做法是在标题内放置脚本标记。

考虑到性能的更现代的最佳实践建议在主体标记之前的右下角放置脚本标记（外部和内联），以允许标记在任何JavaScript代码执行之前完全呈现。

为了更易于理解和维护代码，建议使用“不显眼的JavaScript”，其中代码位于外部文件中，并将事件绑定到DOM（Google不引人注目的JavaScript）。

使用JavaScript内联有用的一种情况是使用仅存在服务器端的值初始化变量，稍后将由外部JavaScript代码使用。

Answer 5

这是有效的！

您可以使用：

<script type="text/javascript">
    //<![CDATA[

    // Some JavaScript code that perfectly validates in the W3C validator

    //]]>
</script>

我认为你不能说这是不是一般的坏习惯。你必须告诉案件。但可以肯定的是，将所有JavaScript代码放在同一个地方是件好事。如果您的HTML文件中包含很少的JavaScript代码，那就太麻烦了。

Answer 6

我更喜欢将对外部脚本的引用放入头部，以及启动并初始化窗口小部件和脚本的脚本。

一个很容易遇到的问题是，正文中的脚本元素无法访问它后面的元素。此外，一个相关讨厌的浏览器兼容性问题是IE不允许脚本元素修改它们所在的元素。所以如果你有这个：

<div id="foo">
  <script type="text/javascript">
    document.getElementById("foo")... // do something to it
  </script>
</div>

IE不会喜欢你的页面。 IE的旧版本曾经为此提供非常神秘的错误消息，甚至使整个页面空白，但IE8似乎给出了描述性错误消息。

只要您确保您的脚本只访问可以安全访问的DOM，我认为将脚本元素放入正文是不礼貌的。事实上，恕我直言，把相关元素之后的小部件初始化的脚本比将所有内容放在一个地方更具可读性（我相信这也可能使它们运行得更早，这会使得当页面加载时东西跳得更少）。

Answer 7

请参阅Yahoo UI以获得最佳实践：http://developer.yahoo.com/performance/rules.html（页面底部的JavaScript）

Answer 8

但是，您也知道HTML部分所需的JavaScript代码将会存在。而不是必须在文件的顶部断言和建立一些包含。

所以，不是“如果你打算使用这个HTML，请确保导入xyz.js”，你可以只包含HTML并完成它。

所以，它不一定是可怕的邪恶。也许并不是非常棒，但也不是完全可怕的。这有点取决于意图。

Answer 9

我之前没见过这个。它似乎适用于少数浏览器我测试过了。但据我所知，放置脚本标签是无效的在这样的地方。

这是有效的，但不是一种好的（或推荐的）练习。

我错了吗？我们在div中放置脚本标签有多糟糕这样的标签？我应该有任何浏览器兼容性问题知道吗？

将<script>放在任何其他元素下是没有问题的（但它应该在<head>或<body>内。在浏览器兼容性方面也没有问题，但是，在网页上嵌入JS脚本会带来严重的缺点（如何/为什么它们被认为是坏的）：

添加页面权重
缩小困难（或可能不可能）
无法迁移或用于其他页面
无法缓存（每次加载页面时都需要下载）
不关注问题（难以维护）

Answer 10

这完全有效，但可能会损害可维护性。另请参阅 Where should I put <script> tags in HTML markup? 和 Why does the call to this jQuery function fail in Firefox? 。

Answer 11

这当然是合法的;我在几页here on Exforsys上看过它。

现在这是一个教程网站，展示了HTML和JavaScript的基础知识，因此在这种情况下，它是完全可以理解的。但是，我不希望在生产代码中看到它只是一个或两个简单的声明。如果没有看到你被// Some JavaScript code here取代的内容，我不想发表评论。

不应该有任何浏览器问题。

Answer 12

这是众多优秀实践中的一个，与提高编程方法一样，关键在于提高性能。

最终在网络开发中，让产品最重要！

Answer 13

我认为你的团队正在这样做是因为他们想要动态插入脚本，或者他们正在编写一个会在页面加载时触发的脚本。

我绝不会说在绝对必要时执行此操作有任何问题（只要它在CDATA块中），但除此之外，我建议您的团队使用像Prototype或jQuery这样的脚本库，并将脚本保持在页面外部。这通常更干净，库有时会对代码强制一些清洁，我敢打赌目前没有发生。

我也不会在内联脚本标记中运行任何耗时的函数，因为这些函数会在页面加载时发生，并且正如Jason所述，可能会减慢页面的负载。所有脚本库都有简洁的功能，允许您在加载页面时执行操作，并且可以选择在页面加载时何时触发它们，例如在加载DOM之后。

Answer 14

添加＆lt; script＆gt;是有效的在body，但Internet Explorer真的不喜欢它。因此，为了更加安全，请确保您的脚本位于＆lt; head＆gt;内。标签

这确实在我们正在开发的项目中造成了严重破坏（特别是对于Internet Explorer）。

Answer 15

一些事情：

完全有效的代码。
完全没有人推荐。

这样做会大大减慢页面加载速度，因为JavaScript代码必须在页面的任何其余部分呈现之前执行。如果您在该JavaScript代码中做了大量工作，那么您的浏览器可能会挂起。您应该尝试（尽可能）动态加载JavaScript代码并在页面末尾加载（最好在</body>标记之前）。

购买并阅读High Performance JavaScript。它将改变您编写JavaScript代码的方式。

Answer 16

脚本应保留在标头中的经常建议是确保在调用脚本之前加载脚本。这只是某些事件处理程序的问题。对于其他类型的脚本，它没关系，对于某些类型（例如document.write），它没有任何意义。

Answer 17

如果您有一个可以同时处理HTML和JavaScript语法的编辑器。如果你想首先阅读几行HTML然后JavaScript cpde ...肯定。去吧。

将JavaScript嵌入HTML主体是不好的做法？

17 个答案: