JS get previous access page URL address document.referrer Practice 2

First, JS gets the URL address of the previous access page Document.referrer

To get the URL address of the previous access page the front and back languages are available, for example PHP is $_SERVER[‘HTTP_REFERER‘] , JavaScript is document.referrer .

We usually develop, although dealing with URLs is more frequent, but it seems to be seldom used document.referrer . At first I thought it was a poor compatibility, and then the test found IE7 support, it is strange, why document.referrer not use much?

I thought about it for a few reasons:

1. Back-end small partners to help us to solve the relevant needs;
2. Only some access statistics scripts are very concerned about the URL address of the last access page;
3. If the function that we want to implement is to go back to the previous page, you can use history.go(-1) or history.back() we don't need to know what the last access page specifically addresses.

The combination of the above points, resulting in normal development rarely used document.referrer .

But recently I made a mobile project, which I used for the first time in a formal project document.referrer , to share with you some of the relevant practices.

The scenario is that, whether the mobile is a native app or a traditional Web page, returning to the previous page is a more intense requirement, as shown below:

Almost all of the inside pages have a button that returns to the previous page, such as this page (click Experience).

This returns the relevant HTML code for the previous page as follows:

<a href= "Javascript:history.go ( -1)" class= "Header-back jsback" > Back </a>

In most scenarios, the above approach can meet our interaction needs, but in some cases the above code is a bit more powerful and less angry because the current page referrer does not always exist.

For example, the user is through the sharing, directly into the inside page, at this time there is no previous page, the return button and how to click No response, it will make the user is very strange, nine to Ten will think that is the implementation of the bug, it will let users have doubts about the quality of the product, the problem can be big.

How to do it! Then I thought of a trick, that is, if the browser does not have a previous page source information, we will return the link to the button to change the link to the home page, so no matter when the user click the Back button will be responsive, and return to the homepage is logically reasonable. And here to determine whether there is no source information is used here document.referrer , when the browser does not get the source information of the previous page, document.referrer the return value is an empty string ‘‘ , so, there is similar to the following code:

if (document.referrer = = = ") {    //does not have source page information, change to the homepage URL address    $ ('. Jsback '). attr (' href ', '/');}

Thus, the logic of the return button is seamless.

Second, which scenario can not get the previous page referrer information

1. Enter the address directly in the browser's address bar;
2. Use location.reload() Refresh ( location.href or location.replace() refresh with information);
3. In the dialog box, click the link to enter your own browser;
4. Scan the code into the QQ or browser;
5. open a page directly in a new window; 2017.8.3 Update The new version of the Chrome test, the new window page still hasdocument.referrer
6. From the HTTPS website directly into an HTTP protocol website (Chrome under the Pro test);
7. aLabel Settings rel="noreferrer" (compatible with ie7+);
8. metatag to control not to let the browser send referer ;

   For example:

   <meta content= "Never" name= "referrer" >

   Compatibility such as:
   

   iOS browser is still using the old version of the canonical values, including:,, never always origin , default . For Android browsers, version 5.0 starts to support. Basically, on the mobile side, the use of meta tags to control referer the transmission of information can already be used in the actual project.

9. Wait a minute.

Some people may be eager to know how to get the website from HTTPS directly into an HTTP protocol website also has document.referrer information, this aspect is not my good place, so I also do not know how to solve this problem, perhaps need server configuration over there with Dot what.

Updated on the following day
The following are the insights of a small new colleague:

HTTPS turns off HTTP referrers to HTTP websites. (The default is off, for security reasons.) )
Open the words in Meta settings, probably now the popular latest version of the browser compatible will be better!
Reference:

Http://smerity.com/articles/2013/where_did_all_the_http_referrers_go.html

The official says:

https://www.w3.org/Protocols/rfc2616/rfc2616-sec15.html#sec15.1.3

JS get previous access page URL address document.referrer Practice 2