如果想获取当前页面 URL,请使用如下代码:
```javascript console.log(location.href) ``` 在控制台中执行上述代码,即可打印出页面 URL。需要注意的是,在执行此代码时,会显示完整的 URL 地址,包括协议、域名、端口、路径和查询参数等。 如何设置 location.href 除了获取当前页面 URL,我们还可以通过 location.href 来设置页面 URL。下面是一个简单的示例:如果需要通过代码修改当前页面 URL,请使用如下代码:
```javascript location.href = 'https://www.example.com' ``` 在这个例子中,我们将页面 URL 设置为了 `https://www.example.com`,然后当前页面会自动跳转到这个 URL。需要注意的是,这会让用户的浏览器刷新,而且所有正在运行的 JavaScript 代码也将被中止,因此必须谨慎使用。 常见的应用场景 通过 location.href 可以实现很多常用功能,下面是一些常见的应用场景:应用场景 1:页面跳转
通过修改 location.href,可以实现页面跳转功能。例如,我们可以在 HTML 中使用如下代码: ```html ``` 点击按钮后,当前页面即可跳转到 /home 页面。应用场景 2:根据 URL 做出不同的操作
如果当前页面的 URL 包含特定参数,我们就可以根据参数中的值做出不同的操作。例如: ```javascript if (location.href.indexOf('example') >= 0) { console.log('执行相应操作') } ``` 在这个例子中,我们使用 indexOf() 方法来检查当前 URL 是否包含 `example`,如果包含,则执行相应的操作。应用场景 3:基于 URL 显示不同的内容
通过修改页面 URL,我们可以实现基于 URL 显示不同内容的功能。例如,我们设定如下的 URL 规则: ```bash https://www.example.com/page/1 -> 显示第一页 https://www.example.com/page/2 -> 显示第二页 https://www.example.com/page/3 -> 显示第三页 ``` 在页面其他位置点击不同 URL,即可实现不同内容的显示,从而让用户从页面中获取所需信息。 结语 location.href 可以完成很多常用操作,包括获取当前页面 URL、设置页面 URL、页面跳转、根据 URL 做出不同的操作、基于 URL 显示不同的内容等。掌握 location.href 的使用技巧,可以让 Web 开发更加高效和便捷。