window.location各属性含义

window.location 是浏览器中一个非常重要的对象，代表当前文档的URL。它可以用来获取当前页面的URL，或者修改当前页面的URL，从而实现页面的跳转和刷新等功能。window.location对象是一个Location对象，它包含了一些属性和方法，下面详细介绍它们的含义和使用方法。

1. href 属性

href 属性是一个字符串，它表示当前页面的URL。可以通过 window.location.href 来获取当前页面的URL，也可以通过 window.location.href = newUrl 来修改当前页面的URL。例如：

```

// 获取当前页面的URL

console.log(window.location.href);

// 修改当前页面的URL

window.location.href = "http://www.example.com";

```

2. protocol 属性

protocol 属性是一个字符串，它表示当前页面的协议。可以通过 window.location.protocol 来获取当前页面的协议，也可以通过 window.location.protocol = newProtocol 来修改当前页面的协议。例如：

```

// 获取当前页面的协议

console.log(window.location.protocol);

// 修改当前页面的协议

window.location.protocol = "https:";

```

3. host 属性

host 属性是一个字符串，它表示当前页面的主机名和端口号。可以通过 window.location.host 来获取当前页面的主机名和端口号，也可以通过 window.location.host = newHost 来修改当前页面的主机名和端口号。例如：

```

// 获取当前页面的主机名和端口号

console.log(window.location.host);

// 修改当前页面的主机名和端口号

window.location.host = "www.example.com:8080";

```

4. hostname 属性

hostname 属性是一个字符串，它表示当前页面的主机名。可以通过 window.location.hostname 来获取当前页面的主机名，也可以通过 window.location.hostname = newHostname 来修改当前页面的主机名。例如：

```

// 获取当前页面的主机名

console.log(window.location.hostname);

// 修改当前页面的主机名

window.location.hostname = "www.example.com";

```

5. port 属性

port 属性是一个字符串，它表示当前页面的端口号。可以通过 window.location.port 来获取当前页面的端口号，也可以通过 window.location.port = newPort 来修改当前页面的端口号。例如：

```

// 获取当前页面的端口号

console.log(window.location.port);

// 修改当前页面的端口号

window.location.port = "8080";

```

6. pathname 属性

pathname 属性是一个字符串，它表示当前页面的路径名。可以通过 window.location.pathname 来获取当前页面的路径名，也可以通过 window.location.pathname = newPathname 来修改当前页面的路径名。例如：

```

// 获取当前页面的路径名

console.log(window.location.pathname);

// 修改当前页面的路径名

window.location.pathname = "/blog";

```

7. search 属性

search 属性是一个字符串，它表示当前页面的查询字符串部分。可以通过 window.location.search 来获取当前页面的查询字符串部分，也可以通过 window.location.search = newSearch 来修改当前页面的查询字符串部分。例如：

```

// 获取当前页面的查询字符串

console.log(window.location.search);

// 修改当前页面的查询字符串

window.location.search = "?page=2";

```

8. hash 属性

hash 属性是一个字符串，它表示当前页面的锚点部分。可以通过 window.location.hash 来获取当前页面的锚点部分，也可以通过 window.location.hash = newHash 来修改当前页面的锚点部分。例如：

```

// 获取当前页面的锚点部分

console.log(window.location.hash);

// 修改当前页面的锚点部分

window.location.hash = "section1";

```

9. reload() 方法

reload() 方法可以重新加载当前页面。如果不带任何参数，则会重新加载当前页面，并且从缓存中重新加载页面资源；如果带一个参数 true，则会强制从服务器端重新加载页面资源。例如：

```

// 重新加载当前页面

window.location.reload();

// 强制从服务器端重新加载页面资源

window.location.reload(true);

```

10. assign() 方法

assign() 方法可以用来跳转到一个新的页面。它会立即跳转到指定的URL，并在浏览器的历史记录中生成一条新的记录。例如：

```

// 跳转到新的页面

window.location.assign("http://www.example.com");

```

11. replace() 方法

replace() 方法也可以用来跳转到一个新的页面。它和 assign() 方法的区别在于，replace() 方法跳转后不会在浏览器的历史记录中生成一条新的记录，而是直接替换当前页面。例如：

```

// 跳转到新的页面，并替换当前页面

window.location.replace("http://www.example.com");

```

下面是一些常用的示例：

1. 重定向到另一个页面：

```

window.location.href = "http://www.example.com";

```

2. 重新加载当前页面：

```

window.location.reload();

```

3. 强制从服务器端重新加载当前页面：

```

window.location.reload(true);

```

4. 跳转到一个新的页面：

```

window.location.assign("http://www.example.com");

```

5. 跳转到一个新的页面，并替换当前页面：

```

window.location.replace("http://www.example.com");

```

总之，window.location 对象提供了丰富的URL相关操作和属性，可以实现各种页面跳转和重定向等功能，非常实用。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/