程序员人生网站导航

通过document.referrer判断页面是链接调整还是新打开以及来源

栏目：互联网时间：2014-10-08 08:00:00

业务需求：

1、复制链接或者QQ中在浏览器中新打开的链接，点击“返回”跳转到列表页；

2、从列表页链接调整进的店“返回”执行浏览器的“返回”动作，好处是能直接定位到列表页上次浏览的位置。

function ClickBack(){ if(document.referrer==""||document.referrer.indexOf("cases")==-1){ //返回到案例列表 window.location.href='/cases/'; }else{ history.back(); } }

若新打开的页面document.referrer值即为“”

兼容性测试：

操作	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	“”	“”	“”	“”	“”	转向页	转向页	转向页

上表中的“√”表示能正常取到 referrer，”” 表示 referrer 为空。

测试结果来自网络，作者不详，感谢分享。

操作	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	“”	“”	“”	“”	“”	转向页	转向页	转向页

上表中的“√”表示能正常取到 referrer，”” 表示 referrer 为空。

------分隔线----------------------------

上一篇 网站搭建基础知识、流程概括

下一篇 菜鸟学习Spring――第一个例子

------分隔线----------------------------