如何在JavaScript中获取之前的URL？

问题描述 投票：0回答：10

有没有办法在JavaScript中获取之前的URL？像这样的东西：

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

有这样的事吗？或者我应该把它存储在 cookie 中？我只需要知道，这样我就可以在没有锚点的情况下从以前的 URL 转换到当前的 URL。

javascript url
10个回答
492
投票
document.referrer

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

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

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

67
投票

如果您想在不知道网址的情况下转到上一页，您可以使用新的 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

42
投票

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

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

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

window.history.state.prevUrl // your previous url
30
投票

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

我有一个应用程序，我需要建立一个包含 2 个框架的框架集。一个框架是已知的，另一个是我链接的页面。看起来 

document.referrer
是理想的选择，因为您不必将实际的文件名传递给框架集文档。

但是，如果您稍后更改底部框架页面，然后使用 

history.back()
，它不会将原始页面加载到底部框架中，而是重新加载 
document.referrer
，结果框架集消失，您回到原始页面启动窗口。

我花了一点时间才明白这一点。所以在历史数组中，

document.referrer
不仅是一个URL，它显然也是引用窗口规范。至少，这是我目前能理解的最好的方式。

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


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

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

3
投票

如果有人来自 React 世界，我最终使用 

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("/")
  }
1
投票

我在

SPA
单页应用程序上遇到了同样的问题，解决此问题的最简单方法是使用本地存储，如下所示：

我将需要的url存储在本地存储中

useEffect(() => {
const pathname = window.location.href; //this gives me current Url
localstorage.setItem('pageUrl',JSON.stringify(pathname))
}, []);

在下一个屏幕（或稍后的几个屏幕）上，我获取的网址可以按如下方式替换它

useEffect(() => {
     const pathname = localstorage.getItem('pageUrl');
     return pathname ? JSON.parse(pathname) : ''
     window.location.href = pathname; //this takes prevUrl from local storage and sets it
}, []);
1
投票

即使 document.referrer 为空也能工作的解决方法：

let previousUrl = null;

if(document.referrer){
  previousUrl = document.referrer;
  sessionStorage.setItem("isTrickApplied",false);

}else{
let isTrickApplied= sessionStorage.getItem("isTrickApplied");
if(isTrickApplied){
previousUrl = sessionStorage.getItem("prev");
sessionStorage.setItem("isTrickApplied",false);

}else{
history.back(); //Go to the previous page
sessionStorage.setItem("prev",window.location.href);
sessionStorage.setItem("isTrickApplied",true);
history.forward(); //Go to the next page in the stack
    }
}
0
投票

使用 Node.js 和 Express 的人可以设置一个会话 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 是另一个网站、会话已清理或刚刚创建（首次网站加载）的情况下，它将不可用。

0
投票

我们无法知道黄色JS中之前的URL会是什么，但我们可以确定搜索历史中是否存在该URL。

对我来说，有时这足以解决您的问题：

if (window.history.length <= 1) {
    // Your code here!
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.