清华社课件JavaScript交互式Web前端开发5.3 Location对象在Web开发中的应用.pptxVIP

Location对象在Web开发中的应用主讲：课程组

CONTENTS01Location对象概述02获取URL信息03页面跳转与刷新

Location对象概述01

Location对象简介Location对象功能实现获取和操作当前页面URL信息，以及页面跳转操作。Location对象定义JavaScript提供的Location对象，用于获取和设置URL信息。0102

Location对象访问方式Location对象属性Location对象是window对象的一个属性，通过window.location访问。省略window直接使用通常可以直接使用location代替window.location访问Location对象。

获取URL信息02

location.href属性location.href获取当前页面的完整URL，包含协议、主机名、端口号、路径、查询参数和哈希值等所有信息。获取完整URL

tocol属性tocol获取当前页面的协议部分，常见的协议有http:、https:等。获取URL协议部分

location.host属性location.host获取当前页面的主机名和端口号。如果URL中没有明确指定端口号，对于http协议默认端口号为80，https协议默认端口号为443，这种情况下不会显示端口号。获取主机名和端口号

location.hostname属性location.hostname仅获取当前页面的主机名，不包含端口号。获取主机名

location.port属性获取端口号location.port获取当前页面的端口号。如果URL中没有明确指定端口号，则返回空字符串。

location.pathname属性location.pathname获取当前页面的路径部分，即URL中主机名之后、查询参数之前的部分。获取路径部分

location.search属性获取查询参数location.search获取当前页面的查询参数部分，也就是URL中?后面的部分。如果没有查询参数，则返回空字符串。

location.hash属性获取哈希部分location.hash获取当前页面的哈希（锚点）部分，即URL中#后面的部分。如果没有哈希值，则返回空字符串。

页面跳转与刷新03

location.assign()方法assign()方法将当前页面跳转至新URL，并在历史记录中新增记录。01页面重定向至指定URL调用assign()后，用户可通过浏览器的“后退”功能返回至先前页面。02用户可后退至前页面

location.replace()方法用指定URL替换当前页面replace()方法用新URL替换当前页面，不创建历史记录。用户无法后退至前页面使用replace()后，用户无法使用“后退”按钮返回到之前的页面。

重新加载当前页面reload()方法使当前页面刷新，效果等同于手动刷新操作。location.reload()方法

谢谢主讲：课程组