Как получить текущий элемент скрипта:
1. Используйте document.currentScript
document.currentScript
вернет <script>
элемент, чей скрипт в данный момент обрабатывается.
<script>
var me = document.currentScript;
</script>
Преимущества
- Просто и понятно. Надежный.
- Не нужно изменять тег сценария
- Работает с асинхронными скриптами (
defer
& async
)
- Работает со скриптами, вставленными динамически
Проблемы
- Не будет работать в старых браузерах и IE.
- Не работает с модулями
<script type="module">
2. Выберите скрипт по id
Придание скрипту атрибута id позволит вам легко выбрать его по id изнутри использования document.getElementById()
.
<script id="myscript">
var me = document.getElementById('myscript');
</script>
Преимущества
- Просто и понятно. Надежный.
- Почти повсеместно поддерживается
- Работает с асинхронными скриптами (
defer
& async
)
- Работает со скриптами, вставленными динамически
Проблемы
- Требуется добавить пользовательский атрибут в тег скрипта
id
Атрибут может вызвать странное поведение для скриптов в некоторых браузерах для некоторых крайних случаев
3. Выберите скрипт, используя data-*
атрибут
Придание скрипту data-*
атрибута позволит вам легко выбрать его изнутри.
<script data-name="myscript">
var me = document.querySelector('script[data-name="myscript"]');
</script>
Это имеет несколько преимуществ по сравнению с предыдущим вариантом.
Преимущества
- Просто и понятно.
- Работает с асинхронными скриптами (
defer
& async
)
- Работает со скриптами, вставленными динамически
Проблемы
- Требуется добавить пользовательский атрибут в тег скрипта
- HTML5, и
querySelector()
не совместим во всех браузерах
- Менее широко поддерживается, чем использование
id
атрибута
- Обойдется
<script>
с id
крайними случаями.
- Может запутаться, если другой элемент имеет такой же атрибут данных и значение на странице.
4. Выберите скрипт по src
Вместо использования атрибутов данных вы можете использовать селектор для выбора сценария по источнику:
<script src="//example.com/embed.js"></script>
В embed.js:
var me = document.querySelector('script[src="//example.com/embed.js"]');
Преимущества
- надежный
- Работает с асинхронными скриптами (
defer
& async
)
- Работает со скриптами, вставленными динамически
- Не требуется пользовательских атрибутов или идентификатора
Проблемы
- Кто не работает для локальных скриптов
- Вызывает проблемы в разных средах, таких как разработка и производство
- Статичный и хрупкий. Изменение местоположения файла скрипта потребует модификации скрипта
- Менее широко поддерживается, чем использование
id
атрибута
- Это вызовет проблемы, если вы дважды загрузите один и тот же скрипт
5. Просмотрите все сценарии, чтобы найти нужный.
Мы также можем зациклить каждый элемент скрипта и проверить каждый отдельно, чтобы выбрать тот, который мы хотим:
<script>
var me = null;
var scripts = document.getElementsByTagName("script")
for (var i = 0; i < scripts.length; ++i) {
if( isMe(scripts[i])){
me = scripts[i];
}
}
</script>
Это позволяет нам использовать обе предыдущие методики в старых браузерах, которые плохо поддерживают querySelector()
атрибуты. Например:
function isMe(scriptElem){
return scriptElem.getAttribute('src') === "//example.com/embed.js";
}
Это наследует преимущества и проблемы любого подхода, но не полагается на него, querySelector()
поэтому будет работать в старых браузерах.
6. Получить последний выполненный скрипт
Поскольку сценарии выполняются последовательно, последним элементом сценария очень часто будет текущий запущенный сценарий:
<script>
var scripts = document.getElementsByTagName( 'script' );
var me = scripts[ scripts.length - 1 ];
</script>
Преимущества
- Просто.
- Почти повсеместно поддерживается
- Не требуется пользовательских атрибутов или идентификатора
Проблемы
- Кто не работает с асинхронными скриптами (
defer
& async
)
- Имеет ли не работать со сценариями , вставленных динамически