js获取完整的url地址

在JavaScript中，获取完整的URL地址可以通过多种方式实现。以下是一些常用的方法：

基础概念

URL（Uniform Resource Locator）是统一资源定位符，用于标识互联网上的资源。一个完整的URL通常包括协议（如http或https）、主机名、端口号（可选）、路径、查询字符串和片段标识符。

获取完整URL的方法

方法一：使用 window.location.href

这是最直接的方法，可以直接获取当前页面的完整URL。

let fullUrl = window.location.href;
console.log(fullUrl);

方法二：分别获取各部分然后拼接

如果你需要分别处理URL的不同部分，可以使用 window.location 对象的其他属性。

let protocol = window.location.protocol; // http: 或 https:
let host = window.location.host; // 主机名和端口号
let pathname = window.location.pathname; // 路径
let search = window.location.search; // 查询字符串
let hash = window.location.hash; // 片段标识符

let fullUrl = protocol + "//" + host + pathname + search + hash;
console.log(fullUrl);

应用场景

• 表单提交：确保表单提交到正确的URL。
• AJAX请求：在发送异步请求时需要知道当前页面的URL。
• 页面跳转：在进行页面重定向时使用。
• 日志记录：记录用户访问的完整URL以便进行数据分析。

可能遇到的问题及解决方法

问题：跨域问题

如果你尝试从一个域名获取另一个域名的URL，可能会遇到浏览器的同源策略限制。

解决方法：

• 使用CORS（跨源资源共享）策略。
• 如果控制服务器端，可以在服务器上设置适当的CORS头部。
• 使用JSONP（仅限于GET请求）。

问题：URL编码问题

URL中的某些字符需要进行编码，否则可能导致URL解析错误。

解决方法： 使用 encodeURIComponent 对URL中的参数进行编码。

let param = "中文字符";
let encodedParam = encodeURIComponent(param);
let urlWithParam = window.location.origin + "/path?param=" + encodedParam;
console.log(urlWithParam);

通过上述方法，你可以有效地获取和处理完整的URL地址，并解决在开发过程中可能遇到的相关问题。