Question

基本上我要问的是给我的脚本标签一个id属性是什么意思？由于这种识别，它们内部的例程是否可以被不同地调用或引用？这会导致脚本/页面行为有问题吗？

感谢。

Answer 1

id只是DOM树中<script>标记的另一个访问者。您理论上可以使用document.getElementById()来检索<script>节点并将其删除或添加其他属性（尽管我不相信您可以在DOM中加载后修改src属性）。虽然这些操作不需要id - 它也可以被任何DOM函数访问，例如getElementsByTagName("script")。

如果您确实需要使用DOM操作访问<script>标记，id会让它变得更容易一些。否则，¹几乎没有什么好处。

¹对于向任何 DOM节点添加id属性都是如此，尽管影响演示的节点也可以从定位{{ 1}}，与id标记不同...

Answer 2

正如之前的答案所提到的，一旦脚本标记中的代码运行，它的结果将不会通过替换/删除脚本节点来撤消。

但是如果代码到目前为止还没有运行，那么id会很有用。以下是这样的脚本标记：

<script id="code1" type="text/myjs">.....</script>

由于浏览器不知道这种类型的脚本，它会忽略它的执行，但标签及其代码仍然可以在DOM中使用。

工作示例：http://jsfiddle.net/sv_in/rt9Q2/

这主要用于客户端模板。模板（Mustache.js的示例）存储在此类脚本标记中。当需要编译时，它是使用它的id从标签获得的。这种方法的优点是视图（模板）和模型（包含要在视图中显示的数据的js变量）是完全独立的。

除了这种做法之外，脚本标记的id没有通用用途

Answer 3

给脚本标签赋予id是没有意义的，页面上的脚本只是按照它们在页面上的顺序执行。

Answer 4

为脚本元素添加id属性有两个特定目的：
1.阅读网页的源代码时，您可以识别脚本;
2. HTML引用说你应该能够覆盖可识别元素的内容（但经验教会我们很少有浏览器实际上这样做。）

例如，如果您已经有一个id =“myParticularScript”的脚本，那么添加一个具有相同ID的新脚本元素应该替换旧脚本，加载您在src属性中指定的任何新（或相同）源

虽然我对动态加载javascripts的经验证明新脚本确实被加载到浏览器中，但我测试的浏览器没有设法替换具有相同id的旧元素。

因此，只留下第一个目的：轻松识别。在我的工作中，我们使用系统来生成网页，我们并不总是知道哪个组件添加了哪个脚本（或css链接）。我们通过向脚本标记和css链接标记添加id来解决这个问题 - 我们能够识别并追溯到我们系统的ID。

Answer 5

当您考虑延迟加载脚本时，它们可能会派上用场。另外，我记得我曾经在脚本标签上使用过ID，以方便按状态更改（这是一个单页应用程序）对元内容进行更改。

使用脚本标签上的ID，您可以检查特定实例上DOM中是否存在具有特定ID的脚本标签。如果不存在，并且您的路线要求将其存在，则可以加载它（在某些条件下）。

假设有一个脚本需要延迟加载。让我们以一些聊天小部件为例。可能出现这样的情况，这些情况可能会使您仅在用户碰巧单击聊天按钮时才加载聊天小部件。

在这里，您将懒惰地加载聊天。因此，可能的情况是： “如果用户单击聊天按钮，则将聊天小部件js注入DOM中。”

简单吗？当然好。但是，请考虑当用户再次单击聊天按钮时的情况。会发生什么？将会再次注入相同的脚本，但是您当然不希望发生这种情况，对吗？

因此，假设聊天小部件js通过以下方式进入DOM：

<script id="chatWidgetScript" src="...whatever..."></script>

要解决聊天按钮上的“第二次单击”问题，一个好的解决方案是查看脚本是否已存在于DOM中，如果存在，请不要将该脚本两次附加到DOM中。 / p>

因此，您的按钮可能是：

<button onclick="loadChatWidget()"> Chat! </button>

您的loadChatWidget（）函数可能是：

loadChatWidget(){
     if(document.getElementById("chatWidgetScript")){
          //chat script is already there in the DOM, no need to load it again.
          return;
     }

     /* 
     if document.getElementById("chatWidgetScript") returns null, this would 
     mean that the chat widget isn't there in the DOM, and you might want to 
     load the same now.
     */

     // LOAD SCRIPT HERE
}

这只是在脚本标签上使用ID的一种方法，它也很有用！

Answer 6

这可能对于检查服务器中src url属性中是否存在资源文件很有用。对于缓存清除，需要重新放置.js和.css文件的文件名。这将有助于检查服务器中的文件名是否已更改，然后通过代码通过

进行重新加载

$window.location.reload()

代码示例（angularjs）：

service.reloadApplication = function () {
    var script = document.getElementsById("scriptAppMin");                  
    if (!!script.getAttribute('src') &&       doesFileExist(script.getAttribute('src')) == false)
                            $window.location.reload();                                                             
    }


 function doesFileExist(fileUrl) {
    var xhr = new XMLHttpRequest();
    xhr.open('HEAD', fileUrl, false);
    xhr.send();
    return !(xhr.status == "404");
}

Answer 7

有一个用户没人提到：id="test"属性设置指向元素本身的全局变量test。参见：

Answer 8

我找到了一个非常新颖的用途，用于为script标记提供ID。我在我的网站上嵌入了tawk.to脚本来显示其聊天窗口小部件。问题是，当我想要打印页面时，小部件不会隐藏。因此，您会在打印预览的每个页面上看到窗口小部件重复，通常会遮挡页面内容！

为了解决这个问题，我首先观察了如何添加小部件。我发现在小部件标签之后添加了小部件。但是小部件（包含在div标签中）没有任何类，并且它具有随机生成的ID，每次都不同。

必须有另一种方法来抓住该窗口小部件（div标记），而不依赖于JavaScript技巧。那时我才知道CSS有一个"adjacent sibling"或“下一个兄弟”选择器，令人惊讶的是它有非常不错的浏览器支持。

首先，我为脚本标记提供了一个ID。

<script type="text/javascript" id="tawk-to-script">

然后我使用ID 和下一个兄弟选择器将CSS应用于小部件。

@media print {
  script#tawk-to-script + div {
    display: none !important;
  }
}

中提琴！问题解决了。

Answer 9

我在书签中使用了script id标记;我通过Javascript将script元素与DOM一起添加到div;然后用它; ＆安培;当/如果用户点击我添加的Close上的div按钮时我通过ID＆amp;找到这个script元素将它从DOM中删除，以便在我找到它时离开页面。

在脚本标记中使用ID属性有什么意义？

9 个答案: