深度解析：window.location对象的奇妙之旅

在网页开发中，`window.location`对象是一个非常实用且强大的工具。它不仅可以获取当前页面的地址（URL），还能控制浏览器的导航，将用户重定向到新的页面。本文将详细解析`window.location`对象的各个方面，让你轻松掌握这个强大的工具。

window.location对象简介

`window.location`对象是`Window`对象的一个属性，通过它你可以访问和修改当前窗口的URL。这个对象存储了关于当前文档位置的信息，并且提供了一些方法和属性，用于控制浏览器的导航行为。

window.location对象的常用属性

1. `window.location.href`

`href`属性返回当前页面的完整URL。你可以通过读取这个属性来获取当前页面的地址，也可以通过给它赋一个新的URL值，将用户重定向到一个新的页面。

```javascript

console.log(window.location.href); // 输出当前页面的URL

window.location.href = 'https://www.example.com'; // 重定向到新页面

```

2. `window.location.protocol`

`protocol`属性返回当前URL的协议部分，比如`http:`、`https:`或`ftp:`。

```javascript

const protocol = window.location.protocol;

console.log(protocol); // 输出 'http:' 或 'https:'

```

3. `window.location.host`

`host`属性返回当前URL的域名和端口号（如果指定了端口号）。

```javascript

const host = window.location.host;

console.log(host); // 输出 'www.example.com:8080' 或 'www.example.com'

```

4. `window.location.hostname`

`hostname`属性返回当前URL的域名部分，不包括端口号。

```javascript

const hostname = window.location.hostname;

console.log(hostname); // 输出 'www.example.com'

```

5. `window.location.port`

`port`属性返回当前URL的端口号。如果URL中没有指定端口号，则这个属性返回空字符串。

```javascript

const port = window.location.port;

console.log(port); // 输出 '8080' 或 ''

```

6. `window.location.pathname`

`pathname`属性返回当前URL的路径部分，即URL中域名后面的部分。

```javascript

const pathname = window.location.pathname;

console.log(pathname); // 输出 '/path/to/page'

```

7. `window.location.search`

`search`属性返回当前URL的查询字符串部分，即`?`后面的部分（包括`?`）。

```javascript

const search = window.location.search;

console.log(search); // 输出 '?query=value&another=query'

```

8. `window.location.hash`

`hash`属性返回当前URL的片段部分，即``后面的部分（包括``）。

```javascript

const hash = window.location.hash;

console.log(hash); // 输出 'section'

```

9. `window.location.origin`

`origin`属性返回当前URL的起源部分，即协议、域名和端口号（不包括路径、查询字符串和片段）。

```javascript

const origin = window.location.origin;

console.log(origin); // 输出 'https://www.example.com:8080'

```

window.location对象的常用方法

1. `location.assign()`

`assign()`方法加载一个新的文档，相当于点击了一个链接，将浏览器重定向到指定的URL。这个方法会在浏览器的历史记录中生成一个新的记录。

```javascript

window.location.assign('https://www.example.com');

```

2. `location.reload()`

`reload()`方法重新加载当前文档。如果没有参数或参数为`false`，它会使用HTTP头`If-Modified-Since`来检测服务器上的文档是否已改变。如果文档已改变，`reload()`会再次下载该文档；如果文档未改变，则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果相同。如果参数为`true`，则会绕过缓存，从服务器上重新下载该文档。

```javascript

window.location.reload(); //