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

文章目录

  • 前言
  • 代码演示及解释
    • 使用location.href属性
    • 使用location.assign()方法
    • 使用location.replace()方法
    • 使用window.open()方法
    • 使用document.URL方法
  • 总结


前言

本章学习的是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>

运行结果:

点击前:
javascript之跳转页面的几种方法?_第1张图片
点击后:
javascript之跳转页面的几种方法?_第2张图片

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

运行结果:

点击前:

javascript之跳转页面的几种方法?_第3张图片

点击后:
javascript之跳转页面的几种方法?_第4张图片

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

运行结果:

点击前:

javascript之跳转页面的几种方法?_第5张图片

点击后:
javascript之跳转页面的几种方法?_第6张图片

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

运行结果:

点击前:

javascript之跳转页面的几种方法?_第7张图片

点击后:
javascript之跳转页面的几种方法?_第8张图片

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

运行结果:

点击前:

javascript之跳转页面的几种方法?_第9张图片

点击后:
javascript之跳转页面的几种方法?_第10张图片

总结

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

你可能感兴趣的:(javascript,前端,开发语言)