js 实现跳转页面

在HTML5中，我们可以使用JavaScript来实现页面跳转，页面跳转是指从一个页面跳转到另一个页面，这种操作在网页开发中非常常见，例如用户点击一个按钮后跳转到另一个页面，或者在满足某些条件时自动跳转到另一个页面等。

页面跳转主要有两种方法：一种是使用window.location对象的href属性，另一种是使用window.location.replace()方法，下面我将详细介绍这两种方法的使用方法。

1、使用window.location.href属性进行页面跳转

window.location.href属性返回或设置当前加载的文档的URL，如果我们想要跳转到一个新的页面，只需要将新的URL赋值给这个属性即可。

我们有一个链接，当用户点击这个链接时，我们希望跳转到Google首页，可以使用以下代码：

<a href="https://www.google.com" target="_blank">Go to Google</a>

在这个例子中，href属性的值就是我们要跳转到的页面的URL。target="_blank"属性表示在新窗口中打开这个链接。

2、使用window.location.replace()方法进行页面跳转

window.location.replace()方法与window.location.href属性类似，也可以实现页面跳转。replace()方法与href属性的一个主要区别在于，replace()方法不会留下历史记录，也就是说，当用户使用浏览器的后退按钮时，他们不能回到调用replace()方法后的页面。

我们有一个链接，当用户点击这个链接时，我们希望跳转到Google首页，并希望用户不能通过后退按钮回到这个页面，可以使用以下代码：

<a href="https://www.google.com" onclick="return redirectToGoogle()">Go to Google</a>

在这个例子中，我们使用了一个JavaScript函数redirectToGoogle()来实现页面跳转，这个函数的内容如下：

function redirectToGoogle() {
    window.location.replace("https://www.google.com");
    return false; // 防止链接的默认行为（即导航到href属性指定的URL）
}

在这个函数中，我们首先调用了window.location.replace()方法来跳转到Google首页，我们返回了false，这是为了防止链接的默认行为（即导航到href属性指定的URL），这样，当用户点击这个链接时，他们只会被重定向到Google首页，而不会被导航到Google首页。

3、使用JavaScript的window.location.assign()方法进行页面跳转

除了上述两种方法外，我们还可以使用JavaScript的window.location.assign()方法来进行页面跳转，这个方法的行为与window.location.href属性类似，但是它可以接受一个参数，这个参数可以是一个片段标识符（即URL中"#"后面的部分），也可以是一个相对路径或绝对路径。

我们有一个链接，当用户点击这个链接时，我们希望跳转到Google首页的一个特定部分（例如搜索框），可以使用以下代码：

<a href="#search" onclick="return jumpToSearch()">Jump to Search</a>

在这个例子中，我们使用了一个JavaScript函数jumpToSearch()来实现页面跳转，这个函数的内容如下：

function jumpToSearch() {
    window.location.assign("#search");
    return false; // 防止链接的默认行为（即导航到href属性指定的URL）
}

在这个函数中，我们首先调用了window.location.assign()方法来跳转到Google首页的搜索框部分，我们返回了false，这是为了防止链接的默认行为（即导航到href属性指定的URL），这样，当用户点击这个链接时，他们只会被重定向到Google首页的搜索框部分，而不会被导航到Google首页。

归纳起来，HTML5中的页面跳转主要可以通过JavaScript的window.location.href属性、window.location.replace()方法和window.location.assign()方法来实现，这三种方法各有特点，可以根据实际需求选择使用。