Was ist der Punkt, der mit einem ID-Attribut im script-tag?

Den id ist nur ein weiterer accessor der <script> tag in den DOM-Baum. Sie könnte in der Theorie verwenden document.getElementById() zum abrufen der <script> Knoten, und löschen Sie es oder fügen Sie weitere Attribute (obwohl ich nicht glaube, dass Sie ändern können, die src Attribut, sobald es geladen wurde, im DOM). Die id ist nicht erforderlich, für diese Operationen, obwohl-es könnte auf die zugegriffen wurde, die von beliebigen DOM-Funktion wie getElementsByTagName("script") als gut.

Wenn Sie tun müssen, um Zugriff auf die <script> tag mit DOM-Manipulationen, die id macht es nur ein wenig einfacher. Ansonsten gibt es wenig nutzen¹.

¹Das ist eine Art von true, das hinzufügen einer id Attribut alle DOM-Knoten, wenn Knoten beeinflussen-Präsentation können auch profitieren von CSS Ausrichtung der id im Gegensatz zu einem <script> tag...

Gibt es keine Bedeutung geben-id, um Ihre Skript-tags, die Skripte auf einer Seite, führen Sie einfach in einer Sequenz Sie sind auf der Seite.

Könnte dies nützlich sein für die Prüfung der Existenz der Ressource-Datei in den src-url-Attribut in den server. Für cache-busting, reverencing der name der Datei .js-und .css-Dateien erforderlich sind. Dies wird helfen, heraus zu überprüfen, ob die Datei Namen geändert hat, in den server und dann Mach ein reload via code über

$window.location.reload() 

Code-Beispiel (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");
}

Fand ich eine sehr neuartige Verwendung für die Angabe von ID, um eine script tag. Ich hatte eingebettet tawk.zu script in meine website zu zeigen, seine chat-widget. Das problem ist, dass das widget nicht verstecken, wenn ich will, um die Seite zu drucken. So würden Sie sehen, das widget, wiederholt sich auf jeder Seite in der Druckvorschau, oft verdunkelt den Inhalt einer Seite!

Um das problem zu beheben, habe ich zunächst beobachtet, wie das widget Hinzugefügt wird. Ich fand heraus, dass das widget Hinzugefügt wird, direkt nach dem script-tag. Aber das widget (eingehüllt in eine div tag) hat keine Klasse, und es hat eine zufällig generierte ID, die ist jedes mal anders.

Es musste einen anderen Weg zu fangen, zu halten, dass widget (die div tag), ohne sich auf JavaScript-tricks. Das ist, wenn ich gelernt, dass CSS hat eine "adjacent sibling" oder "nächste Geschwisterchen" - Selektor, die überraschenderweise hat sehr anständige browser-Unterstützung.

Also erstmal, ich habe eine ID für das Skript-tag.

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

Dann habe ich verwendet die ID und den nächsten sibling-Selektor CSS anzuwenden, um die widget.

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

Viola! Problem gelöst.

Könnten Sie kommen in praktisch, wenn Sie denken, der laden von scripts träge. Auch ich erinnere mich, dass ich einst eine ID auf ein script-tag zu erleichtern, die Veränderungen, die auf meta-content, je Staat zu ändern (es wurde ein single-page-Applikation).

Mit einer ID auf ein script-tag, können Sie überprüfen, ob auf einer bestimmten Instanz, ob ein script-tag mit einer bestimmten ID gibt es in der DOM-oder nicht. Wenn es nicht gibt, und wenn Ihre route erfordert es, dort zu sein, können Sie laden Sie es dann (aufgrund bestimmter Bedingungen).

Angenommen, es gibt ein Skript, das Sie brauchen, um zu laden träge. Nehmen wir ein Beispiel von einigen chat-widget. Sie können Fälle auftreten, können dazu neigen, Sie zu laden Sie das chat-widget wird nur und nur, wenn ein Benutzer passiert zu klicken Sie auf, sagen wir, einen chat-Knopf.

Hier werden Sie träge laden Sie die chat. So, einen möglichen Fall aus ihm werden kann:
"wenn Benutzer klickt auf die Schaltfläche "chat", Spritzen Sie das chat-widget-js in den DOM".

Einfach? Hölle ja. Aber, denken Sie über den Fall, wenn ein Benutzer klickt auf den chat-button wieder. Was wird passieren? Das gleiche script wieder injiziert werden, aber Sie möchten sicherlich nicht, dass das passiert, tun Sie?

So, sagen wir mal das chat-widget js geht in den DOM von:

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

Eine gute Lösung für die Bewältigung der "zweiten Klick" - problem auf der chat-Schaltfläche, um zu sehen, ob das Skript bereits existiert, in den DOM, und wenn Sie es tut, lassen Sie sich nicht die gleichen get angehängt zweimal in der DOM.

So, dass Ihre Schaltfläche werden könnte:

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

Und Ihre loadChatWidget () - Funktion könnte sein:

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
}

Dies ist nur eine Art der Verwendung einer ID auf ein script-tag, und es ist auch nützlich!