document. referrer in js realizes that the mobile terminal returns to the previous page

  • 2021-07-22 08:55:22
  • OfStack

Back on page 1, on the PC side we can use either history. go (-1) or history. back () to return to Layer 1 normally. In this way, we don't need what url is on page 1, as long as we use history 1, there is no problem.

But on the mobile side, if you want to return to the previous page. For example, if you want to jump from A page to B page, if you want to return to A page from B page, you must have one in order to prevent you from jumping wrong < Button, add history. go (-1) to it, and return to the upper layer.

<a href="javascript:history.go(-1)" rel="external nofollow" class="header-back jsBack">返回</a>

So if we didn't go back to the < How to operate the button on the mobile phone to return to the previous page? For example, if you share it from WeChat, you will enter the inner page of WeChat. At this time, the inner page is the first page, and it does not have the previous page. How to return? At this time, clicking the return button is unresponsive, not a good user experience, and 89% of 10 people will mistakenly think it is BUG, which is definitely a pit dad's problem.

Whether it is a native app or a traditional web page, it is a strong demand to return to the previous page.

javascript has one way to get the URL address of the previous page: document. referrer

Source of document. referrer

The referrer attribute can return the URL of the document loaded with the current document [extracted from W3CSHCOOL]. If the current document is not accessed through hyperlinks, the URL of the current document is NULL, which allows the javascript of the client to access the HTTP header; The referrer attribute, which we can get from the http header

Compatibility of document. referrer

document. referrer IE7 is supported, and its compatibility is relatively high. Android 5.0 is supported, iOS is supported, and PC browser has been supported since IE7, so there is no big problem in compatibility.

However, there is a small problem, that is, IE will actively clear referref attributes. Use javascript as a jump in IE, such as window. location. href = ""; google If you use document. referrer, the browser requested HTTP referrer cannot be fetched because IE is empty. While other mainstream browsers Firefox and Chrome will keep referrer, so we have no choice but to judge that if it is an IE browser, we will take the initiative to add an referrer to it. This principle is to secretly add a link to the page of IE browser, and then click this link automatically, so referrer can be retained.


var url = 'https://www.ofstack.com'; 
if (/MSIE (\d+\.\d+);/.test(navigator.userAgent) || /MSIE(\d+\.\d+);/.test(navigator.userAgent)) 
{ 
 var referLink = document.createElement('a'); 
 referLink.href = url; 
 document.body.appendChild(referLink); 
 referLink.click(); 
} 
else 
{ 
 location.href = url; 
}

document. referrer's cattle X practice

To solve the problem that the mobile terminal returns to the previous page, is the problem of WeChat sharing mentioned above? According to "Zhang Xinxu", since there is no response when clicking on the last page, let it return to the home page and enter other sub-pages from the home page, which should be no problem.

1. Determine whether there is source information according to the source of document. referrer. If not, return to the home page:


if (typeof document.referrer === '') {
 //  When there is no source page information, change it to the home page URL Address 
 $('.jsBack').attr('href', '/');
}

In this way, when you click the return button again, you can return to the home page.

2. According to whether the source url of document. referrer is the url of the website, if it is judged that there is a problem with the origin of this url, all information under this url is shielded, such as preventing it from displaying pictures. It can effectively prevent chain theft. At present, Baidu statistics, google ads statistics and CNZZ statistics all use this method.

Unable to get referrer information

referrer information cannot be obtained in the following scenarios, and the first 8 items below belong to "Zhang Xinxu":

Enter the address directly in the browser Refresh with location. reload () (location. href or location. replace () refresh has information) In the WeChat dialog box, click to enter WeChat's own browser Scan the code to enter the browser of WeChat or QQ Open 1 page directly in a new window Go directly from the website of https to one website of http protocol (test under Chrome) a label setting rel= "noreferrer" (compatible with IE7 +) meta tag to control the browser not to send referer Click on the internal link of flash Below Chrome 4.0 and below IE 5.5 + return empty strings Using the method of modifying Location for page navigation will result in the loss of referrer under IE, which may be 1 BUG of IE Cross-domain

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

How to solve the problem of unable to obtain referrer, there is no good method, try to avoid it.


Related articles: