使用JavaScript跳转页面的几种方法

2023-12-31 15:28:10

文章目录

🫧1.location.href

使用 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>

🫧2.location.assign()

使用 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>

🫧3.window.open()

打开一个新的浏览器窗口，加载给定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>

🫧4.replace()

使用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>

🫧5.history.forward()

使用 history.forward() 方法可以让浏览器前进到历史记录中的下一个页面。

history.forward();

🫧6.history.back()

使用 history.back() 方法可以让浏览器后退到历史记录中的上一个页面。

history.back();

🫧7.history.go()

使用 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>

?最后?

🍒欢迎点赞 👍 收藏 ?留言评论 📝私信必回哟😁
🍒博主将持续更新学习记录收获，友友们有任何问题可以在评论区留言

文章来源:https://blog.csdn.net/qq_74095822/article/details/135307049
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。