javascript之location常用属性和方法

已于 2023-12-28 15:52:08 修改
阅读量1.2k 收藏 47
点赞数 45
文章标签： javascript 开发语言 ecmascript
于 2023-12-28 15:49:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_72473547/article/details/135269951
版权

文章目录

前言

本章学习的是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
    点赞
  • 踩
  • 47
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS中Location使用详解
12-10
javascript中location地址对象描述的是某一个窗口对象所打开的地址。要表示当前窗口的地址，只需要使用“location”就行了；若要表示某一个窗口的地址，就使用“<窗口对象>.location”。 一、JS中Location的含义 1、Location 对象存储在 Window 对象的 Location 属性中，表示那个窗口中当前显示的文档的 Web 地址。它的 href 属性存放的是文档的完整 URL，其他属性则分别描述了 URL 的各个部分。这些属性与 Anchor 对象（或 Area 对象）的 URL 属性非常相似。当一个 Location 对象被转换成字符串，href 属
JavaScript基础知识及常用方法总结
10-22
在深入学习AJAX和现代前端框架之前，理解JavaScript的基础知识和常用方法是必不可少的。以下是对这些知识点的详细解释： 1. **基本输出**：`document.write("")` 用于在HTML文档中输出内容，但通常不推荐在实际项目...
js location
WITNESS
04-26 3178
location 地址对象 它描述的是某一个窗口对象所打开的地址。要表示当前窗口的地址，只需要使用“location”就行了；若要表示某一个窗口的地址，就使用“.location”。先前写了一片用window.location.href实现刷新另个框架页面 ，特此我看了一下locaiton的详细用法，对此有点改进，具体如下： 注意：属于不同协议或不同主机的两个地址之间不能互相引用对方的
location用法简单介绍
weixin_34232363的博客
12-20 215
先前写了一片用window.location.href实现刷新另个框架页面 ，特此我看了一下locaiton的详细用法，对此有点改进，现在我将他整理成js，方便查阅，也贴上和朋友们分享一下，具体如下：第一、简单介绍一下location属性、用法以及相关示例：Location包含了关于当前 URL 的信息。 描述location 对象描述了与一个给定的 Window 对象关联的完整 URL。loc...
location的方法
wang_swa99er的博客
08-11 958
location的方法 方法： location.assign(url) 【注】在当前窗口跳转到这个url location.replace(url) 【注】再当前窗口替换成新的url，不会产生历史记录 location.reload() 【注】刷新当前窗口 location.reload(true) 【注】不经过浏览器缓存强制从服务器重载(可以避免之前加载的历史记录) ...
location常见方法
m0_59359854的博客
07-01 1512
location.assign() 可跳转页面（重定向页面）location.replace() 替换当前页面，不记录历史，无法后退location.reload() 刷新页面f5，参数为true为强制刷新 ctrl +f5location方法 location方法 跳转页面后 无法后退 刷新页面 navigator对象可以判断 登陆的类型 移动端 还是网页端 window对象给我们提供了一个 history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的
javascript 常用的属性与方法
05-12
本篇文章主要聚焦于JavaScript中的一些常用属性和方法，特别是针对文档对象模型（DOM）的操作。 1. **document对象**：作为JavaScript中的全局对象，它代表了整个HTML或XML文档。例如，`document.title`用于设置或...
JavaScript获取浏览器信息的方法
11-24
在JavaScript中，获取浏览器信息是通过`navigator`对象实现的，该对象提供了访问有关用户浏览器的各种属性和方法。以下是一些重要的`navigator`对象属性及其用途： 1. **navigator.appCodeName**: 这个属性返回...
JavaScript 中 doucment 的常用方法
06-07
下面将详细介绍`document`对象的一些关键属性和方法。 ### 一、基本属性 1. **`document.title`**：此属性用于获取或设置HTML文档的标题，即`<title>`标签内的文本。 2. **`document.bgColor`**：设置或返回文档...
22.2 JavaScript 常用操作
最新发布
09-18
本文将详细讲解JavaScript中的常用操作，包括DOM（文档对象模型）和BOM（浏览器对象模型）的应用。 一、JavaScript基础操作 1. 变量声明：在JavaScript中，我们可以使用`var`, `let`, 或 `const`来声明变量。`var`...
location方法总结
cky的博客
05-07 2847
window.location方法获取URL　 完整的URL由这几个部分构成：　　scheme://host:port/path?query#fragment　　 scheme:通信协议　　常用的http,ftp,smtp等　　 host:主机(带端口号)　　服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。　　 port:端口号　　整数，可选，省略时使用方案的默认端口，如...
location常用方法
qq_38233172的博客
05-03 1088
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>location常用方法</title> </head> <body> <input type="button" id="btn" value="...
location的常用方法
yun_shuo的博客
03-20 1261
location的常用方法 location作为BOM对象的属性对象，包含有关当前 URL 的信息。以一个百度网页为例。 location.protocal获取当前url协议 HTTPS是一种全新的安全协议，对网站本身以及访问网站的网友都有着更好的安全性，防止隐私泄露。 location.host获取当前域名即当前 URL 的端口号 url：统一资源定位器 location.pathname获取文件路径名 location.search获取当前url参数 它将返回从问号 (?) 开始
location对象的方法
liulang68的博客
07-06 244
Location属性和方法
jiangqingzhihe的博客
07-18 1629
Location属性和方法 1、location用于获取或设置窗体的URL，并且可以用于解析URL,它同时是 Window 对象的一个部分，可通过 window.location 属性来访问 属性 描述 hash 返回锚点部分hash值 ...
JS之location对象详解
热爱前端的大三在校生
09-26 7714
location指示了其所连接对象的url位置。和对象中都有location属性，可以通过window.location和document.location访问。如果想要获得当前文档的完整url字符串，有四种方式以上方式均可以获得“”这样的字符串location在控制台输出结果为：（Chrome浏览器）
js中location对象详解
RayShyy的博客
03-16 9179
location 是最有用的 BOM 对象之一，提供了当前窗口中加载文档的信息，以及通常的导航功能。主要是对浏览器url地址相关数据的获取和定义。 1. location常用属性 location.href: 返回当前页面的完整的URL地址； location.search: 返回URL后面的参数(类似于"?name=lc&age=20")； location.protocol: 返回页面使用的协议(通常是"http:“或"https:”)； location.host: 返回页面的域名及端口.
JS中location的用法和作用
zwd926的博客
05-30 3549
window.location 对象所包含的属性： 属性 描述 hash 从井号 (#) 开始的 URL（锚） host 主机名和当前 URL 的端口号 hostname 当前 URL 的主机名 href 完整的 URL pathname 当前 URL 的路径部分 port 当前 URL 的端口号 protocol 当前...
js 模拟地址栏里常用的属性和方法
02-22
JavaScript模拟地址栏里常用的属性和方法包括window.location.href，window.location.hash，window.location.search，window.location.pathname，window.location.hostname，window.location.port，window.location.protocol，window.location.assign()，window.location.replace()和window.location.reload()。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值