使用 location.href 属性可以设置或获取当前页面的 URL。通过将其值设置为新的 URL，可以实现页面跳转。
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
function fun4() {
window.location.href="index.html";
}
</script>
<body>
<input type="button" value="去往新的链接" onclick="fun4()">
</body>
</html>
使用 location.assign() 方法同样可以实现页面跳转。它接受一个 URL 参数作为要跳转的目标地址。
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
function fun4() {
window.location.assign("index.html");
}
</script>
<body>
<input type="button" value="去往新的链接" onclick="fun4()">
</body>
</html>
打开一个新的浏览器窗口，加载给定url所指定的文档
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
function fun4() {
window.open("https://blog.csdn.net/qq_74095822?spm=1000.2115.3001.5343","我的博客","height=500px,width=500px");
}
</script>
<body>
<input type="button" value="去往新的链接" onclick="fun4()">
</body>
</html>
使用replace()方法：location.replace() 方法可以实现页面跳转，但与前两种方式不同的是，它会替换当前页面的历史记录，导致用户无法返回到前一个页面
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
function fun4() {
window.location.replace("index.html");
}
</script>
<body>
<input type="button" value="去往新的链接" onclick="fun4()">
</body>
</html>
使用 history.forward() 方法可以让浏览器前进到历史记录中的下一个页面。
history.forward();
使用 history.back() 方法可以让浏览器后退到历史记录中的上一个页面。
history.back();
使用 history.go() 方法可以跳转到指定的历史记录索引。负数表示后退，正数表示前进。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
function fun(){
window.history.go(-1);
}
function fun2(){
window.history.go(2);
}
</script>
<body>
<input type="button" value="返回上一个页面" onclick="fun()">
<input type="button" value="去往指定链接" onclick="fun2()">
</body>
</html>
?最后?
🍒欢迎点赞 👍 收藏 ?留言评论 📝私信必回哟😁
🍒博主将持续更新学习记录收获，友友们有任何问题可以在评论区留言