在 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提交而来的上级页面地址的解决办法
基础教程推荐
- Ajax实现动态加载数据 2023-02-01
- vue离线环境如何安装脚手架vue-cli 2025-01-19
- 关于文字内容过长,导致文本内容超出html 标签宽度的解决方法之自动换行 2023-10-28
- CSS3的几个标签速记(推荐) 2024-04-07
- 浅谈Vue2和Vue3的数据响应 2023-10-08
- this[] 指的是什么内容 讨论 2023-11-30
- 浅析canvas元素的html尺寸和css尺寸对元素视觉的影响 2024-04-26
- js禁止页面刷新与后退的方法 2024-01-08
- 基于Vue制作组织架构树组件 2024-04-08
- JS前端广告拦截实现原理解析 2024-04-22
