document.referrer 详解

最新推荐文章于 2025-10-15 16:52:31 发布

原创最新推荐文章于 2025-10-15 16:52:31 发布 · 1.3w 阅读

21 ·

CC 4.0 BY-SA版权

html/css 专栏收录该内容

1 篇文章

订阅专栏

探讨了在项目中实现单点登录(SSO)功能，使用户从OA系统跳转到目标系统时无需二次登录的技术方案。介绍了通过JavaScript的document.referrer属性来判断用户是否从OA系统过来的方法，并列举了无法获取referrer信息的各种情况。

项目一个需求，单点登录，从oa系统到我们系统，用户如果登录了不需要再次登录，怎么判断用户在oa过来的。

解决方案：javascript 有一个可以获取前一页面的URL地址的方法 document.referrer

无法获取 referrer 信息的情况

下面的场景无法获得 referrer 信息

直接在浏览器中输入地址
使用location.reload()刷新（location.href或者location.replace()刷新有信息）
在微信对话框中，点击进入微信自身浏览器
扫码进入微信或QQ的浏览器
直接新窗口打开一个页面
从https的网站直接进入一个http协议的网站（Chrome下亲测）
a标签设置rel="noreferrer"（兼容IE7+）
meta标签来控制不让浏览器发送referer
点击 flash 内部链接
Chrome4.0以下，IE 5.5+以下返回空的字符串
使用修改 Location 进行页面导航的方法，会导致在IE下丢失 referrer，这可能是IE的一个BUG
跨域

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

larry_liujunwei

关注关注

2
点赞
踩
21

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

windows和document方法详解.doc

10-11

- `referrer`: 引导用户到达当前文档的链接文档的URL。 - `title`: 文档的标题。 - `url`: 文档的URL。 - `vlinkColor`: 已被访问过的链接的文本颜色。 2. **方法**： - `captureEvents`: 让文档捕获指定类型...

JavaScript中document.referrer的用法详解

12-08

前言在JavaScript中，document对象有很多属性，其中有3个与对网页的请求有关的属性，它们分别是URL、domain和referrer。 URL属性包含页面完整的URL，domain属性中只包含页面的域名，而referrer属性中则保存着链接到当前页面的那个页面的URL。前面两个很好理解，而referrer属性简单来说就是上一个页面的URL。那么这个属性具体有什么用处呢？在H5页面中，我们经常要在头部加个返回上一个页面按钮，就像下面这样的：页面头部点击左侧的元素可以返回到上一个页面，我们可以简单写一段JS代码： var back = document.getEle

1 条评论您还未登录，请先登录后发表或查看评论

移动端返回上一页，刚需！document.referrer 详解

weixin_33969116的博客

02-21

1279

返回上一页，在PC端我们可以使用：history.go(-1)或者history.back()，可以正常返回第一层。这样，我们不需要上一页的 url 具体是什么，只要使用 history 一般都没啥问题。但是在移动端，如果想要返回上一页。比如从A页面跳到B页面，如果B页面想返回A页面，为了防止不会跳错，必须要有一个 < 按钮，给它加 history.go(-1) ，返回上一层。 &...

Document.referrer

huxyc的博客

01-18

3231

Document.referrer属性返回URI链接到此页面的页面。 Syntax var referrer = document.referrer; Value 如果用户直接导航到页面（不是通过链接，而是通过使用书签），则该值为空字符串。由于此属性仅返回一个字符串，因此它不会授予对引用页的文档对象模型（DOM）访问权限。在<iframe>中，最初将设置为与父窗口的Window.location的href相同的值Window.location。 ...

浅析document.referrer

driftcloudy的专栏

04-04

450

在流量统计服务中都有Traffic source这个功能。Traffic source是针对访次级别的概念，换句话说，当访次建立的时候，landing page的流量来源即是该访次的Traffic source。虽然Traffic source有很多种，不过不幸的是依据现在JS，获得Traffic source的途径只有两种——document.referrer、window.opener.更不幸...

document.referrer 用法

quxiuer

04-30

2391

描述： document对象的referrer属性，返回导航到当前网页的超链接所在网页的URL。举例： 1. a.html文件内容如下：浏览b.html 2. b.html文件中的内容如下： document.write(document.referrer);

23、JavaScript 中的 window、document 和 element 对象详解

最新发布

k8l9m0n的博客

10-15

本文详细介绍了JavaScript中的window、document和element对象，涵盖其属性、方法及实际应用示例。内容包括页面加载延迟提示、窗口大小调整、document对象的常用属性与方法（如cookie操作、元素查询）、element对象的属性与操作方法（如样式控制、节点增删），并提供了多个实用代码示例。文章还总结了开发中的兼容性、性能和安全注意事项，帮助开发者更高效地操作网页内容与交互。

document.referer的使用

weixin_34060741的博客

02-14

353

描述： document对象的referrer属性，返回导航到当前网页的超链接所在网页的URL。举例： 1. a.html文件内容如下： <a href="b.html">浏览b.html </a> 2. b.html文件中的内容如下： <body> <script type="text/javasc...

document.referrer详解

2301_82319473的博客

07-22

854

是一个只读属性，返回的是浏览器从哪个页面链接访问了当前页面。例如，如果用户点击了一个链接从A页面跳转到了B页面，那么在B页面中将会返回A页面的URL。// 输出来源页面的URL。

document.referrer

12-27

301

Referrer的重要性 HTTP 请求中有一个referer的报文头，用来指明当前流量的来源参考页。例如在www.sina.com.cn/sports/上点击一个链接到达 cctv.com首页，那么就referrer就是www.sina.com.cn/sports/了。在Javascript中，我们可以通过 document.referrer来获取同样的信息。通过这个信息，我们就...

关于document.referrer

weixin_30414635的博客

02-11

218

document.referrer这个方法是获取导航到这个网页的超链接的url，在index.jsp中的代码： <a href="./MyJsp.jsp">浏览MyJsp</a> 在MyJsp.jsp中的代码： <script type="text/javascript"> var url=document.referr...

Vue进阶（七十九）：应用 postMessage 实现父子跨域通信

IT全栈华强工作室

09-20

9283

1.子向父通信 parent.html window.addEventListener('message',function(e){ console.log(e.data); if(e.data.msg==='xxx'){ //一些自己的业务逻辑 } }); child.html window.parent....

document.referrer 深入剖析

青天诀的专栏

04-07

2246

本文描述了一个关于 http 协议中 referer 的 metadata 参数的提议，使用这个 metadata 参数，html 文档可以控制 http 请求中的 referer ，比如是否发送 referer、只发送 hostname 还是发送完整的 referer 等。虽然有一些方法可以控制 referer ，比如 flash，以及一些 js 的 tricks，但是本文中描述的是另外一番景象。

document.referer

weixin_33875839的博客

12-15

323

一、whatdocument对象的referrer属性，返回导航到当前网页的超链接所在网页的URL。简而言之，返回上一页的URL地址！二、attention 需要在服务器环境中才有返回值，本地打开只能得到空字符串三、example我开启了本地服务器测试，如何开启可参考here 目录结构 a.html b.html ...

document.referrer 属性（记录来访的URL）

zj19880814的专栏

09-02

1382

Document对象的referrer属性 referrer属性是一个比较有趣的属性，它存放使用户连接到当前文档的文档的URL（比如，用户通过超链接a，连接到b,那么这个属性记录的是就是a的url地址，如果当前文档不是通过超连接访问的，那么就为null,. 用法： 1. 将该属性保存在页面表单内的一个隐藏域中，当用户提交这个表单时，就可以将这个引用者的数据保存在服务器上，...

js 中document.referrer

LCRxxoo的博客

09-21

1100

这属性是读取请求头中的,如下图

document.referrer 兼容性

heni6560的博客

12-27

1580

背景我今天用document.referrer获取上一个链接，emmm....完美解决。但是第二天，在别人电脑上发现始终为空。我的浏览器IE版本11.535.18362，他的电脑是IE11.0.9xxxx，我也想拒绝IE。 document.referrer 兼容性首先遇到的问题，是从 HTTPS 页面转到 HTTP 页面后，document.referrer 的值为空。出...