JavaScript中document.referrer的用法详解

技术驱动者

于 2023-10-09 19:18:34 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/CodeWhizZ/article/details/133712391

版权

js 专栏收录该内容

505 篇文章 ¥59.90 ¥99.00

订阅专栏

document.referrer是JavaScript中的属性，用于获取当前页面来源URL，有助于统计分析和跟踪用户行为。本文详细解释了其用法，并提供示例代码。通过document.referrer，可以获取完整URL或提取特定部分，实现根据来源页面定制页面行为。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

document.referrer是JavaScript中的一个属性，用于获取当前页面的引用页面（即来源页面）的URL。它提供了一种简单的方式来获取用户是从哪个页面跳转而来的。在本文中，我们将详细解释document.referrer的用法，并提供相应的源代码示例。

使用document.referrer可以在一个网页中获取用户是从哪个页面链接而来的。这对于统计分析、跟踪用户行为以及根据来源页面做出不同的操作都是非常有用的。

下面是一个简单的示例，展示了如何使用document.referrer来获取来源页面的URL：

// 检查是否有引用页面
if (document.referrer) {
   
  // 获取引用页面的URL
  var referrerURL = d

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

技术驱动者

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

【JavaScript】document 对象详解

lph159的博客

02-20

1316

在 Web 开发中，`document` 对象是连接 JavaScript 与网页内容的桥梁。通过操作 `document` 对象，开发者可以动态地访问和修改网页的结构、内容和样式，从而实现丰富的交互效果。

JavaScript 中的 Document 对象详解

最新发布

读心悦

05-18

713

JavaScript 中的 Document 对象是浏览器中 HTML 文档的入口点，代表整个页面，是 DOM（文档对象模型）的核心。它提供了访问和修改页面内容、处理事件、操作 CSS 样式等功能。Document 对象可以表示不同类型的文档，如 HTML、XML 和 SVG 文档。其基本属性包括文档元信息（如 URL、标题、字符编码等）、文档结构引用（如 <html>、<body> 等元素）以及文档状态（如加载状态）。通过 Document 对象，开发者可以选择和查找元素、创建和修

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

document.referrer 用法

quxiuer

04-30

2363

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

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

weixin_33969116的博客

02-21

1258

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

Document.referrer

huxyc的博客

01-18

3195

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

浅析document.referrer

driftcloudy的专栏

04-04

426

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

js 中document.referrer

LCRxxoo的博客

09-21

1081

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

document.referrer 详解

larry_liujunwei的博客

01-10

1万+

项目一个需求，单点登录，从oa系统到我们系统，用户如果登录了不需要再次登录，怎么判断用户在oa过来的。解决方案：javascript 有一个可以获取前一页面的URL地址的方法 document.referrer 无法获取 referrer 信息的情况下面的场景无法获得 referrer 信息直接在浏览器中输入地址使用location.reload()刷新（location.hre...

Javascript document.referrer判断访客来源网址

coldriversnow的专栏

05-26

721

今天遇到一个蛮有趣的问题，由于公司与一些厂商有合作关係，因此双方的网站中也都会交换连结，当今天合约也终止后，但对方始终一直没把连结的部分下掉时，这有时会产生一些不必要的误会，让一般的使用者认为双方还有合作关係，固然说这样子可赚到一些流量，但相对的也造成了一些误解，因此上头则希望能否去判断使用从它站连来时，就把它拒绝在门外，这让梅干退了三步，原本以为要从主机来作设定，上网找了一些文件后，才发现只要用简单几行的javascript，就可抓到使用的来源，以及作出一些防范的措施。

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

IT全栈华强工作室

09-20

9015

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

document.referrer

用法之妙，存乎一心。

09-18

866

document.referrer

document.referer的使用

weixin_34060741的博客

02-14

336

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

关于document.referrer

weixin_30414635的博客

02-11

203

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

详谈javascript中document.referrer的兼容性

热门推荐

flyingpig2016的博客

11-23

1万+

遇见了，却来不及相识；相识了，却来不及熟悉；熟悉了，却还是要说再见。既然每天都见面，为何不提前熟悉一下呢？读书是为了明理，我们还是带着问题来了解referrer的重要性和用途吧！一：什么是referrer？ 1. referrer中文意思是：来源，推荐人。网络意义是指网站的来路，又称“来源”，HTTPReferrer是header的一部分，当浏览器向web服务器发送请求的时候

document.referrer 深入剖析

青天诀的专栏

04-07

2218

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

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

zj19880814的专栏

09-02

1342

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

深入理解document.referrer的用法

weixin_42943586的博客

06-06

1120

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

JavaScript 中的document与window对象详解

"这篇文档主要介绍了JavaScript中的两个核心对象——document对象和window对象，它们是JavaScript操作网页内容和页面交互的基础。" 文档详细内容: **document对象**是HTML文档的全局对象，它提供了访问和操作网页...