javascript之location常用属性和方法

文章目录

  • 前言
  • 为什么使用location的属性和方法呢?
  • 属性展示
    • href
    • host
    • hostname
    • port
    • protocol
    • pathname
  • 方法展示
    • replace(url)
    • assign(url)
    • reload()
    • toString()
  • 总结
    • 属性总结:
    • 方法总结:


前言

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

运行结果:

点击前:
javascript之location常用属性和方法_第1张图片

点击后:
javascript之location常用属性和方法_第2张图片

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>

运行结果:

点击前:
javascript之location常用属性和方法_第3张图片

点击后:
javascript之location常用属性和方法_第4张图片

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>

运行结果:

点击前:
javascript之location常用属性和方法_第5张图片
点击后:
javascript之location常用属性和方法_第6张图片

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>

运行结果:

点击前:
javascript之location常用属性和方法_第7张图片

点击后:

javascript之location常用属性和方法_第8张图片

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>

运行结果:

点击前:
javascript之location常用属性和方法_第9张图片
点击后:
javascript之location常用属性和方法_第10张图片

方法展示

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>

运行结果:

点击前:

在这里插入图片描述

点击后:
javascript之location常用属性和方法_第11张图片

总结

属性总结:

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

方法总结:

关键单词 作用
assign(url) 加载一个新的URL,并在浏览器历史记录中生成新的记录。
replace(url) 加载一个新的URL,并替换当前的历史记录。
reload() 重新加载当前页面。
toString() 返回当前页面的完整URL字符串。

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