Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM referrer Property

  • Last Updated : 25 Jul, 2019

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.



Directly navigating to first page

Output #2

After clicking on the ‘Page 2’ link from Page 1.

After Clicking 2 from 1

Output #3

After clicking on the ‘Page 3’ link from Page 2.

After Clicking 3 from 2

Supported Browsers: The browser supported by DOM referrer property are listed below:

  • Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :