Original link: Move back to the previous page, just need! Document.referrer detailed
The full text reads as follows:
Back to the previous page, on the PC side we can use: history.go(-1)
orhistory.back(),可以正常返回第一层。这样,我们不需要上一页的 url 具体是什么,只要使用 history 一般都没啥问题。
But on the mobile side, if you want to go back to the previous page. For example, from page A to page B, if b page want to return to a page, in order to prevent not jumping wrong, must have a < button, give it History.go (-1), return to the previous layer.
<a href= "Javascript:history.go ( -1)" class= "Header-back jsback" > Back </a>
That if we do not return to the previous page of the < button, on the mobile phone to return to the previous page, such as: from the share in, into the inside page, at this time, the inside page is the first page, it does not have a page, how to return? At this point the return button is unresponsive, not a good user experience, nine to ten people will mistakenly think it is a bug, this is definitely a problem of the pit dad.
Whether the mobile side is a native app or a traditional Web page, returning to the page is a strong requirement.
JavaScript has a way to get the URL address of the previous page:document.referrer
Sources of Document.referrer
- The Referrer property returns the URL of the document loaded into the current document "from W3cshcool", and if the current document is not accessed by a hyperlink, the URL of the current document is null, which allows the client's JavaScript to access the HTTP header;
- The referrer property, which we can get from the HTTP header
Compatibility of Document.referrer
Document.referrer IE7 are supported, it is relatively high compatibility, Android 5.0 start support, iOS support, PC Browser from the IE7 began to support, compatibility is not a big problem.
But there is a small problem, IE will actively clear the Referref property. In IE, use JavaScript to jump, for example, with window.location.href = ""; If Google does not use Document.referrer to fetch the HTTP referrer requested by the browser, IE is emptied. and other mainstream browser Firefox and Chrome will keep referrer, no way, have to judge, if it is IE browser, on the initiative to add a referrer. This principle is to the Internet Explorer page secretly added a link, and then automatically point this link, so referrer can be preserved.
var url = ' http://www.jb51.net '; 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 Bull x procedure
Solve the problem that the mobile side returns to the previous page, which is the question of sharing mentioned above? According to the "Zhang Xin Asahi" Great God method is, since the click on the previous page did not respond, let it go back to the home page, from the homepage and then into other sub-pages, there should be no problem.
- Depending on the source of the document.referrer to determine if there is a source information, if not, then back to the page:
if (typeof document.referrer = = = ") { //does not have the source page information, change to the homepage URL address $ ('. Jsback '). attr (' href ', '/');}
This way, when you click the Back button again, you can return to the first page.
- Depending on whether the URL of the Document.referrer source URL is the URL of the site, if you decide that it is a problem, then block all the information under that URL, such as not showing the picture. Can effectively prevent hotlinking, the current Baidu statistics, Google Ads statistics, CNZZ Statistics, are used this method.
Unable to get referrer information
The following scenario cannot obtain referrer information, the following first 8 belongs to "Zhang Xin Xu":
- Enter the address directly in the browser
- Use
location.reload()
Refresh ( location.href
or location.replace()
refresh with information)
- In the dialog box, click Enter your browser
- Scan the code into the browser or QQ
- Open a page directly in a new window
- From the HTTPS website directly into an HTTP protocol website (chrome under Pro test)
a
Label Settings rel="noreferrer"
(compatible with ie7+)
meta
tag to control not sending the browserreferer
- Click the Flash internal link
- Chrome4.0 below, IE 5.5+ the following return empty string
- Using the method of modifying location to navigate the page will result in the loss of referrer under IE, which may be a bug of IE.
- Cross-domain
<meta content= "Never" name= "referrer" >
How to solve the situation can not get referrer, there is no good way, try to avoid it.
-------------------------------------------------------------------------------the end of the original, I am a seemingly ordinary, A very meaningful dividing line---------------------------------------------------------------------
Basically, the text mentions the definition of the "referrer" property can return the URL of the document loaded into the current document, if the current document is not accessed through a hyperlink, then the URL of the current document is NULL, this property allows the client's JavaScript to access the HTTP header ", Probably read pretty well, in fact, it means,referrer can return a URL, which is the URL of the previous page. However, there are restrictions, the current page must be "loaded" on the previous page, such as <a> tag jump, JS jump. Server-side jumps are not possible.
Go: JavaScript gets previous access page