Fatal编程技术网
  • javascript/
  • 如何在JavaScript中获取上一个URL？

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

javascript

如何在JavaScript中获取上一个URL？,javascript,Javascript,有没有办法在JavaScript中获取上一个URL？大概是这样的： alert("previous url is: " + window.history.previous.href); 有这样的事吗？还是我应该把它储存在饼干里？我只需要知道，这样我就可以在没有锚的情况下从上一个URL转换到当前URL document.referrer 在许多情况下，如果用户通过点击链接进入当前页面（而不是直接在地址栏中键入，或者我相信在某些情况下，是通过提交表单？），您将获得用户访问的最后一个页面的URL。

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

alert("previous url is: " + window.history.previous.href);
有这样的事吗？还是我应该把它储存在饼干里？我只需要知道，这样我就可以在没有锚的情况下从上一个URL转换到当前URL

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

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

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



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


文件。编写（文件。参考）；

document.referer
符合您的目的，但它不适用于IE9之前的Internet Explorer版本

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

文档。referer
并非在所有情况下都与实际URL相同

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

但是，如果您以后更改底部框架页面，然后使用
history.back（）
它不会将原始页面加载到底部框架中，而是重新加载
document.referer
，因此框架集消失，您返回到原始起始窗口

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

如果想在不知道url的情况下转到上一页，可以使用新的历史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历史API的浏览器上操作历史堆栈的内容

有关更多信息，请参见

使用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是另一个网站、会话已清理或刚刚创建（首次加载网站）的实例中不可用。

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

window.history.pushState（{prevUrl:window.location.href}，null，“/new/path/in/your/app”）
然后，在新路由中，您可以执行以下操作来检索以前的URL：

window.history.state.prevUrl//您以前的url
这将导航到以前访问过的URL

javascript:history.go(-1)
如果有人来自React world，我最终使用
历史
-库、useEffect和localStorage的组合来解决我的用例

  const selectProject = () => {
    localStorage.removeItem("selected-project")
    history.push("/")
  }
当用户选择新项目时：

  function selectProject(customer_id: string, project_id: string){
    const projectUrl = `/customer/${customer_id}/project/${project_id}`
    localStorage.setItem("selected-project", projectUrl)
    history.push(projectUrl)
  }
当用户从其他网站返回时。如果本地存储中有什么东西，就把他送到那里

  useEffect(() => {
    const projectUrl = localStorage.getItem("selected-project")
    if (projectUrl) {
      history.push(projectUrl)
    }
  }, [history])
当用户退出项目时，清空localStorage

  const selectProject = () => {
    localStorage.removeItem("selected-project")
    history.push("/")
  }
还有document.referer，如果您通过链接到达当前页面（但不是通过书签或在地址栏中键入）。我最终将以前的url存储在网站的Cookie中，
document.referer
并不总是有效<代码>$.cookie（“previousUrl”，window.location.href，{path:“/”}）