代码之家  ›  专栏  ›  技术社区  ›  Andrew

将javascript嵌入到HTML的主体中是不是一个坏的实践?

  •  81
  • Andrew  · 技术社区  · 15 年前

    我正在努力的团队已经养成了使用的习惯 <script> HTML页面正文中随机位置的标记。例如:

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

    我以前没见过这个。在我测试过的少数浏览器中,它似乎可以工作。但据我所知,把脚本标签放在这样的地方是无效的。

    我错了吗?我们把脚本标记放在这样的DIV标记中有多糟糕?是否存在我应该注意的浏览器兼容性问题?

    17 回复  |  直到 7 年前
        1
  •  83
  •   bobince    15 年前

    这是完全有效的。

    您不希望在标记中混合放置大量的代码块(最好使用外部脚本),但它可能有助于:

    • 为渐进式增强添加额外的绑定信息(当数据难以放入类名或其他方法中以隐藏属性中的扩展信息时);或

    • 如果需要尽快启动脚本增强(而不是等待窗口加载/文档就绪)。一个例子是自动对焦,如果点火太晚会很恼火。

    你可能在想 <style> 元素中不允许的 <body> (尽管大多数浏览器都允许)。

        2
  •  14
  •   Keltex    15 年前

    实际上,这很常见。例如 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>
    

    如果对谷歌来说足够好…

        3
  •  4
  •   Pointy    15 年前

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

        4
  •  4
  •   Peter Mortensen icecrime    7 年前

    正如很多人所说,它是有效的,有效的,并且被广泛使用。

    就语义推荐(或至少用于推荐)而言,最佳实践是将脚本标记放在头中。

    考虑到性能的更现代的最佳实践建议将脚本标记(外部和内联)放在body标记的右下方,以便在任何javascript代码执行之前完全呈现标记。

    为了更容易理解和维护代码,建议使用“Unobtrusivejavascript”,其中代码位于外部文件中,并将事件绑定到DOM(GoogleUnobtrusivejavascript)。

    内联javascript很有用的一种情况是使用仅存在于服务器端的值初始化变量,然后外部javascript代码将使用这些值。

        5
  •  3
  •   Matti Virkkunen    15 年前

    我更喜欢将对外部脚本的引用放在头上,并将启动和初始化小部件的脚本以及其他不在正文中的脚本放在头上。

    一个很容易遇到的问题是,主体中的脚本元素不能访问后面的元素。另外,一个相关的浏览器兼容性问题是IE不允许脚本元素修改它们所在的元素。所以如果你有这个:

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

    我不喜欢你的页面。旧版本的IE通常会给整个页面提供非常神秘的错误消息,甚至是空白的错误消息,但是IE8似乎给出了一个描述性的错误消息。

    只要确保脚本只访问安全访问的DOM,我认为将脚本元素放入主体中并不是坏事。实际上,imho,将初始化小部件的脚本放在相关元素之后比将所有内容放在一个位置更具可读性(而且我相信这也可能使它们更早运行,这使得随着页面加载,内容的跳跃性更小)。

        6
  •  3
  •   Peter Mortensen icecrime    7 年前

    这是有效的!

    你可以使用:

    <script type="text/javascript">
        //<![CDATA[
    
        // Some JavaScript code that perfectly validates in the W3C validator
    
        //]]>
    </script>
    

    我想你不能说这是不是一个坏习惯。在这种情况下你得说出来。但可以肯定的是,将所有的javascript代码放在同一个位置是很好的。如果HTML文件中到处都是小片段的javascript代码,这会有点混乱。

        7
  •  2
  •   user642922    12 年前

    我以前没见过这个。它似乎在少数浏览器中工作 我已经测试过了。但据我所知,放置脚本标记是无效的 在这样的地方。

    它是有效的,但不是一个好的(或推荐的)实践。

    我错了吗?我们在DIV中放置脚本标记有多糟糕 像这样的标签?有什么浏览器兼容性问题吗 意识到?

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

    1. 添加页面粗细
    2. 缩小的困难(或可能不可能)
    3. 无法迁移或用于其他页
    4. 无法缓存 (每次加载页面时都需要下载)
    5. 不分离关注点 (难以维护)
        8
  •  2
  •   Peter Mortensen icecrime    7 年前

    但是,它也很好,因为您知道HTML的一部分所需的javascript代码将用于此。而不是在文件的顶部断言和构建一些包含。

    所以,不要说“如果你要使用这个HTML,确保你导入xyz.js”,你只需要包含这个HTML并完成它。

    所以,这不一定是可怕的邪恶。也许不是惊人的可怕,但也不是完全可怕。这取决于意图。

        9
  •  2
  •   Peter Mortensen icecrime    7 年前

    有关最佳实践,请参见雅虎用户界面: http://developer.yahoo.com/performance/rules.html (页面底部的javascript)

        10
  •  1
  •   Peter Mortensen icecrime    7 年前

    这当然是合法的,我在几页上看到过 here on Exforsys 例如。

    现在这是一个教程站点,展示了HTML和JavaScript的基础知识,因此在这个上下文中,它是完全可以理解的。但是,我不想在生产代码中看到它,因为它只包含一两个简单的语句。看不到你被什么取代了 // Some JavaScript code here 我不想评论。

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

        11
  •  1
  •   Peter Mortensen icecrime    7 年前

    在中添加脚本是有效的 body 但是Internet Explorer确实不喜欢它。为了更安全起见,请确保您的脚本位于<head>标记内。

    这真的在我们正在进行的项目中造成了巨大的破坏(尤其是对于Internet Explorer)。

        12
  •  1
  •   Peter Mortensen icecrime    7 年前

    我假设您的团队之所以这样做,是因为他们想要动态地插入一个脚本,或者他们正在编写一个在页面加载时触发的脚本。

    我不会说在绝对必要的时候这样做有什么问题(只要它在一个CDATA块中),但除此之外,我建议您的团队使用一个脚本库,如原型或jquery,并将脚本保持在页面外部。这通常是更干净的,库有时会强制代码保持一点清洁,我敢打赌目前不会发生这种情况。

    我也不会在内联脚本标记中运行任何耗时的函数,因为它们发生在页面加载上,正如Jason上面所述,可能会降低页面的加载速度。所有脚本库都有一些简洁的函数,允许您在页面加载时执行操作,并允许您选择何时在页面加载中启动它们,例如在加载DOM之后。

        13
  •  1
  •   Peter Mortensen icecrime    7 年前

    它是许多最佳实践中的一个,这些最佳实践不仅涉及提高性能,而且涉及改进编程方法。

    最终在Web开发中,把产品推出最重要!

        14
  •  1
  •   Peter Mortensen icecrime    7 年前
        15
  •  0
  •   Tor Haugen    15 年前

    通常情况下,建议将脚本保存在头中是为了确保在调用前加载脚本。这只是某些事件处理程序的问题。对于其他类型的脚本,这并不重要,对于某些类型(如document.write),它没有任何意义。

        16
  •  0
  •   Peter Mortensen icecrime    7 年前

    如果您有一个可以同时处理HTML和JavaScript语法的编辑器。如果你想先读几行HTML,然后读javascriptCPDE…当然。去争取它。

        17
  •  0
  •   Peter Mortensen icecrime    7 年前

    几件事:

    1. 这是完全有效的代码。
    2. 这是完全不被认可的。

    这样做会大大降低页面加载速度,因为在页面其余部分呈现之前必须执行javascript代码。如果你在javascript代码中做了很多工作,你的浏览器可能会挂起。您应该(尽可能)在页面末尾(最好在 </body> 标签)。

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