The document.referrer in JavaScript tests the results in various browsers

  • 2020-03-30 03:33:56
  • OfStack

Some time ago, we needed to get the source of the page through JavaScript. This operation is very simple, which can be obtained by using document.referrer. However, there are a lot of exceptions in practice, so here's a quick rundown.

The first problem is that the value of the document.referrer is empty when you go from an HTTPS page to an HTTP page. For security reasons, many sites use HTTPS for important pages, such as taobao's login page. If A non-logged user clicks on the link to page B on page A (HTTP page), but page B requires the user to log in, he or she jumps to the login page (HTTPS page) and then jumps back to B (HTTP page) after logging in. You will find that the document.referrer is not available on page B. That is, if you want to restore the user's access path based on the referrer, if the path has an HTTP page and an HTTPS page, the path will break from HTTPS to HTTP.

The root cause of this problem is the browser's security policy, and JavaScript alone does not seem to be a particularly good solution. A roundabout approach is to use window.name, write the url of the current page to window.name on the HTTPS page, and then read it on the next page (HTTP page).

In addition to this case, are all other page jumps able to fetch the document.referrer properly? I did a bit of searching and found that someone had put together a list, but it wasn't comprehensive, such as not including the pendant IE6. So I did it myself, installed N browsers in the virtual machine, and tested all the cases (which is really a physical job). The results are shown in the following table:

operation IE6 IE7 IE8 IE9 Firefox Chrome Opera Safari
Type directly in the address bar URL "" "" "" "" "" "" "" ""
Access from bookmarks URL "" "" "" "" "" "" "" ""
From the page A Click the hyperlink to go to the page B ( target= " _self "). Square root Square root Square root Square root Square root Square root Square root Square root
From the page A Click the hyperlink to go to the page B ( target= " _blank "). Square root Square root Square root Square root Square root Square root Square root Square root
From the page A Right-click the hyperlink to open the page in the new TAB B - Square root Square root Square root Square root Square root Square root ""
From the page A Right-click the hyperlink to open the page in a new window B Square root Square root Square root Square root Square root Square root Square root ""
Drag the link to the address bar "" Can't drag Can't drag "" "" "" "" ""
Drag the link to the TAB bar - "" "" "" "" "" "" ""
Use the browser's forward and back buttons Square root Square root Square root Square root Square root Square root Square root Square root
JS Modify the location.href "" "" "" Square root Square root Square root Square root Square root
JS use window.open "" "" "" "" Square root Square root Square root Square root
Server redirection ( 302 Jump) Redirect to the previous page Redirect to the previous page Redirect to the previous page Redirect to the previous page Redirect to the previous page Redirect to the previous page Redirect to the previous page Redirect to the previous page
page Meta Refresh "" "" "" "" "" Turn to page Turn to page Turn to page

The " Square root " in the above table indicates that the referrer is normally fetched, and "" indicates that the referrer is empty.

With the exception of Internet explorer, all browsers are the latest available for download on the official web site, and Safari was tested both for Windows and Mac, with the same results.

In addition, there are some untested cases, such as whether the referrer can be maintained under each browser when clicking Flash jump.

Most of the above is as expected, but there seem to be a few caveats:

1. In Safari, right-clicking on a link will lose the referrer;
2. In IE, if you modify location.href or use window.open to open the page, you will lose the referrer (IE 9 has a little exception, a location.href jump will not lose the referrer);
3. When using a meta jump, the referrer will be lost in IE/Firefox.


Related articles: