js 获取 url 地址

在JavaScript中获取URL地址通常指的是获取当前浏览器窗口或标签页中显示的网页的完整URL。以下是一些基础概念和相关方法：

基础概念

• URL（Uniform Resource Locator）：统一资源定位符，用于标识互联网上的资源。
• current location：浏览器当前加载的页面的URL。

获取URL的方法

JavaScript提供了多种方式来获取当前页面的URL。

1. 使用 window.location.href

这是最常用的方法，可以直接获取整个URL字符串。

let currentUrl = window.location.href;
console.log(currentUrl); // 输出完整的URL

2. 使用 document.URL

这个属性与 window.location.href 类似，也可以获取完整的URL。

let currentUrl = document.URL;
console.log(currentUrl); // 输出完整的URL

3. 分解URL组件

如果你需要获取URL的不同部分（如协议、主机名、路径等），可以使用 window.location 对象的其他属性。

let protocol = window.location.protocol; // http: 或 https:
let hostname = window.location.hostname; // www.example.com
let pathname = window.location.pathname; // /path/to/page.html
let search = window.location.search; // ?query=string
let hash = window.location.hash; // #section1

应用场景

• 表单提交前的验证：确保用户输入的数据与当前页面的URL匹配。
• 动态内容加载：根据当前URL的不同部分加载不同的内容。
• 单页应用（SPA）路由管理：跟踪用户的导航历史并更新UI。

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

问题：获取到的URL不正确或为空。

• 原因：可能是由于页面还未完全加载，或者脚本执行时机过早。
• 解决方法：确保脚本在DOM完全加载后执行，可以使用 DOMContentLoaded 事件。

document.addEventListener('DOMContentLoaded', function() {
    let currentUrl = window.location.href;
    console.log(currentUrl);
});

问题：跨域限制导致无法获取某些URL信息。

• 原因：浏览器的同源策略限制了不同源之间的交互。
• 解决方法：如果需要跨域操作，可以考虑使用CORS（跨源资源共享）或JSONP等技术。

通过上述方法和注意事项，你应该能够在JavaScript中有效地获取和处理URL地址。