Javascript 使用Javascript跳转

最新推荐文章于 2024-05-30 11:27:58 发布

小杰不会编程

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量1k

点赞数 32

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/2201_75883077/article/details/135340554

版权

✨前言✨

1.如果代码对您有帮助  欢迎点赞👍+收藏⭐哟   后面如有问题可以私信评论哟🗒️
2.博主后面将持续更新哟😘

🎉本章目录🎉

🚲1.为什么要使用Javascript 跳转？
🛴1.什么是Javascript 跳转？
🏍️3.常见使用方法？
🏎️4.总结

🚲1.为什么要使用Javascript 跳转？

1.动态跳转：使用Javascript可以根据特定的条件或事件来动态决定跳转到不同的页面，可以根据用户的行为或环境变化来实现灵活的跳转逻辑。

2.异步跳转：使用Javascript可以实现异步加载或提交数据后再跳转，可以在页面加载或数据处理完成后再进行跳转，提升用户体验。

3.增加交互性：使用Javascript可以在跳转之前进行一些交互操作，例如确认对话框、提示信息、表单验证等，可以增加用户与页面的互动性。

4.控制跳转时机：使用Javascript可以通过定时器或事件监听等方式控制跳转的时机，例如倒计时后跳转、页面加载完成后跳转等。

总的来说，使用Javascript跳转可以实现更灵活、交互性更强的页面跳转方式，增加了页面的动态性和用户体验。

🛴1.什么是Javascript 跳转？

1.使用location对象的方法：可以使用location.href或者location.replace方法来改变当前页面的URL。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
            <script>
                // 使用location.href跳转到指定URL
                function fun1(){
                    location.href = "ym.html";//新建的页面1名称
                }
                // 使用location.replace跳转到指定URL
                function fun2(){
                    location.replace("ym1.html");//新建的页面2名称
                }
            </script>
</head>
<body>
<input type="button" value="href跳转" onclick="fun1()">
<input type="button" value="replace跳转" onclick="fun2()">
</body>
</html>

location.href 运行结果:
在这里插入图片描述
location.replace 运行结果:

在这里插入图片描述
2.使用location.assign()方法：该方法与window.location.href属性的效果相同，也是将页面重定向到指定的URL。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
            <script>
                // 使用location.assign跳转到指定URL
                function fun1(){
                    location.assign("ym.html") //新建的页面1名称
                }
            </script>
</head>
<body>
<input type="button" value="assign跳转" onclick="fun1()">
</body>
</html>

运行结果:
在这里插入图片描述
3.使用location.replace()方法：该方法将当前页面的URL替换为新的URL，不会在浏览器的历史记录中留下记录。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
            <script>
                // 使用location.replace跳转到指定URL
                function fun1(){
                    location.replace("ym.html") //新建的页面1名称
                }
            </script>
</head>
<body>
<input type="button" value="replace跳转" onclick="fun1()">
</body>
</html>

运行结果:
在这里插入图片描述
4.使用location.reload()方法：该方法用于重新加载当前页面，可以用于实现页面的刷新操作。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
            <script>
                // 使用location.reload刷新页面
                function fun1(){
                    location.reload() //新建的页面1名称
                }
            </script>
</head>
<body>
<input type="button" value="reload跳转" onclick="fun1()">
</body>
</html>

运行结果:
在这里插入图片描述

🏍️3.常见使用方法？

跳转属性	使用说明
window.location.href	进行页面跳转
window.location.replace()	进行页面跳转，该方法跳转后无法返回前一个页面
window.location.assign()	进行页面跳转
window.location.reload()	重新加载当前页面(刷新当前页面)
window.location.reload(true)	制从服务器重新加载页面（忽略缓存）
location.hash	进行页面内部锚点跳转
window.open()	在新窗口或标签页中打开一个URL

以上是一些常见的Javascript页面跳转方法。根据需求和具体情况，你可以选择适合的方式来进行跳转。
1.window.location.href 代码演示如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
            <script>
                    window.location.href = "ym.html";//新建的页面1名称
            </script>
</head>
<body>
</body>
</html>

运行结果:
在这里插入图片描述
2.window.location.replace() 代码演示如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
            <script>
                    window.location.replace("ym.html")//新建的页面1名称
            </script>
</head>
<body>
</body>
</html>

运行结果:
在这里插入图片描述
3.window.location.assign() 代码演示如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
            <script>
                window.location.assign("ym.html")//新建的页面1名称
            </script>
</head>
<body>
</body>
</html>

运行结果:
在这里插入图片描述
4. window.location.reload() 代码演示如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
            <script>
                window.location.reload()//新建的页面1名称
            </script>
</head>
<body>
重新加载当前页面
</body>
</html>

运行结果:

在这里插入图片描述
5.window.location.reload(true) 代码演示如下:

6.location.hash 代码演示如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        #mlj{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
            <script>
                function fun(){
                    window.location.hash = "mlj"//我们设定的锚链接名称
                }

            </script>
</head>
<body>
<input type="button" value="跳转锚链接" onclick="fun()">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="mlj"></div><!--我们给div设定的锚链接-->
</body>
</html>

运行结果:
在这里插入图片描述
7.window.open() 代码演示如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

            <script>
                function fun(){
                    window.open("ym.html")//新建页面
                }
            </script>
</head>
<body>
<input type="button" value="打开新的页面" onclick="fun()">
</body>
</html>

运行结果：
在这里插入图片描述

🏎️4.总结

跳转属性	说明使用
location.href	使用location对象的href属性来跳转到另一个URL。
location.replace()	使用location对象的replace方法来跳转到另一个URL，该方法不会在浏览器的历史记录中创建新的记录。
location.assign	使用location对象的assign方法来跳转到另一个URL，该方法会在浏览器的历史记录中创建新的记录。
location.reload	使用location对象的reload方法来重新加载当前页面。
window.open	使用window.open方法打开一个新的浏览器窗口，并跳转到指定的URL。

需要注意的是，以上方法都是通过改变window对象的location属性来实现页面跳转。另外，还可以通过按钮的点击事件或其他事件来触发页面跳转的逻辑。|

小杰不会编程

关注

32
点赞
踩
18

收藏

觉得还不错? 一键收藏
3
评论
Javascript 使用Javascript跳转

<script>// 使用location.href跳转到指定URL//新建的页面1名称// 使用location.replace跳转到指定URL//新建的页面2名称</script>
复制链接

扫一扫