JavaScript Location 对象详解：属性、方法与跨域限制

Location 对象概述与安全限制

若要指定某个窗口的地址，可以使用“<窗口对象>.location”语法。此前曾介绍过利用 window.location.href 刷新其他框架页面的方法，在此进一步梳理 location 对象的详细用法并进行优化，具体说明如下。

需要注意的是，属于不同协议或不同主机的两个地址之间无法互相引用对方的 location 对象，这是出于安全性的考虑。例如，当前窗口访问的是“www.a.com”下的页面，而另一个名为 bWindow 的窗口访问的是“www.b.com”的网页。若在当前窗口尝试访问“bWindow.location”，将会抛出“没有权限”的错误。此错误无法通过错误处理程序（Event Handler，参考 onerror 事件）进行捕获和处理。

首先简要介绍 location 对象的属性、用法及相关示例。

Location

该对象包含了当前 URL 的完整信息。location 对象描述了与特定 Window 对象关联的完整统一资源定位符（URL）。location 对象的各个属性分别对应 URL 的不同组成部分。

通常情况下，URL 遵循以下格式：协议//主机:端口/路径名称#哈希标识?搜索条件。

例如：http://www.webjx.com/jiaocheng/index.html#topic1?x=7&y=2，各部分含义如下：

“协议”是 URL 的起始部分，直至第一个冒号为止。

“主机”表示主机名、域名或网络主机的 IP 地址。

“端口”表示服务器用于通信的端口号。

“路径名称”表示 URL 中的路径信息。

“哈希标识”表示 URL 中的锚点名称，包含哈希符号 (#)。此属性仅适用于 HTTP 协议的 URL。

“搜索条件”表示 URL 中的查询信息，包含问号。此属性仅适用于 HTTP 协议的 URL。“搜索条件”字符串包含变量与值的配对，每对之间由“&”符号连接。

Location 属性详解

属性概览

protocol：返回地址的协议，取值如 'http:'、'https:'、'file:' 等。

hostname：返回地址的主机名，例如对于“http://www.microsoft.com/china/”地址，location.hostname 的值为 'www.microsoft.com'。

port：返回地址的端口号，通常 HTTP 的端口号为 '80'。

host：返回主机名和端口号，例如 'www.a.com:8080'。

pathname：返回路径名，例如对于“http://www.a.com/b/c.html”，location.pathname 的值为 'b/c.html'。

hash：返回“#”及其后的内容，例如对于“http://www.a.com/b/c.html#chapter4”，location.hash 的值为 '#chapter4'；若地址中无“#”，则返回空字符串。

search：返回“?”及其后的内容，例如对于“http://www.a.com/b/c.asp?selection=3&jumpto=4”，location.search 的值为 '?selection=3&jumpto=4'；若地址中无“?”，则返回空字符串。

href：返回上述所有内容的组合，即整个地址。浏览器地址栏显示什么，该属性就返回什么。若需让一个窗口对象打开特定地址，可使用“location.href = '...'”，也可直接使用“location = '...'”来实现。

Location 方法说明

方法概览

reload()：功能相当于点击浏览器上的“刷新”（IE）或“Reload”（Netscape）按钮。

replace()：打开一个 URL，并替换历史对象中当前位置的地址。使用此方法打开新 URL 后，点击浏览器的“后退”键将无法返回之前的页面。

页面跳转代码示例

二、location 实现的页面跳转 JavaScript 代码如下：

//简单跳转
function gotoPage(url) {
// eg. var url = "newsview.html?catalogid="+catalogID+"&pageid="+pageid;
window.location = url;
} 
// 对location用法的升级，为单个页面传递参数
function goto_catalog(iCat) {
if(iCat<=0) {
top.location = "../index.aspx"; // top出去
} else {
window.location = "../newsCat.aspx?catid="+iCat;
} 
} 
// 对指定框架进行跳转页面，二种方法皆可用
function goto_iframe(url) {
parent.mainFrame.location = "../index.aspx"; //
// parent.document.getElementById("mainFrame").src = "../index.aspx";// use dom to change page // 同时我增加了dom的写法
} 
// 对指定框架进行跳转页面，因为 parent.iframename.location="../index.aspx"; 方法不能实行，主要是 "parent.iframename" 中的iframename在js中被默认为节点，而不能把传递过来的参数转换过来，所以用dom实现了该传递二个参数的框架跳转页面，希望那位仁兄不吝赐教！
function goto_iframe(iframename,url) {
parent.document.getElementById(iframename).src = "../index.aspx";// use dom to change page by iframeName
//} 
// 回到首页
function gohome() {
top.location = "/index.aspx";
}