如何在 JavaScript 中获取上一个 URL？答案

【问题标题】：How to get the previous URL in JavaScript?如何在 JavaScript 中获取上一个 URL？
【发布时间】：2011-04-01 11:54:20
【问题描述】：

有没有办法在 JavaScript 中获取上一个 URL？像这样的：

alert("previous url is: " + window.history.previous.href);

有类似的吗？还是我应该把它存储在一个 cookie 中？我只需要知道，这样我就可以在没有锚点的情况下进行从前一个 URL 到当前 URL 的转换。

【问题讨论】：

标签： javascript

【解决方案1】：

document.referrer

在许多情况下，如果用户通过单击链接进入当前页面（而不是直接在地址栏中输入，或者我相信在某些情况下，通过提交表单），您会获得用户访问的最后一页的 URL ？）。由DOM Level 2 指定。 More here.

window.history 允许导航，但出于安全和隐私原因，不允许访问会话中的 URL。如果有更详细的 URL 历史记录，那么您访问的每个站点都可以看到您访问过的所有其他站点。

如果您正在处理在您自己的站点中移动的状态，那么使用其中一种常规会话管理技术可能会更脆弱，当然更有用：cookie 数据、URL 参数或服务器端会话信息。

【讨论】：

还有 document.referrer，如果您通过链接到达当前页面（但不是，例如，通过书签或在地址栏中输入）。
我最终将以前的网址存储在网站的 cookie 中，document.referrer 并不总是有效。 $.cookie("previousUrl", window.location.href, {path:"/"});.
您先生已将我从 JavaScript 的痛苦世界中拯救出来！
previous 不是推荐人。不要混淆他们
document.referrer 不保存最后一个 url 的哈希值...它只引用最后一个 url。

【解决方案2】：

如果你想在不知道 url 的情况下转到上一页，你可以使用新的 History api。

history.back(); //Go to the previous page
history.forward(); //Go to the next page in the stack
history.go(index); //Where index could be 1, -1, 56, etc.

但是你不能在不支持 HTML5 History API 的浏览器上操作历史堆栈的内容

欲了解更多信息，请参阅doc

【讨论】：

知道url，href = ''怎么办？
@summu 它存储在浏览器本身中
你能在 reactjs 上告诉我同样的事情吗？

【解决方案3】：

如果您正在编写一个 Web 应用程序或单页应用程序 (SPA)，其中路由发生在应用程序/浏览器中，而不是往返于服务器，您可以执行以下操作：

window.history.pushState({ prevUrl: window.location.href }, null, "/new/path/in/your/app")

然后，在您的新路由中，您可以执行以下操作来检索以前的 URL：

window.history.state.prevUrl // your previous url

【讨论】：

找不到 prevURL？怎么找到那个？我将需要历史记录中的两个三个前 url。 ?

【解决方案4】：

document.referrer 在所有情况下都与实际 URL 不同。

我有一个应用程序，我需要在其中建立一个包含 2 个框架的框架集。一个框架是已知的，另一个是我链接的页面。 document.referrer 似乎是理想的，因为您不必将实际文件名传递给框架集文档。

但是，如果您稍后更改底部框架页面然后使用history.back()，它不会将原始页面加载到底部框架中，而是重新加载document.referrer，结果框架集消失了，您又回到了原来的开始窗口。

我花了一点时间才明白这一点。所以在历史数组中，document.referrer 不仅是一个 URL，它显然也是引用窗口规范。至少，这是我目前能理解的最好方式。

【讨论】：

在我最新的测试中，'document.referrer' 现在只返回域名而不是完整的 URL 以避免跟踪。

【解决方案5】：

<script type="text/javascript">
    document.write(document.referrer);
</script>

document.referrer 可以满足您的目的，但它不适用于 IE9 之前的 Internet Explorer 版本。

它适用于其他流行的浏览器，如 Chrome、Mozilla、Opera、Safari 等。

【讨论】：

在 IE 9 中为我工作

【解决方案6】：

如果有人来自 React-world，我最终会使用 history-library、useEffect 和 localStorage 的组合来解决我的用例

当用户选择新项目时：

  function selectProject(customer_id: string, project_id: string){
    const projectUrl = `/customer/${customer_id}/project/${project_id}`
    localStorage.setItem("selected-project", projectUrl)
    history.push(projectUrl)
  }

当用户从另一个网站回来时。如果 localStorage 里有东西，就发给他。

  useEffect(() => {
    const projectUrl = localStorage.getItem("selected-project")
    if (projectUrl) {
      history.push(projectUrl)
    }
  }, [history])

当用户退出项目时，清空localStorage

  const selectProject = () => {
    localStorage.removeItem("selected-project")
    history.push("/")
  }

【讨论】：

【解决方案7】：

使用 Node.js 和 Express 的人可以设置一个会话 cookie，该 cookie 将记住当前页面的 URL，从而允许您在下一个页面加载时检查引荐来源网址。这是一个使用express-session 中间件的示例：

//Add me after the express-session middleware    
app.use((req, res, next) => {
    req.session.referrer = req.protocol + '://' + req.get('host') + req.originalUrl;
    next();
});

然后您可以像这样检查引荐来源 cookie 的存在：

if ( req.session.referrer ) console.log(req.session.referrer);

不要假设此方法始终存在引荐来源 cookie，因为在之前的 URL 是另一个网站、会话已清除或刚刚创建（首次网站加载）的情况下，它不会可用。

【讨论】：