JavaScript Location 对象详解：属性、方法与实例

Location 对象概述

在 JavaScript 中，Location 对象用于描述特定窗口所打开的地址。若需获取当前窗口的地址，直接引用“location”即可；若需操作其他特定窗口的地址，则应使用“<窗口对象>.location”的形式进行访问。

Location 对象的含义与功能

一、JS 中 Location 的含义

Location 对象存储在 Window 对象的 Location 属性中，代表了当前窗口中正在显示的文档的 Web 地址。其 href 属性存储了文档的完整 URL，而其他属性则分别描述了 URL 的各个组成部分。这些属性与 Anchor 对象（或 Area 对象）的 URL 属性非常相似。当 Location 对象被转换为字符串时，会返回 href 属性的值，这意味着在代码中可以直接使用 location 表达式来替代 location.href。

Anchor 对象表示文档中的超链接，而 Location 对象则表示浏览器当前显示的文档 URL（或位置）。Location 对象的功能远不止于此，它还能控制浏览器显示的文档位置。如果将包含 URL 的字符串赋值给 Location 对象或其 href 属性，浏览器便会加载并显示该新 URL 所指向的文档。

除了通过设置 location 或 location.href 用完整 URL 替换当前 URL 外，还可以修改 URL 的部分内容，只需给 Location 对象的其他属性赋值即可。这样做会生成一个新的 URL，其中部分与原始 URL 不同，浏览器随后会加载并显示它。例如，若设置了 Location 对象的 hash 属性，浏览器将跳转到当前文档中的指定位置；同样，若设置了 search 属性，浏览器将重新加载附加了新查询字符串的 URL。

除了 URL 属性外，Location 对象还提供了 reload() 方法以重新加载当前文档，以及 replace() 方法以加载新文档而不创建新的历史记录。这意味着在浏览器的历史列表中，新文档将直接替换当前文档，用户无法通过“后退”按钮返回到被替换前的页面。

Location 对象的属性详解

二、JS 中 Location 属性

| 属性 | 描述 | | :--- | :--- | | hash | 设置或返回从井号 (#) 开始的 URL（锚）。如果地址里没有“#”，则返回空字符串。 | | host | 设置或返回主机名和当前 URL 的端口号。 | | hostname | 设置或返回当前 URL 的主机名。 | | href | 设置或返回完整的 URL。在浏览器的地址栏上怎么显示它就怎么返回。 | | pathname | 设置或返回当前 URL 的路径部分。 | | port | 设置或返回当前 URL 的端口号。 | | protocol | 设置或返回当前 URL 的协议，取值为 'http:','https:','file:' 等等。 | | search | 设置或返回从问号 (?) 开始的 URL（查询部分）。 |

Location 对象的方法

三、JS 中 Location 对象方法

| 方法 | 描述 | | :--- | :--- | | assign() | 加载新的文档。 | | reload() | 重新加载当前文档，相当于按浏览器上的“刷新”(IE)或“Reload”(Netscape)键。 | | replace() | 用新的文档替换当前文档，相当于按浏览器上的“刷新”(IE)或“Reload”键。 |

Location 实际应用示例

四、JS 中 Location 实例

//简单跳转

function gotoPage(url) { 

var url ="url?catalogid="+catalogID; 

window.location =url; 

}

//为单个页面传递参数

function goto_catalog(iCat) { 

if(iCat<=0) { 

top.location = "url";

} else { 

window.location ="url?catid="+iCat; 

}

}

// 对指定框架进行跳转页面

function goto_iframe(url) { 

parent.mainFrame.location ="url"; 

}

以上所述即为 JavaScript 中 Location 对象的核心内容，包括其属性、方法及实际应用示例。希望这些信息能对读者有所帮助。