js怎么取到当前页面的地址

在JavaScript中获取当前页面的地址，可以使用window.location对象，它包含了当前页面的URL信息。 具体方法有以下几种：使用window.location.href、window.location.protocol、window.location.hostname、window.location.pathname、window.location.search、window.location.hash。其中，使用window.location.href最为常见，因为它返回的是完整的URL。下面将详细介绍每种方法及其应用场景。

一、使用window.location.href

window.location.href是获取当前页面完整URL最直接的方法。它返回包含协议、主机名、端口号（如果有）、路径及查询字符串的完整URL。

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

通过这种方式，你可以获取到整个URL字符串。例如，如果当前页面的URL是https://www.example.com:8080/path/page.html?id=123&name=test#section1，那么window.location.href将返回该完整字符串。

二、使用window.location.protocol

window.location.protocol用于获取当前页面的协议部分，例如http:或https:。这在处理需要区分协议的场景下非常有用。

let protocol = window.location.protocol;
console.log(protocol); // Outputs "https:"

三、使用window.location.hostname

window.location.hostname返回当前页面的主机名（不含协议和端口号）。这在需要获取域名的场景下非常有用。

let hostname = window.location.hostname;
console.log(hostname); // Outputs "www.example.com"

四、使用window.location.pathname

window.location.pathname获取URL中的路径部分，不包含协议、主机名和查询字符串。这在处理路径相关的操作时非常有用。

let pathname = window.location.pathname;
console.log(pathname); // Outputs "/path/page.html"

五、使用window.location.search

window.location.search获取查询字符串部分，包括问号?。这在处理URL参数时非常有用。

let search = window.location.search;
console.log(search); // Outputs "?id=123&name=test"

六、使用window.location.hash

window.location.hash获取URL中的哈希部分，包括井号#。这在处理页面内导航时非常有用。

let hash = window.location.hash;
console.log(hash); // Outputs "#section1"

七、综合使用window.location对象

有时你可能需要综合使用上述属性来获取和处理URL的不同部分。下面是一个综合实例：

let protocol = window.location.protocol;
let hostname = window.location.hostname;
let port = window.location.port;
let pathname = window.location.pathname;
let search = window.location.search;
let hash = window.location.hash;
console.log(`Protocol: ${protocol}`);
console.log(`Hostname: ${hostname}`);
console.log(`Port: ${port}`);
console.log(`Pathname: ${pathname}`);
console.log(`Search: ${search}`);
console.log(`Hash: ${hash}`);

通过这种方式，你可以分别获取URL的各个部分，并根据需要进行处理。

八、应用场景及注意事项

SEO优化：获取当前URL信息有助于动态生成符合SEO要求的页面内容，比如动态生成meta标签。
单页应用（SPA）：在单页应用中，URL的变化通常通过哈希来管理，获取和处理哈希值有助于页面导航。
表单处理：在处理表单提交时，可能需要获取当前页面的URL来进行相应的操作。

九、总结

通过以上介绍，你应该已经掌握了使用JavaScript获取当前页面地址的多种方法。window.location对象提供了一系列属性，帮助你获取和处理URL的各个部分。这些方法不仅简单易用，而且非常实用，能够满足绝大多数的开发需求。

在实际开发过程中，根据具体需求选择合适的方法，可以大大提高代码的可读性和维护性。同时，注意在不同的浏览器和环境中测试你的代码，以确保兼容性和稳定性。