详解js中的window.location.href|极客笔记

详解js中的window.location.href

在网页开发中，经常会涉及到对网页的跳转操作，其中一个常用的方法就是通过JavaScript来控制浏览器的跳转行为。而在JavaScript中，可以通过window.location.href属性来实现对当前页面的跳转操作。本文将详细解释window.location.href的用法，以及一些常见的应用场景。

window.location.href的作用

window.location.href是JavaScript中的一个属性，它可以获取或设置当前窗口的URL地址。通过改变window.location.href的值，可以实现在浏览器中跳转到不同的URL地址。使用window.location.href执行跳转操作时，浏览器将加载新的URL地址，并且在浏览历史记录中生成一个新的记录，这样用户可以通过浏览器的后退和前进按钮来切换页面。

使用window.location.href进行页面跳转

接下来我们将通过一些示例代码来演示如何使用window.location.href来进行页面跳转。

1. 直接跳转到指定URL地址

下面的示例代码展示了如何直接跳转到指定的URL地址：

<!DOCTYPE html>
<html>
<head>
    <title>跳转页面示例</title>
</head>
<body>

<button onclick="redirectToUrl()">点击跳转</button>

<script>
function redirectToUrl() {
    window.location.href = 'https://www.example.com';
}
</script>

</body>
</html>

在这个示例中，当用户点击按钮时，页面将会跳转到https://www.example.com这个URL地址。这是最基本、最常见的一种使用方式。

2. 在当前页面中打开新的URL

除了直接跳转到一个新的URL地址外，我们还可以在当前页面中打开一个新的URL地址，而不是完全跳转到新的页面。

下面的示例代码展示了如何在当前页面中打开一个新的URL地址：

<!DOCTYPE html>
<html>
<head>
    <title>打开新页面示例</title>
</head>
<body>

<a href="https://www.example.com" onclick="openNewTab(event)">打开新页面</a>

<script>
function openNewTab(event) {
    event.preventDefault();
    window.open('https://www.example.com', '_blank');
}
</script>

</body>
</html>

在这个示例中，当用户点击链接时，页面将在新的标签页中打开https://www.example.com这个URL地址。

3. 刷新当前页面

除了跳转到新的页面外，我们还可以使用window.location.href来实现对当前页面的刷新。

下面的示例代码展示了如何刷新当前页面：

<!DOCTYPE html>
<html>
<head>
    <title>刷新页面示例</title>
</head>
<body>

<button onclick="refreshPage()">刷新页面</button>

<script>
function refreshPage() {
    window.location.href = window.location.href;
}
</script>

</body>
</html>

在这个示例中，当用户点击按钮时，页面将会被刷新。