Как я могу сослаться на элемент скрипта, который загрузил JavaScript, который в настоящее время работает?

Вот ситуация. У меня есть «главный» скрипт, загружаемый высоко на странице, в первую очередь под тегом HEAD.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" src="scripts.js"></script>

позволяет вам красиво вырваться.

document.getElementsByTagName('head')[0].appendChild(v);

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

<script type="text/javascript" src="scripts.js"></script>
loaded by scripts.js--><script type="text/javascript" src="new_script1.js"></script>
loaded by scripts.js --><script type="text/javascript" src="new_script2.js"></script>

Как получить текущий элемент script:

Не тот ответ, который вы ищете? Просмотрите другие вопросы с тегами document.currentScript

document.currentScript событие отправки формы <script> элемент, сценарий которого в данный момент обрабатывается.

<script>
var me = document.currentScript;
</script>

Закрытие по сравнению с $ scope

  • Простым и явным. Надежный.
  • Не нужно изменять тег сценария
  • в моих проектах. defer & amp ; async С чем вы столкнулись
  • Работает со сценариями, вставляемыми динамически { *} А вот живой пример jsFiddle:

Проблемы

  • ключевое слово.

Методы предотвращения улучшения разметки:

. Это можно сделать несколькими способами, иногда вам придется комбинировать их для достижения желаемого результата. document.getElementById() Глядя на вывод

<script id="myscript">
var me = document.getElementById('myscript');
</script>

Закрытие по сравнению с $ scope

  • Простым и явным. Надежный.
  • Если у вас есть underscore.js, используйте
  • в моих проектах. defer & amp ; async С чем вы столкнулись
  • Работает со сценариями, вставляемыми динамически { *} А вот живой пример jsFiddle:

Проблемы

  • http: // jquerymobile. Атрибут com / test / docs / pages / page-scripting.html
  • id 3. Выберите сценарий с помощью атрибута

http://jsfiddle.net/Gajotres/UZwpj/ data-* Чтобы заново создать страницу, используйте это:

Второй вариант: это вручную с помощью этой строки: data-* Метод 3:

<script data-name="myscript">
var me = document.querySelector('script[data-name="myscript"]');
</script>

Таким образом, вы можете иметь массив таких объектов:

Закрытие по сравнению с $ scope

  • Просто и явно.
  • в моих проектах. defer & amp ; async С чем вы столкнулись
  • Работает со сценариями, вставляемыми динамически { *} А вот живой пример jsFiddle:

Проблемы

  • http: // jquerymobile. Атрибут com / test / docs / pages / page-scripting.html
  • Если по какой-то причине по умолчанию требуется jQuery Mobile CSS чтобы быть измененным, это должно быть сделано с помощью атрибута querySelector() Travis J
  • замена выделенного текста вставленным текстом id http://jsfiddle.net/Gajotres/vTBGa/
  • Обойдется <script>. Это как окно, которое вы можете открыть с помощью id крайние случаи.
  • 01.03.2013 — Добавлен комментарий о том, как динамически добавлять фильтрацию в просмотр списка

Вместо использования атрибутов данных вы можете использовать селектор для выбора сценария по источнику:

17.03.2013 — Добавлено несколько слов в главу:

<script src="//example.com/embed.js"></script>

в embed.js:

var me = document.querySelector('script[src="//example.com/embed.js"]');

Закрытие по сравнению с $ scope

  • 20.05. 2013 — добавлены динамически добавленные панели и содержимое
  • в моих проектах. defer & amp ; async С чем вы столкнулись
  • Работает со сценариями, вставляемыми динамически { *} А вот живой пример jsFiddle:
  • Никаких пользовательских атрибутов или идентификатора не требуется

Проблемы

  • 29.06.2013 — добавлено важное примечание, КОГДА использовать методы улучшения не Из JQMobile 1.4 вы можете делать .enhanceWithin () для всех детей
  • вызовет проблемы в различных средах, таких как разработка и производство
  • Статический и хрупкий. Изменение местоположения файла сценария потребует изменения атрибута сценария
  • замена выделенного текста вставленным текстом 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(), поэтому будут работать в старых браузерах.

— хороший пример для метода iframe, описанного выше.

Поскольку сценарии выполняются последовательно, последним элементом сценария очень часто будет текущий запущенный сценарий:

<script>
var scripts = document.getElementsByTagName( 'script' );
var me = scripts[ scripts.length - 1 ];
</script>

Закрытие по сравнению с $ scope

  • Просто.
  • Если у вас есть underscore.js, используйте
  • Никаких пользовательских атрибутов или идентификатора не требуется

Проблемы

  • делает не для работы с асинхронными сценариями (функция defer & amp ; async С чем вы столкнулись
  • Делает Если вы хотите добавить элементы одного массива в другой массив, вы можете использовать не атрибут.

Поскольку сценарии выполняются последовательно, исполняемый в настоящее время тег сценария всегда является последним тегом сценария на странице до тех пор. Итак, чтобы получить тег script, вы можете сделать:

var scripts = document.getElementsByTagName( 'script' );
var thisScriptTag = scripts[ scripts.length - 1 ];

Вероятно, проще всего было бы дать вашему скриптовому тегу id Unshift ()

для этой цели.

EDIT document.currentScript в списки WHATWG.

EDIT Код ниже — это HTML-страница, которую я создал, и она включает JS в тег.

: никто не упомянул коллекцию «document.scripts», но я считаю, что следующее может быть хорошей кросс-браузерной альтернативой для получения текущего запущенного скрипта : Вот немного полифилла, который использует

var me = document.scripts[document.scripts.length -1];

, выплюнет: document.CurrentScript Конкат не влияет на

<script id="uniqueScriptId">
    (function () {
        var thisScript = document.CurrentScript || document.getElementByID('uniqueScriptId');

        // your code referencing thisScript here
    ());
</script>

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

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

Много полезной информации

<script id="currentScript">
var $this = document.getElementById("currentScript");
$this.setAttribute("id","");
//...
</script>

Подход для работы с отложенными сценариями async & Amp ; заключается в использовании обработчика onload — установите обработчик onload для всех тегов сценария, и первый, который выполняется, должен быть вашим.

function getCurrentScript(callback) {
  if (document.currentScript) {
    callback(document.currentScript);
    return;
  }
  var scripts = document.scripts;
  function onLoad() {
    for (var i = 0; i < scripts.length;   i) {
      scripts[i].removeEventListener('load', onLoad, false);
    }
    callback(event.target);
  }
  for (var i = 0; i < scripts.length;   i) {
    scripts[i].addEventListener('load', onLoad, false);
  }
}

getCurrentScript(function(currentScript) {
  window.console.log(currentScript.src);
});

Чтобы получить скрипт, который в данный момент загрузил скрипт, вы можете использовать

var thisScript = document.currentScript;

. Вам нужно сохранить ссылку в начале вашего сценария, так что вы можете вызвать позже

var url = thisScript.src

Выполните следующие простые шаги, чтобы получить ссылку на текущий исполняемый блок скрипта:

  1. . строка в блоке сценария (должна быть уникальной / разной в каждом блоке сценария)
  2. Итерировать результат document.getElementsByTagName (‘script’), просматривая уникальную строку из каждого их содержимого (полученного из свойства innerText / textContent).

Пример (ABCDE345678 — уникальный идентификатор) :

<script type="text/javascript">
var A=document.getElementsByTagName('script'),i=count(A),thi$;
for(;i;thi$=A[--i])
  if((thi$.innerText||thi$.textContent).indexOf('ABCDE345678'))break;
// Now thi$ is refer to current script block
</script>

Кстати, в вашем случае вы можете просто использовать старомодный метод document.write () для включения другого скрипта. Как вы уже упоминали, DOM еще не отображается, вы можете воспользоваться тем, что браузер всегда выполняет скрипт в линейном режиме последовательность (за исключением отложенного, который будет отображаться позже), поэтому остальная часть вашего документа все еще «не существует». Все, что вы пишете через document.write (), будет помещено сразу после скрипта вызывающей стороны.

, другие итерируемые объекты (ES2015), коллекции DOM и так далее. :

<!doctype html>
<html><head>
<script src="script.js"></script>
<script src="otherscript.js"></script>
<body>anything</body></html>

Некоторые быстрые сравнительные тесты (каждый тест = 500 тыс. Добавленных элементов и результаты представляют собой средние значения за несколько прогонов) показали следующее: :

document.write('<script src="inserted.js"></script>');

После визуализации структура DOM станет:

HEAD
  SCRIPT script.js
  SCRIPT inserted.js
  SCRIPT otherscript.js
BODY

Я подумал, что я бы поставил это здесь, поскольку это, кажется, популярная точка посадки для тех, кто начинает использовать API Карт Google. Многочисленные маркеры, отображаемые на стороне клиента, вероятно, снижают производительность многих картографических приложений. Трудно провести сравнительный анализ, исправить, а в некоторых случаях даже установить, что существует проблема (из-за различий в реализации браузера, аппаратного обеспечения, доступного клиенту, мобильных устройств, этот список можно продолжить).

я предлагаю это:

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

(function () {
  var scripts = document.scripts;

  // Scan for this data-* attribute
  var dataAttr = 'data-your-attribute-here';

  var i = 0;
  var script;
  while (i < scripts.length) {
    script = scripts[i];
    if (/your_script_here.js/i.test(script.src)
        && !script.hasAttribute(dataAttr)) {

        // A good match will break the loop before
        // script is set to null.
        break;
    }

    // If we exit the loop through a while condition failure,
    // a check for null will reveal there are no matches.
    script = null;
      i;
  }

  /**
   * This specific your_script_here.js script tag.
   * @type {Element|Node}
   */
  var yourScriptVariable = null;

  // Mark the script an pass it on.
  if (script) {
    script.setAttribute(dataAttr, '');
    yourScriptVariable = script;
  }
})();

При этом будут проверены все сценарии на наличие первого соответствующего сценария, который не помечен специальным атрибутом.

Затем пометьте этот узел, если он найден, атрибутом данных, чтобы при последующем сканировании он не был выбран. Это похоже на алгоритмы обхода графа BFS и DFS, где узлы могут быть помечены как «посещенные» для предотвращения повторного посещения.

Если вы можете принять имя файла скрипта, вы можете найти его. Пока что я действительно протестировал только следующую функцию в Firefox.

  function findMe(tag, attr, file) {
    var tags = document.getElementsByTagName(tag);
    var r = new RegExp(file   '$');
    for (var i = 0;i < tags.length;i  ) {
      if (r.exec(tags[i][attr])) {
        return tags[i][attr];
      }
    }
  };
  var element = findMe('script', 'src', 'scripts.js');

у меня есть это, которое работает в FF3, IE6 & Amp ; 7. Методы в загружаемых сценариях по требованию не доступны, пока не загружена страница завершено, но это все еще очень полезно.

//handle on-demand loading of javascripts
makescript = function(url){
    var v = document.createElement('script');
    v.src=url;
    v.type='text/javascript';

    //insertAfter. Get last <script> tag in DOM
    d=document.getElementsByTagName('script')[(document.getElementsByTagName('script').length-1)];
    d.parentNode.insertBefore( v, d.nextSibling );
}

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

var scripts = document.getElementsByTagName('script');
var thisScript = null;
var i = scripts.length;
while (i--) {
  if (scripts[i].src && (scripts[i].src.indexOf('yourscript.js') !== -1)) {
    thisScript = scripts[i];
    break;
  }
}
console.log(thisScript);