Detailed answer to the usage of document.referrer in JavaScript (code attached)

This article mainly introduces you to the usage of document.referrer in JavaScript. The article introduces it in detail through sample code, which has certain reference and learning value for everyone. Friends who need it can take a look below.

Preface

In JavaScript, the document object has many attributes, among which there are three attributes related to requests for web pages, which are respectively It is URL, domain and referrer.

The URL attribute contains the complete URL of the page, the domain attribute only contains the domain name of the page, and the referrer attribute stores the URL of the page linked to the current page.

The first two are easy to understand, and the referrer attribute is simply the URL of the previous page. So what is the specific use of this attribute?

In H5 pages, we often add a return to the previous page button in the header, like the following:

Page Header

Click on the element on the left to return to the previous page. We can simply write a JS code:

var back = document.getElementById('back'); //假设该返回按钮元素id为back
back.onclick = function(){
 history.back(); //返回上一个页面，也可以写成history.go(-1)
};

Or there is a simpler way, without writing so much JS, just use the a tag to directly represent the return button element:

<a id="back" href="javascript:history.back();" rel="external nofollow" ></a>

Huh? Having said so much above, I still haven’t mentioned the use of document.referrer! Don’t worry, the previous step is just a foreshadowing, let’s get to the point~~~

Although it feels like the above has basically implemented the function of returning to the previous page, there is one situation that has not been taken into account (we programmers still have to Be more rigorous), that is, what if the page was shared by someone else instead of being entered through other pages? Then clicking the button will not cause any reaction, because there is no history record in the history object at this time, which means that this is the first page browsed when your browser window is opened.

In order to optimize the user experience, there are usually two solutions here. One is to not display the return to previous page button when opening the first page, and the other is to click directly to jump to the homepage of the website. This allows you to choose the appropriate solution based on product requirements.

Assuming that the first option is chosen, we can write a JS paragraph like this:

if(document.referrer){
 back.style.display = 'block'; //默认让其隐藏，当referrer属性不为空时让其显示
}

Conclusion

In fact, the way to determine whether the current page is the page that the user initially opened is not only by judging the referrer attribute, but also by whether history.length is zero.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

javascriptdocument.referrerBrowser support, failure summary_basic knowledge

document.referrer in JavaScript# Test results in various browsers_Basic knowledge

javascript document.referrer Usage_ javascript skills

The above is the detailed content of Detailed answer to the usage of document.referrer in JavaScript (code attached). For more information, please follow other related articles on the PHP Chinese website!