javascript之location常用属性和方法

发布时间:2023年12月29日


前言

本章学习的是location常用属性和方法

为什么使用location的属性和方法呢?

使用location的属性和方法可以让我们实现对浏览器地址栏URL的获取和操作,从而实现以下功能:

获取当前页面的URL信息:通过获取location的属性如href、host、pathname等,我们可以获取当前页面的URL的各个部分,从而进行相关的处理。

页面跳转:通过使用location的assign()方法,我们可以加载一个新的URL,实现页面跳转的功能。例如,当用户点击某个链接或者按钮时,我们可以通过assign()方法将用户导航到另一个URL。

页面刷新:使用location的reload()方法可以重新加载当前页面,让页面重新获取最新的内容。

修改URL参数:通过修改location的search属性,我们可以对URL的查询字符串进行修改。这在需要通过URL参数传递数据的情况下特别有用,例如在表单提交时将表单数据作为URL参数传递给后台。

静态路由:在一些前端框架中,我们可以使用location的hash属性来实现前端的路由功能。通过监听hashchange事件,我们可以根据URL中的锚点变化来切换视图,从而实现SPA(单页面应用)的效果。

总之,使用location的属性和方法可以帮助我们在浏览器中对URL进行各种操作,从而实现页面跳转、参数传递、刷新页面等功能。

属性展示

href

返回或设置当前页面的URL地址

代码演示:

<!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>

运行结果:

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

host

返回当前页面的主机名和端口号

代码演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function fun3(){
            alert(location.host)
        }
    </script>
</head>
<body>
<input type="button" value="返回当前页面信息" onclick="fun3()">
</body>
</html>

运行结果:

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

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

hostname

返回当前页面的主机名。

代码演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function fun3(){
            alert(location.hostname)
        }
    </script>
</head>
<body>
<input type="button" value="返回当前页面信息" onclick="fun3()">
</body>
</html>

运行结果:

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

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

port

返回当前页面的端口号。

代码演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function fun3(){
            alert(location.port)
        }
    </script>
</head>
<body>
<input type="button" value="返回当前页面信息" onclick="fun3()">
</body>
</html>

运行结果:

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

protocol

返回当前页面的协议。
代码演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function fun3(){
            alert(location.protocol);
        }
    </script>
</head>
<body>
<input type="button" value="返回当前页面信息" onclick="fun3()">
</body>
</html>

运行结果:

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

点击后:

在这里插入图片描述

pathname

返回当前页面的路径部分。

代码演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function fun3(){
            alert(location.pathname);
        }
    </script>
</head>
<body>
<input type="button" value="返回当前页面信息" onclick="fun3()">
</body>
</html>

运行结果:

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

方法展示

replace(url)

加载一个新的URL,并替换当前的历史记录。

代码演示:

<!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>

运行结果:

点击前:

在这里插入图片描述

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

assign(url)

加载一个新的URL,并在浏览器历史记录中生成新的记录。

代码演示:

<!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>

运行结果:

点击前:

在这里插入图片描述

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

reload()

重新加载当前页面。

代码演示:

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

运行结果:

点击前:

在这里插入图片描述

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

toString()

返回当前页面的完整URL字符串。

代码演示:

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

运行结果:

点击前:

在这里插入图片描述

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

总结

属性总结:

关键单词作用
href返回或设置当前页面的URL地址。
host返回当前页面的主机名和端口号。
hostname返回当前页面的主机名。
port返回当前页面的端口号。
protocol返回当前页面的协议。
pathname返回当前页面的路径部分

方法总结:

关键单词作用
assign(url)加载一个新的URL,并在浏览器历史记录中生成新的记录。
replace(url)加载一个新的URL,并替换当前的历史记录。
reload()重新加载当前页面。
toString()返回当前页面的完整URL字符串。
文章来源:https://blog.csdn.net/weixin_72473547/article/details/135269951
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。