window.location属性用于获取或更改浏览器当前显示页面的URL，它是一个Location对象，这个对象有很多的属性可以访问和修改。这些属性可以帮助我们在JavaScript中访问和操作URL。

window.location.href属性：表示当前页面的URL，可读写。

例如：

```

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

```

我们可以用它来跳转页面，例如：

```

window.location.href = "https://www.baidu.com"; // 跳转到百度网站

```

window.location.protocol属性：表示当前页面的协议，如http或https，可读写。

例如：

```

console.log(window.location.protocol); // 输出当前页面的协议

```

我们可以用它来判断当前页面是否使用了安全协议，如：

```

if (window.location.protocol === "https:") {

console.log("当前页面使用了安全协议");

}

```

window.location.host属性：表示当前页面的主机名和端口号，可读写。

例如：

```

console.log(window.location.host); // 输出当前页面的主机名和端口号, 如：www.baidu.com:80

```

window.location.hostname属性：表示当前页面的主机名，可读写。

例如：

```

console.log(window.location.hostname); // 输出当前页面的主机名, 如：www.baidu.com

```

window.location.port属性：表示当前页面的端口号，可读写。

例如：

```

console.log(window.location.port); // 输出当前页面的端口号, 如：80

```

window.location.pathname属性：表示当前页面的路径部分，包括最前面的斜线(/)，但不包括主机名和参数部分，可读写。

例如：

```

console.log(window.location.pathname); // 输出当前页面的路径部分

```

window.location.search属性：表示当前页面的参数部分，包括最前面的问号(?)，可读写。

例如：

```

console.log(window.location.search); // 输出当前页面的参数部分, 如：?q=js

```

window.location.hash属性：表示当前页面的锚点部分，包括最前面的井号(#)。

例如：

```

console.log(window.location.hash); // 输出当前页面的锚点部分, 如：#top

```

除了以上这些常用的属性，Location对象还有一些其他的属性，比如：

- Location.origin：表示当前页面的协议、主机名和端口号，不包括路径和参数部分；

- Location.protocol：表示当前页面的协议；

- Location.host：表示当前页面的主机名和端口号，不包括协议、路径和参数部分；

- Location.hostname：表示当前页面的主机名，不包括协议、端口号、路径和参数部分；

- Location.port：表示当前页面的端口号，不包括协议、主机名、路径和参数部分；

- Location.pathname：表示当前页面的路径部分，不包括协议、主机名、端口号和参数部分；

- Location.search：表示当前页面的参数部分，不包括协议、主机名、端口号和路径部分；

- Location.hash：表示当前页面的锚点部分，不包括协议、主机名、端口号、路径和参数部分。

使用方法：

获取当前页面的URL：

```

var url = window.location.href;

console.log(url);

```

修改当前页面的URL：

```

window.location.href = "https://www.baidu.com";

```

获取当前页面的主机名：

```

var host = window.location.hostname;

console.log(host);

```

判断当前页面是否使用了安全协议：

```

if (window.location.protocol === "https:") {

console.log("当前页面使用了安全协议");

}

```

案例说明：

1.动态生成页面内容

在JavaScript中我们可以动态地创建一个页面，并随意修改URL的属性值，以便我们随意地向页面加载内容和状态。

例如：

```

Hello World

跳转到Google页面

添加参数到URL

清除URL参数

```

这个页面中包含了3个按钮，分别用于跳转到Google页面、添加参数到URL和清除URL参数。当我们点击相应的按钮时，就会相应地改变URL的属性值，从而改变页面的状态。

2.判断当前页面是否在iframe中

有时候我们需要判断当前页面是否在父页面中的iframe中加载，这可以使用Location对象的parent属性。

例如：

```

父页面

```

这个页面中包含了一个iframe元素，用于加载child.html页面；然后在父页面中的JavaScript代码中使用if语句判断当前页面是否在iframe中加载，如果是，则弹出一个提示框。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/