Recommended method to locate the current script?

Question

I am writing a script that needs to add DOM elements to the page, at the place where the script is located (widget-like approach). What is the best way to do this?

Here are the techniques I am considering:

1. Include an element with an id="Locator" right above the script. Issues:
   • I don't like the extra markup
   • If I reuse the widget in the page, several elements will have the same "Locator" id. I was thinking about adding a line in the script to remove the id once used, but still...
2. Add an id to the script. Issues:
   • even though it seems to work, the id attribute is not valid for the script element
   • same issue as above, several elements will have the same id if I reuse the script in the page.
3. Use getElementsByTagName("script") and pick the last element. This has worked for me so far, it just seems a little heavy and I am not sure if it is reliable (thinking about deferred scripts)

4. document.write: not elegant, but seems to do the job.

5. [Edit] Based on the reply from idealmachine, I am thinking about one more option:

   • Include in the script tag an attribute, for example goal="tabify".
   • Use getElementsByTagName("script") to get all the scripts.
   • Loop through the scripts and check the goal="tabify" attribute to find my script.
   • Remove the goal attribute in case there's another widget in the page.

6. [Edit] Another idea, also inspired by the replies so far:

   • Use getElementsByTagName("script") to get all the scripts.
   • Loop through the scripts and check innerHTML to find my script.
   • At the end of the script, remove the script tag in case there's another widget in the page.

Answer 1

Out of the box : document.currentScript (not supported by IE)

Answer 2

I've worked for OnlyWire which provides, as their main service, a widget to put on your site.

We use the var scripts = document.getElementsByTagName("script"); var thisScript = scripts[scripts.length - 1]; trick and it seems to work pretty well. Then we use thisScript.parentNode.insertBefore(ga, thisScript); to insert whatever we want before it, in the DOM tree.

I'm not sure I understand why you consider this a "heavy" solution... it doesn't involve iteration, it's a pure cross-browser solution which integrates perfectly.

Answer 3

This works with multiple copies of same code on page as well as with dynamically inserted code:

<script type="text/javascript" class="to-run">
(function(self){
    if (self == window) {
        var script = document.querySelector('script.to-run');
        script.className = '';
        Function(script.innerHTML).call(script);
    } else {
        // Do real stuff here. self refers to current script element.
        console.log(1, self);
    }
})(this);
</script>

Answer 4

Either document.write or picking the last script element will work for synchronously loaded scripts in the majority of web pages. However, there are some options I can think of that you did not consider to allow for async loading:

• Adding a div with class="Locator" before the script. HTML classes has the advantage that duplicates are not invalid. Of course, to handle the multiple widget case, you will want to change the element's class name when done adding the HTML elements so you do not add them twice. (Note that it is also possible for an element to be a member of multiple classes; it is a space-separated list.)

• Checking the src of each script element can ensure that tracking code (e.g. Google Analytics legacy tracking code) and other scripts loaded at the very end of the page will not prevent your script from working properly when async loading is used. Again, to handle the multiple widget case, you may need to remove the script elements when done with them (i.e. when the desired code has been added to the page).

---

One final comment I will make (although you may already be aware of this) is that when coding a widget, you need to declare all your variables using var and enclose all your code within: (JSLint can help check this)

(function(){
    ...
})();

This has been called a "self-executing function" and will ensure that variables used in your script do not interfere with the rest of the Web page.

Answer 5

Whether you drop a <script> tag in or a <div class="mywidget">, you're adding something to the markup. Personally, I prefer the latter as the script itself is only added once. Too many scripts in the page body can slow down the page load time.

But if you need to add the script tag where the widget is going to be, I don't see what's wrong with using document.write() to place a div.

Answer 6

I just found another method that seems to answer my question:

How to access parent Iframe from javascript

Embedding the script in an iframe allows to locate it anytime, as the script always keeps a reference to its own window.

I vote this the best approach, as it'll always work no matter how many times you add the script to the page (think widget). You're welcome to comment.

What pushed me to consider iframes in the first place was an experiment I did to build a Google gadget.

Answer 7

In many cases this work well (hud.js is the name of the scipt):

var jsscript = document.getElementsByTagName("script"); 
for (var i = 0; i < jsscript.length; i++) { 
      var pattern = /hud.js/i; 
      if ( pattern.test( jsscript[i].getAttribute("src") ) )
      {
         var parser = document.createElement('a');
         parser.href = jsscript[i].getAttribute("src");
         host = parser.host; 
      }

 }

Answer 8

Also you can add individual script's name inside them.

• either inside some js-script

   dataset['my_prefix_name'] = 'someScriptName'
  

• or inside HTML - in the <script> tag

   data-my_prefix_name='someScriptName'
  

and next search appropriate one by looping over document.scripts array:

 ... function(){
    for (var i = 0, n = document.scripts.length; i < n; i++) {
        var prefix = document.scripts[i].dataset['my_prefix_name']
        if (prefix == 'whatYouNeed') 
           return prefix
    }
 }