如何使用JavaScript实现页面跳转？

JavaScript 页面转向

JavaScript 提供了多种方法来改变当前页面的 URL，从而导航到不同的页面，以下是一些常见的方法：

1.window.location 对象

window.location 对象在浏览器环境中提供了许多属性和方法，可以用来获取和设置当前页面的 URL，其中最常用的是window.location.href 属性，它表示当前页面的完整 URL。

示例代码：

// 将当前页面重定向到新的 URL
window.location.href = 'https://www.example.com';

2.window.location.replace() 方法

window.location.replace() 方法用于替换当前页面的 URL，而不是在浏览器的历史记录中添加一个新的条目，这意味着用户无法使用浏览器的后退按钮返回到前一个页面。

示例代码：

// 替换当前页面的 URL
window.location.replace('https://www.example.com');

3.window.location.assign() 方法

window.location.assign() 方法类似于window.location.href，它也用于设置当前页面的 URL，与window.location.replace() 不同，它会在浏览器的历史记录中添加一个新的条目，允许用户使用后退按钮返回到前一个页面。

示例代码：

// 设置当前页面的 URL，并在历史记录中添加新条目
window.location.assign('https://www.example.com');

4.window.location.reload() 方法

window.location.reload() 方法用于重新加载当前页面，如果传递参数true，则会强制从服务器重新加载页面；如果传递参数false 或不传递任何参数，则可能会从浏览器缓存中加载页面。

示例代码：

// 重新加载当前页面，可能从缓存加载
window.location.reload();
// 强制从服务器重新加载当前页面
window.location.reload(true);

相关问题与解答

问题1：如何判断当前页面是否已经加载完成？

答案1： 可以使用window.onload 事件或者document.readyState 属性来判断页面是否已经加载完成。

// 使用 window.onload 事件
window.onload = function() {
    console.log("页面已加载完成");
};
// 使用 document.readyState 属性
if (document.readyState === "complete") {
    console.log("页面已加载完成");
} else {
    document.addEventListener("DOMContentLoaded", function() {
        console.log("页面已加载完成");
    });
}

问题2：如何在页面加载完成后执行特定的操作？

答案2： 可以在window.onload 事件处理程序中执行特定操作，或者使用document.addEventListener 监听DOMContentLoaded 事件。

// 使用 window.onload 事件
window.onload = function() {
    // 在这里执行你的操作
    console.log("页面已加载完成，现在执行操作");
};
// 使用 addEventListener 监听 DOMContentLoaded 事件
document.addEventListener("DOMContentLoaded", function() {
    // 在这里执行你的操作
    console.log("页面已加载完成，现在执行操作");
});