JS 获取当前页面的URL

在JavaScript中，获取当前页面的URL是Web开发中常见的需求，这主要涉及到浏览器提供的全局对象`window`的一些属性和方法。下面将详细讲解如何利用这些功能来获取和解析URL。 `window.location`对象是JavaScript中用于获取和设置当前页面URL的重要对象。它包含了关于当前URL的所有信息，如协议、主机名、路径、查询字符串和哈希值等。以下是一些常用的方法和属性： 1. `window.location.href`：这个属性返回或设置整个URL。例如，如果你的页面URL是`http://example.com/path/to/page?query=string#hash`，`window.location.href`会返回这个完整的字符串。 2. `window.location.protocol`：返回URL的协议部分，如`http:`或`https:`。 3. `window.location.host`：返回URL的主机名和端口号，如`example.com:8080`。 4. `window.location.hostname`：仅返回URL的主机名，如`example.com`。 5. `window.location.port`：如果URL包含端口，它将返回该端口号，否则返回空字符串。 6. `window.location.pathname`：返回URL的路径部分，如`/path/to/page`。 7. `window.location.search`：返回URL的查询字符串，即`?`后面的部分，如`?query=string`。 8. `window.location.hash`：返回URL的哈希值，即`#`后面的部分，如`#hash`。 此外，`window.location`对象还提供了`assign()`、`reload()`和`replace()`等方法，用于导航到新的URL、刷新当前页面或替换历史记录中的当前条目。 对于解析URL，JavaScript提供了一个名为`URLSearchParams`的API，可以用来处理查询字符串。例如： ```javascript var searchParams = new URLSearchParams(window.location.search); var myParam = searchParams.get('myParam'); ``` 在这个例子中，`URLSearchParams`对象用于获取查询字符串中的参数，`get('myParam')`则返回名为`myParam`的参数值。 在实际应用中，你可能还需要处理URL的编码和解码问题。可以使用`encodeURIComponent()`和`decodeURIComponent()`函数来处理URL中的特殊字符。 例如，如果你需要拼接一个带有参数的URL，可以先用`encodeURIComponent()`对参数进行编码： ```javascript var param = encodeURIComponent('有空格的参数'); var url = 'http://example.com/?param=' + param; ``` 然后在服务器端或客户端使用`decodeURIComponent()`进行解码。 通过以上的JavaScript知识，你可以轻松地获取和处理当前页面的URL。在实际的Web应用中，这些功能常用于导航、数据传递、状态管理等方面。在提供的`demo.html`文件中，你可能可以看到这些概念的实际运用，通过查看源代码，可以更深入地理解它们的工作原理。