Question

An external javascript can be used by many Web pages. How to know which web page is using an external js script? For example, I’ve got a javascript script s.js. Is it possible that a function of s.js can check which page is using s.js?

Answer 1

location object has all the information about the URL the browser is currently on.

    hash        Returns the anchor portion of a URL
    host        Returns the hostname and port of a URL
    hostname    Returns the hostname of a URL
    href        Returns the entire URL
    pathname    Returns the path name of a URL
    port        Returns the port number the server uses for a URL
    protocol    Returns the protocol of a URL
    search      Returns the query portion of a URL

EDIT Now, to answer the question that you actually meant to ask and that is how to track which pages are using your javascript file. I think (and I haven’t implemented something like this before) is to use the same strategy as what the analytics sites use.

They all seem to use a variation of a tracking pixel where the browser downloads a script file (e.g. QuantServer – http://edge.quantserve.com/quant.js). The script then requests a 1×1 pixel from the google server and encodes the URL of the webpage into the address of the image. So for stackoverflow.com, the pixel URL is:

http://pixel.quantserve.com/pixel;r=3547206;fpan=0;fpa=P0-82955756-1264139666260;ns=0;url=http%3A%2F%2Fstackoverflow.com…. (I didn’t reveal the address as it my browser sends it as I don’t really know what it reveals about me 🙂 ).

As you can see, the site’s url is a part of the image url. On the server side you would need to have a handler that serves this image and logs the page address by extracting it from the image URL.

The reason for why this is an image and not an AJAX request is because AJAX requests are subject to browser XSS restrictions. Basically, a browser will not make an AJAX call to a website that is not the one serving the page. This means that a page on http://www.otherpeopleswebsite.com is not allowed to make an AJAX call to http://www.mywebsite.com. There is no such restrictions on images (or javascript files for that matter).

So a simple system for implementing something like this would do something to this effect:

//s.js
var oldLoad = window.onload;
window.onload = function(){
  if (oldLoad)
    oldLoad();
    var img = document.createElement('img');
    img.setAttribute('src', 'www.mysite.com/pixel?url=' + window.location.href);
}

On the server side, pixel handler would serve a 1x1px image, set the content type to the appropriate value (ie image/gif), extract the query string and log the URL. Depending on you server technology, there are many ways to implement that.