javascript之跳转页面的几种方法?

梦中有辰

已于 2023-12-28 16:18:34 修改

阅读量526

点赞数 11

文章标签： javascript 前端开发语言

于 2023-12-28 16:15:17 首次发布

本文链接：https://blog.csdn.net/weixin_72473547/article/details/135271729

版权

文章目录

前言
代码演示及解释
总结

前言

本章学习的是JavaScript中的跳转页面的几种方法

代码演示及解释

使用location.href属性

可以直接将一个新的URL赋值给location.href属性，即可实现页面跳转

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function fun4(){
            location.href="djh.html";
        }
    </script>
</head>
<body>
<input type="button" value="去往新页面" onclick="fun4()">
</body>
</html>

运行结果：

点击前：
在这里插入图片描述
点击后：

使用location.assign()方法

与location.href类似，也可以将一个新的URL作为参数传递给location.assign()方法，实现页面跳转

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function fun4(){
            location.assign("djh.html");
        }
    </script>
</head>
<body>
<input type="button" value="去往新页面" onclick="fun4()">
</body>
</html>

运行结果：

点击前：

在这里插入图片描述

点击后：
在这里插入图片描述

使用location.replace()方法

与location.assign()方法类似，但不会在浏览器的历史记录中留下当前页面的记录，实现页面跳转

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function fun4(){
            location.replace("djh.html");
        }
    </script>
</head>
<body>
<input type="button" value="去往新页面" onclick="fun4()">
</body>
</html>

运行结果：

点击前：

在这里插入图片描述

点击后：
在这里插入图片描述

使用window.open()方法

可以在新的浏览器窗口或标签页中打开一个URL，实现页面跳转

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function fun4(){
            window.open("djh.html","点击后","titlebar=0,location=no");
        }
    </script>
</head>
<body>
<input type="button" value="去往新页面" onclick="fun4()">
</body>
</html>

运行结果：

点击前：

在这里插入图片描述

点击后：
在这里插入图片描述

使用document.URL方法

可以将一个新的URL作为参数传递给document.URL='url’方法，实现页面跳转

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function fun4(){
            document.URL="djh.html"
        }
    </script>
</head>
<body>
<input type="button" value="去往新页面" onclick="fun4()">
</body>
</html>

运行结果：

点击前：

在这里插入图片描述

点击后：
在这里插入图片描述

总结

关键单词	作用
assign(url)	加载一个新的URL，并在浏览器历史记录中生成新的记录。
replace(url)	加载一个新的URL，并替换当前的历史记录。
href	可以直接将一个新的URL赋值给location.href属性，即可实现页面跳转
open()	可以在新的浏览器窗口或标签页中打开一个URL，实现页面跳转
URL	可以直接将一个新的URL赋值给 document.URL=‘url’ 的方法，即可实现页面跳转

梦中有辰

关注

11
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
javascript之跳转页面的几种方法?

本章学习的是JavaScript中的跳转页面的几种方法关键单词作用加载一个新的URL，并在浏览器历史记录中生成新的记录。加载一个新的URL，并替换当前的历史记录。href可以直接将一个新的URL赋值给location.href属性，即可实现页面跳转open()可以在新的浏览器窗口或标签页中打开一个URL，实现页面跳转URL可以直接将一个新的URL赋值给 document.URL=‘url’ 的方法，即可实现页面跳转。
复制链接

扫一扫