在 JavaScript 代码中,可以使用 document.referrer 获取到引用当前页面的上级页面的地址,但是无法获取由 location.href 提交而来的上级页面的地址。在这种情况下,需要通过其他方式解决。
在 JavaScript 代码中,可以使用 document.referrer
获取到引用当前页面的上级页面的地址,但是无法获取由 location.href
提交而来的上级页面的地址。在这种情况下,需要通过其他方式解决。
一种可行的解决方法是在跳转链接的时候,将上级页面的地址作为参数传递到跳转的页面中。具体实现步骤如下:
- 在跳转链接中添加参数
<a href="http://example.com/my-page?referrer=http://previous-page.com">My Page</a>
referrer
参数的值就是上级页面的地址,这个地址可以使用 JavaScript 生成或者通过后端动态生成。
- 在接受参数的页面中获取上级页面的地址
const queryParams = new URLSearchParams(window.location.search);
const referrer = queryParams.get('referrer');
这段代码通过 URLSearchParams
对象获取到当前页面的 URL 参数,然后从参数中解析出 referrer
参数的值。
通过这种方法,我们就能够获取到由 location.href
提交而来的上级页面的地址了。
另一种可行的解决方法是使用 cookie 存储上级页面的地址。具体实现步骤如下:
- 在上级页面中设置 cookie
const referrer = window.location.href;
document.cookie = `referrer=${referrer}; path=/`;
这段代码将当前页面的地址设置为 referrer
的值,然后将其存储到 cookie 中,并设置 path
属性为根路径。
- 在接受 cookie 的页面中获取上级页面的地址
const cookies = document.cookie.split('; ');
const referrerCookie = cookies.find(cookie => cookie.startsWith('referrer='));
const referrer = referrerCookie ? referrerCookie.split('=')[1] : null;
这段代码首先通过 document.cookie
获取所有的 cookie,然后从中找到名为 referrer
的 cookie,最后获取到其值。
需要注意的是,获取到的 cookie 值是一个字符串,需要根据具体的使用场景进行解析。
通过这两种方法,我们就能够实现在 JavaScript 中获取由 location.href
提交而来的上级页面的地址。
本文标题为:关于取不到由location.href提交而来的上级页面地址的解决办法


基础教程推荐
- 「开源免费」基于Vue和Quasar的前端SPA项目crudapi后台管理系统实战之动态表单设计器(五) 2023-10-08
- js使用swiper实现层叠轮播效果实例代码 2023-12-01
- 微信小程序访问mysql数据库流程详解 2022-08-31
- VScode自动生成HTML的含义 2023-10-27
- uni-app如何实现点击按钮全屏播放视频 2023-08-29
- 一篇文章弄清楚Ajax请求的五个步骤 2023-02-23
- 详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐) 2023-12-12
- Angular获取ngIf渲染的Dom元素示例 2023-07-09
- 基于Cesium实现拖拽3D模型的示例代码 2023-12-20
- elementUI el-table 表格实现手动选择展示列 2022-10-30