How may I reference the script tag that loaded the currently-executing script

Question

How can I reference the script element that loaded the javascript that is currently running   Here s the situation  I have a  master  script being loaded high in the page  first thing under the HEAD tag    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN    http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  xml lang  en  lang  en  gt   lt head gt   lt script type  text javascript  src  scripts js  gt  lt  script gt    There is a script in  scripts js  which needs to be able to do on-demand loading of other scripts  The normal method doesn t quite work for me because I need to add new scripts without referencing the HEAD tag  because the HEAD element hasn t finished rendering   document getElementsByTagName  head   0  appendChild v     What I want to do is reference the script element that loaded the current script so that I can then append my new dynamically loaded script tags into the DOM after it    lt script type  text javascript  src  scripts js  gt  lt  script gt  loaded by scripts js-- gt  lt script type  text javascript  src  new script1 js  gt  lt  script gt  loaded by scripts js -- gt  lt script type  text javascript  src  new script2 js  gt  lt  script gt

User · Answer

It must works at page load and when an script tag is added with javascript  ex  with ajax    lt script id  currentScript  gt  var  this   document getElementById  currentScript     this setAttribute  id              lt  script gt

User · Answer

Probably the easiest thing to do would be to give your scrip tag an id attribute

User · Answer

How to get the current script element   1  Use document currentScript  document currentScript will return the  lt script gt  element whose script is currently being processed     lt script gt  var me   document currentScript   lt  script gt    Benefits   Simple and explicit  Reliable  Don t need to modify the script tag Works with asynchronous scripts  defer  amp  async  Works with scripts inserted dynamically   Problems   Will not work in older browsers and IE  Does not work with modules  lt script type  module  gt    2  Select script by id  Giving the script an id attribute will let you easily select it by id from within using document getElementById       lt script id  myscript  gt  var me   document getElementById  myscript     lt  script gt    Benefits   Simple and explicit  Reliable  Almost universally supported Works with asynchronous scripts  defer  amp  async  Works with scripts inserted dynamically   Problems   Requires adding a custom attribute to the script tag id attribute may cause weird behaviour for scripts in some browsers for some edge cases   3  Select the script using a data-  attribute  Giving the script a data-  attribute will let you easily select it from within     lt script data-name  myscript  gt  var me   document querySelector  script data-name  myscript       lt  script gt    This has few benefits over the previous option    Benefits   Simple and explicit  Works with asynchronous scripts  defer  amp  async  Works with scripts inserted dynamically   Problems   Requires adding a custom attribute to the script tag HTML5  and querySelector   not compliant in all browsers Less widely supported than using the id attribute Will get around  lt script gt  with id edge cases   May get confused if another element has the same data attribute and value on the page    4  Select the script by src  Instead of using the data attributes  you can use the selector to choose the script by source    lt script src    example com embed js  gt  lt  script gt    In embed js   var me   document querySelector  script src    example com embed js        Benefits   Reliable Works with asynchronous scripts  defer  amp  async  Works with scripts inserted dynamically No custom attributes or id needed   Problems   Does not work for local scripts Will cause problems in different environments  like Development and Production Static and fragile  Changing the location of the script file will require modifying the script Less widely supported than using the id attribute Will cause problems if you load the same script twice   5  Loop over all scripts to find the one you want  We can also loop over every script element and check each individually to select the one we want    lt script gt  var me   null  var scripts   document getElementsByTagName  script   for  var i   0  i  lt  scripts length    i        if  isMe scripts i           me   scripts i            lt  script gt    This lets us use both previous techniques in older browsers that don t support querySelector   well with attributes  For example   function isMe scriptElem       return scriptElem getAttribute  src          example com embed js       This inherits the benefits and problems of whatever approach is taken  but does not rely on querySelector   so will work in older browsers   6  Get the last executed script  Since the scripts are executed sequentially  the last script element will very often be the currently running script     lt script gt  var scripts   document getElementsByTagName   script     var me   scripts  scripts length - 1     lt  script gt    Benefits   Simple  Almost universally supported No custom attributes or id needed   Problems   Does not work with asynchronous scripts  defer  amp  async  Does not work with scripts inserted dynamically

User · Answer

Follow these simple steps to obtain reference to current executing script block    Put some random unique string within the script block  must be unique   different in each script block  Iterate result of document getElementsByTagName  script    looking the unique string from each of their content  obtained from innerText textContent property     Example  ABCDE345678 is the unique ID     lt script type  text javascript  gt  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  lt  script gt    btw  for your case  you can simply use old fashioned document write   method to include another script  As you mentioned that DOM is not rendered yet  you can take advantage from the fact that browser always execute script in linear sequence  except for deferred one that will be rendered later   so the rest of your document is still  not exists   Anything you write through document write   will be placed right after the caller script   Example of original HTML page    lt  doctype html gt   lt html gt  lt head gt   lt script src  script js  gt  lt  script gt   lt script src  otherscript js  gt  lt  script gt   lt body gt anything lt  body gt  lt  html gt    Content of script js   document write   lt script src  inserted js  gt  lt  script gt       After rendered  the DOM structure will become   HEAD   SCRIPT script js   SCRIPT inserted js   SCRIPT otherscript js BODY

User · Answer

An approach for dealing with async  amp  deferred scripts is to leverage the onload handler- set an onload handler for all script tags and the first one which executes should be yours   function getCurrentScript callback      if  document currentScript        callback document currentScript       return        var scripts   document scripts    function onLoad         for  var i   0  i  lt  scripts length    i          scripts i  removeEventListener  load   onLoad  false             callback event target         for  var i   0  i  lt  scripts length    i        scripts i  addEventListener  load   onLoad  false          getCurrentScript function currentScript      window console log currentScript src

User · Answer

I ve got this  which is working in FF3  IE6  amp  7  The methods in the on-demand loaded scripts aren t available until page load is complete  but this is still very useful     handle on-demand loading of javascripts makescript   function url       var v   document createElement  script        v src url      v type  text javascript          insertAfter  Get last  lt script gt  tag in DOM     d document getElementsByTagName  script    document getElementsByTagName  script   length-1        d parentNode insertBefore  v  d nextSibling

User · Answer

How to get the current script element   1  Use document currentScript  document currentScript will return the  lt script gt  element whose script is currently being processed     lt script gt  var me   document currentScript   lt  script gt    Benefits   Simple and explicit  Reliable  Don t need to modify the script tag Works with asynchronous scripts  defer  amp  async  Works with scripts inserted dynamically   Problems   Will not work in older browsers and IE  Does not work with modules  lt script type  module  gt    2  Select script by id  Giving the script an id attribute will let you easily select it by id from within using document getElementById       lt script id  myscript  gt  var me   document getElementById  myscript     lt  script gt    Benefits   Simple and explicit  Reliable  Almost universally supported Works with asynchronous scripts  defer  amp  async  Works with scripts inserted dynamically   Problems   Requires adding a custom attribute to the script tag id attribute may cause weird behaviour for scripts in some browsers for some edge cases   3  Select the script using a data-  attribute  Giving the script a data-  attribute will let you easily select it from within     lt script data-name  myscript  gt  var me   document querySelector  script data-name  myscript       lt  script gt    This has few benefits over the previous option    Benefits   Simple and explicit  Works with asynchronous scripts  defer  amp  async  Works with scripts inserted dynamically   Problems   Requires adding a custom attribute to the script tag HTML5  and querySelector   not compliant in all browsers Less widely supported than using the id attribute Will get around  lt script gt  with id edge cases   May get confused if another element has the same data attribute and value on the page    4  Select the script by src  Instead of using the data attributes  you can use the selector to choose the script by source    lt script src    example com embed js  gt  lt  script gt    In embed js   var me   document querySelector  script src    example com embed js        Benefits   Reliable Works with asynchronous scripts  defer  amp  async  Works with scripts inserted dynamically No custom attributes or id needed   Problems   Does not work for local scripts Will cause problems in different environments  like Development and Production Static and fragile  Changing the location of the script file will require modifying the script Less widely supported than using the id attribute Will cause problems if you load the same script twice   5  Loop over all scripts to find the one you want  We can also loop over every script element and check each individually to select the one we want    lt script gt  var me   null  var scripts   document getElementsByTagName  script   for  var i   0  i  lt  scripts length    i        if  isMe scripts i           me   scripts i            lt  script gt    This lets us use both previous techniques in older browsers that don t support querySelector   well with attributes  For example   function isMe scriptElem       return scriptElem getAttribute  src          example com embed js       This inherits the benefits and problems of whatever approach is taken  but does not rely on querySelector   so will work in older browsers   6  Get the last executed script  Since the scripts are executed sequentially  the last script element will very often be the currently running script     lt script gt  var scripts   document getElementsByTagName   script     var me   scripts  scripts length - 1     lt  script gt    Benefits   Simple  Almost universally supported No custom attributes or id needed   Problems   Does not work with asynchronous scripts  defer  amp  async  Does not work with scripts inserted dynamically

User · Answer

Since scripts are executed sequentially  the currently executed script tag is always the last script tag on the page until then  So  to get the script tag  you can do   var scripts   document getElementsByTagName   script     var thisScriptTag   scripts  scripts length - 1

User · Answer

Here s a bit of a polyfill that leverages document CurrentScript if it exists and falls back to finding the script by ID    lt script id  uniqueScriptId  gt       function              var thisScript   document CurrentScript    document getElementByID  uniqueScriptId                your code referencing thisScript here           lt  script gt    If you include this at the top of every script tag I believe you ll be able to consistently know which script tag is being fired  and you ll also be able to reference the script tag in the context of an asynchronous callback   Untested  so leave feedback for others if you try it

User · Answer

Probably the easiest thing to do would be to give your scrip tag an id attribute

User · Answer

If you can assume the file name of the script  you can find it   I ve only really tested the following function in Firefox so far      function findMe tag  attr  file        var tags   document getElementsByTagName tag       var r   new RegExp file             for  var i   0 i  lt  tags length i            if  r exec tags i  attr              return tags i  attr                        var element   findMe  script    src    scripts js

User · Answer

I ve got this  which is working in FF3  IE6  amp  7  The methods in the on-demand loaded scripts aren t available until page load is complete  but this is still very useful     handle on-demand loading of javascripts makescript   function url       var v   document createElement  script        v src url      v type  text javascript          insertAfter  Get last  lt script gt  tag in DOM     d document getElementsByTagName  script    document getElementsByTagName  script   length-1        d parentNode insertBefore  v  d nextSibling

User · Answer

If you can assume the file name of the script  you can find it   I ve only really tested the following function in Firefox so far      function findMe tag  attr  file        var tags   document getElementsByTagName tag       var r   new RegExp file             for  var i   0 i  lt  tags length i            if  r exec tags i  attr              return tags i  attr                        var element   findMe  script    src    scripts js

User · Answer

Probably the easiest thing to do would be to give your scrip tag an id attribute

User · Answer

Consider this algorithm  When your script loads  if there are multiple identical scripts   look through document scripts  find the first script with the correct  src  attribute  and save it and mark it as  visited  with a data-attribute or unique className   When the next script loads  scan through document scripts again  passing over any script already marked as visited  Take the first unvisited instance of that script   This assumes that identical scripts will likely execute in the order in which they are loaded  from head to body  from top to bottom  from synchronous to asynchronous    function        var scripts   document scripts        Scan for this data-  attribute   var dataAttr    data-your-attribute-here      var i   0    var script    while  i  lt  scripts length        script   scripts i       if   your script here  js i test script src           amp  amp   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              This will scan through all the script for the first matching script that isn t marked with the special attribute   Then mark that node  if found  with a data-attribute so subsequent scans won t choose it  This is similar to graph traversal BFS and DFS algorithms where nodes may be marked as  visited  to prevent revisitng

User · Answer

Probably the easiest thing to do would be to give your scrip tag an id attribute

User · Answer

To get the script  that currently loaded the script you can use  var thisScript   document currentScript    You need to keep a reference at the beginning of your script  so you can call later  var url   thisScript src

User · Answer

Follow these simple steps to obtain reference to current executing script block    Put some random unique string within the script block  must be unique   different in each script block  Iterate result of document getElementsByTagName  script    looking the unique string from each of their content  obtained from innerText textContent property     Example  ABCDE345678 is the unique ID     lt script type  text javascript  gt  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  lt  script gt    btw  for your case  you can simply use old fashioned document write   method to include another script  As you mentioned that DOM is not rendered yet  you can take advantage from the fact that browser always execute script in linear sequence  except for deferred one that will be rendered later   so the rest of your document is still  not exists   Anything you write through document write   will be placed right after the caller script   Example of original HTML page    lt  doctype html gt   lt html gt  lt head gt   lt script src  script js  gt  lt  script gt   lt script src  otherscript js  gt  lt  script gt   lt body gt anything lt  body gt  lt  html gt    Content of script js   document write   lt script src  inserted js  gt  lt  script gt       After rendered  the DOM structure will become   HEAD   SCRIPT script js   SCRIPT inserted js   SCRIPT otherscript js BODY

User · Answer

I ve got this  which is working in FF3  IE6  amp  7  The methods in the on-demand loaded scripts aren t available until page load is complete  but this is still very useful     handle on-demand loading of javascripts makescript   function url       var v   document createElement  script        v src url      v type  text javascript          insertAfter  Get last  lt script gt  tag in DOM     d document getElementsByTagName  script    document getElementsByTagName  script   length-1        d parentNode insertBefore  v  d nextSibling

User · Answer

I was inserting script tags dynamically with this usual alternative to eval and simply set a global property currentComponentScript right before adding to the DOM    const old   el querySelector  quot script quot   0     const replacement   document createElement  quot script quot      replacement setAttribute  quot type quot    quot module quot      replacement appendChild document createTextNode old innerHTML      window currentComponentScript   replacement    old replaceWith replacement    Doesn t work in a loop though   The DOM doesn t run the scripts until the next macrotask so a batch of them will only see the last value set   You d have to setTimeout the whole paragraph  and then setTimeout the next one after the previous finishes   I e  chain the setTimeouts  not just call setTimeout multiple times in a row from a loop

User · Answer

Script are executed sequentially only if they do not have either a  defer  or an  async  attribute  Knowing one of the possible ID SRC TITLE attributes of the script tag could work also in those cases  So both Greg and Justin suggestions are correct   There is already a proposal for a document currentScript on the WHATWG lists   EDIT  Firefox   4 already implement this very useful property but it is not available in IE11 last I checked and only available in Chrome 29 and Safari 8   EDIT  Nobody mentioned the  document scripts  collection but I believe that the following may be a good cross browser alternative to get the currently running script   var me   document scripts document scripts length -1

User · Answer

I ve got this  which is working in FF3  IE6  amp  7  The methods in the on-demand loaded scripts aren t available until page load is complete  but this is still very useful     handle on-demand loading of javascripts makescript   function url       var v   document createElement  script        v src url      v type  text javascript          insertAfter  Get last  lt script gt  tag in DOM     d document getElementsByTagName  script    document getElementsByTagName  script   length-1        d parentNode insertBefore  v  d nextSibling

User · Answer

To get the script  that currently loaded the script you can use  var thisScript   document currentScript    You need to keep a reference at the beginning of your script  so you can call later  var url   thisScript src

User · Answer

I have found the following code to be the most consistent  performant  and simple   var scripts   document getElementsByTagName  script    var thisScript   null  var i   scripts length  while  i--      if  scripts i  src  amp  amp   scripts i  src indexOf  yourscript js       -1         thisScript   scripts i       break        console log thisScript

User · Answer

Consider this algorithm  When your script loads  if there are multiple identical scripts   look through document scripts  find the first script with the correct  src  attribute  and save it and mark it as  visited  with a data-attribute or unique className   When the next script loads  scan through document scripts again  passing over any script already marked as visited  Take the first unvisited instance of that script   This assumes that identical scripts will likely execute in the order in which they are loaded  from head to body  from top to bottom  from synchronous to asynchronous    function        var scripts   document scripts        Scan for this data-  attribute   var dataAttr    data-your-attribute-here      var i   0    var script    while  i  lt  scripts length        script   scripts i       if   your script here  js i test script src           amp  amp   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              This will scan through all the script for the first matching script that isn t marked with the special attribute   Then mark that node  if found  with a data-attribute so subsequent scans won t choose it  This is similar to graph traversal BFS and DFS algorithms where nodes may be marked as  visited  to prevent revisitng

User · Answer

I have found the following code to be the most consistent  performant  and simple   var scripts   document getElementsByTagName  script    var thisScript   null  var i   scripts length  while  i--      if  scripts i  src  amp  amp   scripts i  src indexOf  yourscript js       -1         thisScript   scripts i       break        console log thisScript

User · Answer

I was inserting script tags dynamically with this usual alternative to eval and simply set a global property currentComponentScript right before adding to the DOM    const old   el querySelector  quot script quot   0     const replacement   document createElement  quot script quot      replacement setAttribute  quot type quot    quot module quot      replacement appendChild document createTextNode old innerHTML      window currentComponentScript   replacement    old replaceWith replacement    Doesn t work in a loop though   The DOM doesn t run the scripts until the next macrotask so a batch of them will only see the last value set   You d have to setTimeout the whole paragraph  and then setTimeout the next one after the previous finishes   I e  chain the setTimeouts  not just call setTimeout multiple times in a row from a loop

User · Answer

An approach for dealing with async  amp  deferred scripts is to leverage the onload handler- set an onload handler for all script tags and the first one which executes should be yours   function getCurrentScript callback      if  document currentScript        callback document currentScript       return        var scripts   document scripts    function onLoad         for  var i   0  i  lt  scripts length    i          scripts i  removeEventListener  load   onLoad  false             callback event target         for  var i   0  i  lt  scripts length    i        scripts i  addEventListener  load   onLoad  false          getCurrentScript function currentScript      window console log currentScript src

User · Answer

Since scripts are executed sequentially  the currently executed script tag is always the last script tag on the page until then  So  to get the script tag  you can do   var scripts   document getElementsByTagName   script     var thisScriptTag   scripts  scripts length - 1

User · Answer

Here s a bit of a polyfill that leverages document CurrentScript if it exists and falls back to finding the script by ID    lt script id  uniqueScriptId  gt       function              var thisScript   document CurrentScript    document getElementByID  uniqueScriptId                your code referencing thisScript here           lt  script gt    If you include this at the top of every script tag I believe you ll be able to consistently know which script tag is being fired  and you ll also be able to reference the script tag in the context of an asynchronous callback   Untested  so leave feedback for others if you try it

User · Answer

Script are executed sequentially only if they do not have either a  defer  or an  async  attribute  Knowing one of the possible ID SRC TITLE attributes of the script tag could work also in those cases  So both Greg and Justin suggestions are correct   There is already a proposal for a document currentScript on the WHATWG lists   EDIT  Firefox   4 already implement this very useful property but it is not available in IE11 last I checked and only available in Chrome 29 and Safari 8   EDIT  Nobody mentioned the  document scripts  collection but I believe that the following may be a good cross browser alternative to get the currently running script   var me   document scripts document scripts length -1

User · Answer

It must works at page load and when an script tag is added with javascript  ex  with ajax    lt script id  currentScript  gt  var  this   document getElementById  currentScript     this setAttribute  id              lt  script gt

[javascript] How may I reference the script tag that loaded the currently-executing script?

Examples related to javascript

Examples related to element

Examples related to parent