Document.referrer in JavaScript test results in various browsers_Basic knowledge

Some time ago, we needed to get the source of the page through JavaScript. This operation is very simple. You can get it by using document.referrer. However, there are still many unexpected situations in practical applications, which are briefly summarized here.

The first problem encountered is that after switching from the HTTPS page to the HTTP page, the value of document.referrer is empty. For security reasons, some important pages of many websites (such as Taobao's login page) use the HTTPS protocol. If a non-logged-in user clicks the link to page B (HTTP page) on page A (HTTP page), but page B requires the user to log in, it will jump to the login page (HTTPS page) first, and then jump back to B after the login is completed ( HTTP page), then you will find that document.referrer cannot be obtained on page B. In other words, if you want to restore the user access path based on the referrer, if there are HTTP pages and HTTPS pages in the path, then the path will be broken from HTTPS to HTTP.

The root cause of this problem is the browser's security policy. There seems to be no particularly good solution using JavaScript alone. A roundabout idea 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).

Except for this situation, can document.referrer be obtained normally when jumping to other pages? I searched and found here that someone compiled a list, but it was not comprehensive, for example, it did not include the dying IE6. So I did it myself, installed N browsers in the virtual machine, and tested various situations (this is really a physical job). The results are shown in the table below:

操作	IE6	IE7	IE8	IE9	Firefox	Chrome	Opera	Safari
直接在地址栏输入URL	“”	“”	“”	“”	“”	“”	“”	“”
从书签访问URL	“”	“”	“”	“”	“”	“”	“”	“”
从页面A点击超链接，跳转到页面B（target=”_self”）	√	√	√	√	√	√	√	√
从页面A点击超链接，跳转到页面B（target=”_blank”）	√	√	√	√	√	√	√	√
从页面A右键单击超链接，在新标签页中打开页面B	-	√	√	√	√	√	√	“”
从页面A右键单击超链接，在新窗口中打开页面B	√	√	√	√	√	√	√	“”
拖动链接到地址栏	“”	无法拖动	无法拖动	“”	“”	“”	“”	“”
拖动链接到标签栏	-	“”	“”	“”	“”	“”	“”	“”
使用浏览器的前进、后退按钮	√	√	√	√	√	√	√	√
JS 修改 location.href	“”	“”	“”	√	√	√	√	√
JS 使用 window.open	“”	“”	“”	“”	√	√	√	√
服务器重定向（302跳转）	定向之前的页面	定向之前的页面	定向之前的页面	定向之前的页面	定向之前的页面	定向之前的页面	定向之前的页面	定向之前的页面
页面 Meta Refresh	“”	“”	“”	“”	“”	转向页	转向页	转向页

"√" in the above table means that the referrer can be obtained normally, "" means that the referrer is empty.

Except for IE, all other browsers are the latest versions that can be downloaded from the official website. Safari tested both the Windows version and the Mac version, and the conclusion is the same.

There are also some situations that have not been tested, such as whether the referrer can be maintained in each browser when clicking Flash to jump.

Most of the situations in the above table are in line with expectations, but there seem to be a few things that need attention:

1. In Safari, when you right-click to open a link, the referrer will be lost;
2. In IE, the referrer will be lost when modifying location.href or using window.open to open the page (IE 9 is an exception, using location.href to jump will not lose the referrer);
3. When using meta jump, the referrer will be lost under IE/Firefox.

Finally, a simple conclusion is: if you need to access the source through document.referrer collection page, it is best not to use JS to jump or open a new window, nor to use meta to jump.