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

﹏ヽ暗。殇╰゛Y 2023-10-01 13:12 28阅读 0赞

#### **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);
    }