javascript之location常用属性和方法

梦中有辰

已于 2023-12-28 15:52:08 修改

阅读量1.1k

点赞数 45

文章标签： javascript 开发语言 ecmascript

于 2023-12-28 15:49:59 首次发布

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

版权

文章目录

前言
为什么使用location的属性和方法呢？
属性展示
方法展示
总结
- 属性总结：
- 方法总结：

前言

本章学习的是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字符串。

梦中有辰

关注

45
点赞
踩
46

收藏

觉得还不错? 一键收藏
0
评论
javascript之location常用属性和方法

本章学习的是location常用属性和方法关键单词作用href返回或设置当前页面的URL地址。host返回当前页面的主机名和端口号。hostname返回当前页面的主机名。port返回当前页面的端口号。protocol返回当前页面的协议。pathname返回当前页面的路径部分关键单词作用加载一个新的URL，并在浏览器历史记录中生成新的记录。加载一个新的URL，并替换当前的历史记录。reload()重新加载当前页面。toString()返回当前页面的完整URL字符串。
复制链接

扫一扫