The DOM referrer property in HTML is used to return the URI of the page that linked to the current page. If the user navigates to the page directly or through a bookmark, then this value is an empty string.
Syntax:
document.referrer
Below program illustrates the referrer property in HTML:
Example: There are 3 pages which link each other and specify their referrer property below.
page1.html
<!DOCTYPE html>
<html>
<head>
<title>Referrer Property</title>
</head>
<body>
<h1 style="color: green;">GeeksForGeeks</h1>
<h2>Page 1</h2>
<p>Click on the below links to go to the other pages</p>
<a href="page2.html">Go to Page 2</a>
<a href="page3.html">Go to Page 3</a>
<p>
<b>You are referred to this page by:</b>
</p>
<div class="referrer"></div>
<script>
// access the referrer property
let referrer = document.referrer;
// replace div with the referrer link
document.querySelector('.referrer').innerHTML =
referrer;
</script>
</body>
</html>
|
page2.html
<!DOCTYPE html>
<html>
<head>
<title>Referrer Property</title>
</head>
<body>
<h1 style="color: green;">GeeksForGeeks</h1>
<h2>Page 2</h2>
<p>Click on the below links to go to the other pages</p>
<a href="page1.html">Go to Page 1</a>
<a href="page3.html">Go to Page 3</a>
<p>
<b>You are referred to this page by:</b>
</p>
<div class="referrer"></div>
<script>
// access the referrer property
let referrer = document.referrer;
// replace div with the referrer link
document.querySelector('.referrer').innerHTML =
referrer;
</script>
</body>
</html>
|
page3.html
<!DOCTYPE html>
<html>
<head>
<title>Referrer Property</title>
</head>
<body>
<h1 style="color: green;">GeeksForGeeks</h1>
<h2>Page 3</h2>
<p>Click on the below links to go to the other pages</p>
<a href="page1.html">Go to Page 1</a>
<a href="page2.html">Go to Page 2</a>
<p>
<b>You are referred to this page by:</b>
</p>
<div class="referrer"></div>
<script>
// access the referrer property
let referrer = document.referrer;
// replace div with the referrer link
document.querySelector('.referrer').innerHTML =
referrer;
</script>
</body>
</html>
|
Output #1
Navigating to the first page. The string returned is empty as we have opened this page directly.
Output #2
After clicking on the
‘Page 2’ link from Page 1.
Output #3
After clicking on the
‘Page 3’ link from Page 2.
Supported Browsers: The browser supported by DOM referrer property are listed below:
- Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
08 Jun, 2023
Like Article
Save Article