JS实现获取当前URL和来源URL的方法

获取当前URL和来源URL是一项常见的技术需求，本文将介绍JS实现该功能的方法。

获取当前URL的方法

获取当前URL可以使用window.location属性，该属性包含了URL的各种组成部分，如协议、主机名、路径等。示例代码如下：

var currentUrl = window.location.href;
console.log(currentUrl);

执行以上代码后会输出当前页面的URL。

获取来源URL的方法

获取来源URL可以使用document.referrer属性，该属性包含了页面的来源地址。需要注意的是，如果页面直接被打开，而非从其他页面跳转而来，则该属性的值为空字符串。示例代码如下：

var referrerUrl = document.referrer;
console.log(referrerUrl);

执行以上代码后会输出页面来源的URL。

完整示例说明

示例1：获取当前URL和来源URL并进行页面跳转

假设有一个页面需要跳转到单页面应用中的某个模块，且页面需要记录来源地址以便后续跳转回来。可使用以下代码实现：

// 获取来源URL
var referrerUrl = document.referrer;

// 获取当前URL
var currentUrl = window.location.href;

// 存储当前URL
localStorage.setItem('lastUrl', currentUrl);

// 进行页面跳转
location.href = '/module1.html';

在某个页面中完成以上操作后，可以在localStorage中查看上一个URL，方便后续跳转回来。

示例2：在AJAX请求中传递来源地址

假设有一个需要向后端请求数据的操作，需要传递来源URL以便记录用户行为。可以使用以下代码实现：

// 获取来源URL
var referrerUrl = document.referrer;

// 向后端请求数据
$.ajax({
  url: '/api/data',
  type: 'GET',
  data: {
    referrerUrl: referrerUrl,
    otherData: 'foo'
  },
  success: function(response) {
    // do something
  },
  error: function() {
    // do something
  }
});

以上代码在向后端请求数据时，同时将来源URL传递给了后端，方便后端记录用户行为。

以上就是JS实现获取当前URL和来源URL的方法，可以根据实际需求进行调用。