JS基本语法-JavaScript中的常用对象5-location对象，提供窗口URL信息

liranke

已于 2022-01-20 16:45:19 修改

阅读量854

点赞数 1

分类专栏： JavaScript笔记文章标签： javascript 前端 js location location对象 url跳转

于 2022-01-17 08:30:00 首次发布

本文链接：https://blog.csdn.net/liranke/article/details/122522438

版权

JavaScript笔记专栏收录该内容

21 篇文章 2 订阅

订阅专栏

1. 简介：

location，翻译成中文意为“地方; 地点; 位置”。在javascript中，location对象，指的是地址对象，而不是位置对象。location对象用于访问某一个窗口对象所打开的“地址信息”，这里的“地址信息”即URL信息，Uniform Resource Location（统一资源定位符）。location对象也是window对象的一个属性。可以利用location对象从尽兴网页的跳转。

2. location对象举例：

例子1:网页的跳转:跳转到百度首页

程序代码：

location.js:

function gotoUrl(url){
  console.log(url);
  location.href = url;
}

location.html:

<!DOCTYPE html>
<html>
<body>
	<script src="./location.js"></script>

<h1>location对象测试：</h1>
<button type="button" onclick='gotoUrl("http://www.baidu.com")'>Next</button>

</body>
</html>

运行结果：

打开网页，点击“Next”，就调转到百度首页了。再点击浏览器的“后退”键就回到刚才自己定义的页面了。

3. location对象更多的属性和方法：

location对象的属性和方法，参考如下：
属性：

host: 返回主机名和端口号，如：'blog.csdn.net:8080'。

hostname: 返回地址的主机名，例如，“https://blog.csdn.net/liranke/article/details/122376034”的地址，location.hostname 值为 'blog.csdn.net'。

port：返回地址的端口号，一般 http 的端口号是 '80'。

protocol：返回地址的协议，取值为 'http:','https:','file:' 等等。在一个url中，协议是URL的起始部分，直到包含到第一个冒号。

pathname：返回路径名，即不包含protocol，主机名和端口号的url字符串。

hash：返回“#”以及以后的内容，如果地址里没有“#”，则返回空字符串。

href：返回整个地址。在浏览器的地址栏上怎么显示它就怎么返回。

search 返回“?”以及以后的内容，如果地址里没有“?”，则返回空字符串。

方法：

reload() 重新加载，即刷新当前URL。相当于按浏览器上的“刷新”(IE)。

replace() 打开一个新的URL，注意，使用replace后，点击浏览器的“后退”键将不能返回到刚才的页面。

更多例子代码：

function getUrlInfo(url) {
  console.log(url);
  location.href = url;
  console.log(location.host);
  console.log(location.hostname);
  console.log(location.port);
  console.log(location.protocol);
  console.log(location.hash);
  console.log(location.search);
  console.log(location.href);
}

liranke

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS基本语法-JavaScript中的常用对象5-location对象，提供窗口URL信息

在javascript中，location对象，指的是地址对象，而不是位置对象。location对象用于访问某一个窗口对象所打开的“地址信息”，这里的“地址信息”即URL信息，Uniform Resource Location（统一资源定位符）。location对象也是window对象的一个属性。可以利用location对象从尽兴网页的跳转。
复制链接

扫一扫