how to know which web page is invoking an external javascript script

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

The JavaScript must be included in a page to be executed. For testing purposes only, you can get the page use this:

document.write(location.href);

In a production environment, store the location in a variable.

var loc = location.href;

Answer 2

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 1x1 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 www.otherpeopleswebsite.com is not allowed to make an AJAX call to 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.

Answer 3

The script can refer to document.location, which will always be built around the URL of the main page. Specifically, document.location.href will be the URL.

Thus:

if (document.location.href === 'http://www.cnn.com') {
  // being imported by CNN ...
}

or whatever.

Answer 4

Inside your javascript file you need an AJAX call to a script that will log the file name. The log could be to a database or a flat file. You need to send location.href (or a property of location that suits what you're looking for) as a parameter to your logging script.

Embedded in the Javascript file you'll want to attach the function to the windows onload or domready event, to assure that the AJAX call is executed. Make sure not to override the onload/domready event, but just to add it to the event stack. You'll need to lookup how to add/attach an event, if you don't know how to do this.

Note: instead of having a logging script, you could use SOAP or REST to do the logging.

Answer 5

When the script runs on a page you can create an alert (popup menu) to let you know it is on the page you are currently on:

alert('Im in your page being your s.js file');