Question

我遇到了这段代码

<script class="example" type="text/javascript">

并且好奇是否有好处将其写入您的代码

Answer 1

我刚用这个标记进行了快速测试：

<!DOCTYPE html>
<html>
<head>
    <style>
        .foo {
            display: block;
            border: 2px solid red;
            width: 10px;
            height: 10px;
        }
    </style>
</head>
<body>
    <script class="foo" type="text/javascript">
        alert("can you see me?");
    </script>
    after the script  
</body>
</html>

结果是屏幕上出现红色块，并且在Chrome中运行时脚本标记的内容可见。 IE根本不会显示脚本内容。因此<script>可以像任何其他标记一样对待，至少在Chrome中是这样。我认为这是对Chrome的疏忽。这是32位Windows 7上的Chrome 10.0.648.204。

effect of rendering the above html

编辑：Firefox 4也呈现同样的东西。

EDIT2：可能的用例？使用它作为页面上脚本的“显示源”，向人们展示它是如何工作的，也许是在关于JavaScript的博客上？

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
</head>
<body>
    <script class="foo" type="text/javascript">
        function foobar() {
            var a = 1;
        }   
    </script>
    after the script
    <a href="#">show me the script</a>

    <script type="text/javascript">
        $('a').click(function(event) {
            event.preventDefault();
            $("<div>").html($(".foo").text()).appendTo($("body"));
        });
    </script>
</body>
</html>

Answer 2

视觉样式可能不是一个很好的例子。可以使用的地方是动态地从许多脚本片段中选择一个以在其他地方使用，例如使用javascript模板语言。

Contrived Handlebars示例：

<script class="greeting english" type="text/x-handlebars-template">
    <p>Hello {{name}}</p>
</script>
<script class="greeting spanish" type="text/x-handlebars-template">
    <p>Hola {{name}}</p>
</script>

...

var greeting_template = Handlebars.compile($('script.greeting.' + language).html()); 
$('#header').append(greeting_template(user));

Answer 3

对于脚本具有class属性，我能想到的唯一好处是jQuery可以选择元素并进行一些操作，例如复制它。

Answer 4

我能想到的唯一一个有用的实例是将脚本标签动态添加到页面时（彗星功能），因为这是您实际可能与脚本标签交互的少数几次。

Answer 5

根据w3c标准，如w3schools.com所述，script tag确实支持Global Attributes，其中一个是“类”属性。因此，拥有具有特定类属性的脚本标记是完全“合法的”，并且打破此问题的浏览器不完全符合w3c。脚本标记也支持全局属性“id”。

对于使用带有'class'或'id'的脚本标记的可能效用，在将其发送给客户端之前，需要有一个非常具体的用例来遍历w3c文档或DOM抽象。浏览器，处理。在这种情况下，可以使用css样式选择来完成对文档进行更改的方法，并且用于分组脚本的“id”和“class”可能由于多种原因而有用。

这是一个狭隘而具体的案例，但我实际上是在这个时刻参与其中。说它没有用处是狭隘的，并且说标准是非法的是假的。它可能并不是所有浏览器都支持，但浏览器（甚至是现代浏览器）以不同的方式解释w3c标准并以自己的方式实现其标准支持版本并不罕见。

Answer 6

使用脚本标记本身作为相邻选择器的参考时非常有用。

即。

＆＃13;

.example + iframe {height: none;}

＆＃13;

<script class="example" type="text/javascript" src="//weird-addon.js">
</script>

＆＃13;

在上面的例子中，我正在将一个脚本加载到页面上。该脚本正在将一个元素（在本例中为iframe）直接写入DOM。

我不希望它立即显示，因此我使用脚本类选择相邻的iframe以在页面加载时隐藏它。

控制实际脚本标记显示本身可能不是很有用，但与相邻选择器结合使用时，它确实值得使用。

Answer 7

出于安全原因，您可以使用class或id来擦除写在其中的脚本。

<script id="erasable" type="text/javascript">
    //your code goes here
    document.getElementById('erasable').innerHTML = "";
</script>

Answer 8

我想到的一个直接好处是，Javascript / Jquery / etc现在可以通过类名选择该脚本元素。

Answer 9

我认为没有任何好处：

通过CSS ~~选择它不~~不应该做任何事情（直观地）
通过JS选择它是没有用的，因为复制，删除等没有做任何事情（因为JS里面只加载一次 - 任何后面的更改被丢弃）。

Answer 10

我认为使用class属性并不完全正确。根据{{3}}，script-tag不支持class属性所属的标准属性。所以jQuery可能会在为类使用过滤时选择它，但你无法保证。此外，它不确定所有浏览器中的行为是否相同。

Answer 11

可能的情况：

当你想使用css将.png放在脚本之上时。使用z-index。

Answer 12

添加类或ID允许您使用Javascript选择脚本标记，然后获取其内容，例如JSON对象或任何内容。这样你就可以避免创建一个全局变量（在这里使用jQuery）：

<script id="datas" type="text/javascript">
    {"id": 1}
</script>

<script type="text/javascript">
    // This part of the code should be in a JS module
    // To avoid creating a global "object" variable
    var object = JSON.parse($('#datas').html());
    console.log(object.id); // Log "1"
</script>

Javascript模板引擎也使用这种技术，例如（Handlebars）：

<script id="entry-template" type="text/x-handlebars-template">
    <div class="entry">
      <h1>{{title}}</h1>
      <div class="body">
        {{{body}}}
      </div>
    </div>
</script>

有关此问题的更多内容：Is there a standard for embedding JSON in HTML?

Answer 13

我发现在脚本标记中添加了一个类，可用于开发代码编辑器，允许在页面上的特定块中编辑javascript，

<div id="idForABlock">
<script class="jsCustomJavascript">
//user generated code
</script>
</div>

将类放在脚本标记上是否有好处？

13 个答案: