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?
5 Answers
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.
Comments
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.
2 Comments
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.
8 Comments
XMLHttpRequest) are subject to same origin policy, so a page on someone else's server cannot make an ajax request back to your server. For this purpose you need to use something like JSONP.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;
7 Comments
document.write is only there for testing purposes. It could have easily been console.log or alert. No need to get pedantic about it.document.write at all is generally regarded as bad practice, and in this case it's almost certainly not what anybody would ever do with the page URL. This site is supposed to serve not only the direct needs of people asking questions, but also people looking for answers that are already posted. Thus, an "example" in an answer should be a good example.