JavaScript: REFERRER

The browser stores some information about HTTP request headers. They're useful for many purposes. One of the headers is the referral URL.

It's the previous referring URL of the current URL (you're at).

It can be a direct link (with an anchor element pointing to the current URL), or, nowadays you can highlight a text, browser then can interpret the string pattern whether it's a URL or not. When it's identified as URL (link), then if you right click on that highlighted text, there will be "Go to [the_highlighted_text_URL]" option on your browser.

For example

This post has links to another posts/URLs. If you go to any of those, then this URL will be the HTTP referer of the next post you're reading.

---

Legendary misspelling

It's supposed to be referer. With no double "r"s.

---

JavaScript

In JavaScript, we can get the HTTP referer object from visitor's browser using:

var URL_referer = document.referrer;

The variable URL_referer will have the string of the current HTTP referer.

It will be empty if the visitor comes from a bookmark, or directly typed the current URL, or you "hard reload" the current page. Or, the previous URL emptied (hide) the referral header part (server side).

JavaScript (HTML) Demo

---

The Demo Codes

<!--STYLING--> <style> .wrap_demo { text-align:center; margin:10px 0; } .demo_output { width:100%; padding:10px; font-size:18px; border-radius:8px; box-sizing:border-box; text-align:center; color:darkgreen; } .demo_output, .demo_btn { font-family:consolas,monaco,menlo,courier,monospace; } </style> <!--HTML elements--> <div class="wrap_demo"> <input type="text" placeholder="output" class="demo_output" id="demo_output" readonly="readonly"> </div> <div class="wrap_demo"> <button class="demo_btn" onclick="output_referer()">Find out where you're coming from</button> </div> <!--JavaScript--> <script> function output_referer() { var d = document, URL_referer = d.referrer, output = d.getElementById("demo_output"); if (!URL_referer) { // if empty output.value = "Empty: either you directly typed the URL or coming from a bookmark."; output.style.color = "#888"; } else { // if there's something in it output.value = URL_referer; } } </script>

---

How to accumulate bunch of referers as list?

You saw that kind of stuff, right? It's offered as a free widget, with the country flag and map sometimes.
They use Flash as the client side element widget so that the coding can't be read.

It's the combination of client and server side (mostly on server). We cannot do that purely on client side. Because we need to perform READ and WRITE to a particular database. The accumulative and the finding-out-the-geo-location processes.

For your information, the attribute [rel="nofollow"] in an anchor (link) element has nothing to do with this. That attribute is the "road sign" for scraper/crawler bots.

---

Other demo on Thor

• Get all headers via Python with basic request module and additional built-in Google App Engine module, there