Какой смысл использовать атрибут ID в теге скрипта?

Как упоминалось в предыдущих ответах, после запуска кода в теге скрипта его результаты не будут отменены путем замены / удаления узла скрипта.

но идентификатор может быть полезен, если код до сих пор не запущен. Ниже приведен такой тег скрипта:

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

поскольку браузер не знает об этом типе скрипта, он будет игнорировать его выполнение, но тег и его код все равно будут доступны в DOM.

рабочий пример: http://jsfiddle.net/sv_in/rt9Q2/

это в основном используется для шаблонов на стороне клиента. Шаблон, пример усы.js, хранится в таком теге скрипта. Когда его необходимо скомпилировать,он получается из тега, используя его идентификатор. Преимущество этого подхода заключается в том, что представление (шаблоны) и модель (переменная js, содержащая данные, которые будут показаны в представлении) полностью разделены.

кроме этой практики, нет никакой общей цели использовать для ID для тега

нет смысла давать id тегам скриптов, скрипты на странице просто выполняются в последовательности, в которой они находятся на странице.

добавление атрибута id к элементам скрипта служит двум конкретным целям:
1. вы можете распознать свои скрипты при чтении исходного кода веб-страницы;
2. ссылка HTML говорит, что вы должны быть в состоянии перезаписать содержимое идентифицируемого элемента (но опыт учит нас, что немногие браузеры действительно делают это).

например, если у вас уже есть скрипт с id= "myParticularScript", то добавление нового элемента скрипта с тем же id должно заменить старый, загружающий любой новый (или тот же) источник, который вы указали в атрибуте src.

хотя мой опыт динамической загрузки javascripts доказывает, что новый скрипт загружается в браузер, ни один браузер, который я тестировал, не смог заменить старый элемент, который содержит тот же идентификатор.

Так что остается только первая цель: легкое распознавание. В моей работе мы используем системы для создания веб-страниц, и мы не всегда знали, какой скрипт (или css-ссылка, Если на то пошло) добавлен какой компонент. Мы решили эту проблему, добавив идентификаторы к тегам скрипта и css link, которые мы смогли распознать и отследить до наших систем.

Это может быть полезно для проверки существования файла ресурсов в атрибуте src url на сервере. Для очистки кеша, почитании имени файла .js and .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");
}

есть одно использование, которое никто не упоминал:id="test" атрибут задает глобальную переменную test указывая на сам элемент. См.:

я нашел очень новое использование для предоставления ID script тег. Я вложил таук.к скрипт на моем сайте, чтобы показать свой виджет чата. Проблема в том, что виджет не скрывается, когда я хочу распечатать страницу. Таким образом, вы увидите, что виджет повторяется на каждой странице предварительного просмотра, часто скрывая содержимое страницы!

чтобы решить проблему, я сначала заметил, как добавляется виджет. Я узнал, что виджет добавляется сразу после тега скрипта. Но виджет (заключенный в div tag) не имеет никакого класса, и он имеет случайно сгенерированный идентификатор, который отличается каждый раз.

должен был быть другой способ поймать этот виджет (div tag), не полагаясь на трюки JavaScript. Вот когда я узнал, что CSS имеет "рядом родственный" или селектор "next sibling", который на удивление имеет очень приличную поддержку браузера.

Итак, во-первых, я дал ID для сценария tag.

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

Потом используется ID и следующий селектор брата, чтобы применить CSS к виджет.

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

Виола! Проблема решена.

Я script id тег в букмарклете; я добавляю script элемент через Javascript в DOM вместе с div; затем используйте его; & когда / если пользователь нажмет Close кнопка на моей добавленной div; Я нахожу это script элемент по ID и удалите его из DOM, чтобы оставить страницу, как я ее нашел.

Они могут пригодиться, когда вы думаете о загрузке скриптов лениво. Кроме того, я помню, что однажды использовал 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 на теге скрипта, и это тоже полезно!