13

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

4

9 回答 9

14

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

如果您确实需要<script>使用 DOM 操作来访问标签，这id会更容易一些。否则，几乎没有什么好处1。

1这对于向任何idDOM 节点添加属性来说是正确的，尽管影响呈现的节点也可以从 CSS 中受益，这与标签不同...id<script>

于 2012-08-14T20:29:05.020 回答
5

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

但是如果代码到现在还没有运行，那么 id 会很有用。以下是这样一个脚本标签：

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

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

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

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

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

于 2012-08-14T21:10:33.663 回答
1

为您的脚本标签提供 id 没有任何意义，页面上的脚本只是按照它们在页面上的顺序执行。

于 2012-08-14T20:29:45.350 回答
1

向脚本元素添加 id 属性有两个特定目的：
1. 您可以在阅读网页源代码时识别您的脚本；
2. HTML 参考说您应该能够覆盖可识别元素的内容（但经验告诉我们，很少有浏览器真正做到这一点）。

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

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

这样就剩下第一个目的：易于识别。在我的工作中，我们使用系统来生成网页，我们并不总是知道哪个脚本（或 css 链接，就此而言）是由哪个组件添加的。我们通过向脚本标签和 css 链接标签添加 id 来解决这个问题 - 我们能够识别并追溯到我们的系统的 id。

于 2012-08-14T20:38:48.437 回答
0

这对于检查服务器中 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");
}
于 2016-02-26T09:14:12.720 回答
0

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

id 作为全局变量

于 2017-02-07T22:26:12.740 回答
0

我发现了一个非常新颖的用途，可以为script标签提供 ID。我在我的网站中嵌入了 tawk.to脚本来显示它的聊天小部件。问题是，当我想打印页面时，小部件并没有隐藏。因此，您会在打印预览的每个页面上看到重复的小部件，通常会遮盖页面内容！

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

必须有另一种方法来抓住那个小部件（div标签），而不依赖于 JavaScript 技巧。就在那时我了解到 CSS 有一个“相邻兄弟”或“下一个兄弟”选择器，令人惊讶的是，它具有非常好的浏览器支持。

所以首先，我给了 script 标签的 ID。

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

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

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

中提琴！问题解决了。

于 2017-09-22T20:56:06.573 回答
0

我script id在书签中使用了标签；我script通过 Javascript 将元素DOM添加到div; 然后使用它；& 当/如果用户点击Close我添加的按钮div；我通过 ID 找到这个script元素并从 DOM 中删除它以离开我找到的页面。

于 2017-10-08T13:34:04.537 回答
0

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

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

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

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

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

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

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

解决聊天按钮上的“第二次点击”问题的一个很好的解决方案是查看脚本是否已经存在于 DOM 中，如果存在，不要让相同的脚本两次附加到 DOM 中。

因此，您的按钮可能是：

<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 的一种方式，它也很有用！

于 2018-08-16T10:00:13.530 回答