编程基础网 / 编程教程 / 前端开发 / 正文

js实现页面跳转的五种方法推荐

编程基础网前端开发

2023-12-13

下面是关于“js实现页面跳转的五种方法推荐”的完整攻略。

下面是关于“js实现页面跳转的五种方法推荐”的完整攻略。

一、前言

在网页编程中，有时需要通过JavaScript实现页面跳转。本篇文章将介绍常见的五种实现页面跳转的方法，让大家能够实现常用的页面跳转功能。

二、方法一

使用location.href实现页面跳转：

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

三、方法二

使用location.assign实现页面跳转：

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

四、方法三

使用location.replace实现页面跳转：

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

五、方法四

使用location.reload实现页面刷新：

location.reload();

六、方法五

使用window.open实现在新窗口中打开页面：

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

七、示例说明

接下来提供两个示例说明。

示例一

通过按钮点击实现页面跳转：

<!DOCTYPE html>
<html>
<head>
    <title>示例一</title>
</head>
<body>
    <button onclick="location.href='http://www.example.com'">跳转到 example.com</button>
</body>
</html>

示例二

通过下拉列表实现页面跳转：

<!DOCTYPE html>
<html>
<head>
    <title>示例二</title>
</head>
<body>
    <select id="mySelect" onchange="location.href = this.value;">
        <option value="">选择一个网站：</option>
        <option value="http://www.example.com">Example</option>
        <option value="http://www.google.com">Google</option>
        <option value="http://www.microsoft.com">Microsoft</option>
        <option value="http://www.apple.com">Apple</option>
    </select>
</body>
</html>

以上就是“js实现页面跳转的五种方法推荐”的完整攻略。建议根据实际需求选择相应的方法来实现页面跳转。

编程基础网

本文标题为：js实现页面跳转的五种方法推荐