题目内容

JavaScript location 对象

题目答案

■知识点

location对象存储了与当前文档位置（URL)相关的信息，简单地说就是网页地址字符串。使用window对象的location属性可以访问。

location对象定义了8个属性，其中7个属性可以获取当前URL的各部分信息，另一个属性（href)包含了完整的URL信息，详细说明如表所示。为了便于更直观地理解，表中各个属性将以下面的URL示例信息为参考进行说明。

http://www.mysite.cn:80/news/index.asp?id=123&name= location#top

属性	说明
href	声明了当前显示文档的完整URL，与其他location属性只声明部分URL不同，把该属性设置为新的URL会使浏览器读取并显示新的URL内容
protocol	声明了 URL的协议部分，包括后缀的冒号。例如：“http:”
host	声明了当前URL中的主机名和端口部分。例如：“www.mysite.cn:80”
hostname	声明了当前URL中的主机名。例如：“www.mysite.cn”
port	声明了当前URL的端口部分。例如： “80”
pathname	声明了当前URL的路径部分》例如：“ news/index.asp ”
search	声明了当前URL的查询部分，包括前导问号。例如：“?id=123&name=location”
hash	声明了当前URL中锚部分，包括前导符（#)。例如：“#top”，指定在文档中锚记的名称

使用location对象，结合字符串方法可以抽取URL中查询字符串的参数值。

■实例设计

下面的示例定义了一个获取URL査询字符串参数值的通用函数，该函数能够抽取每个参数和参数值，并以名/值对的形式存储在对象中返回。

var querystring = function () { //获取URL査询字符串参数值的通用涵数

var q = location.search.substring(1); //获取査询字符串，如:“id=123.&nanvd= location”

var a = q.split("&"); //以&符号为界把査询字符串劈开为数组

var o = {}; //定义一个临时对象

for( var i = 0; i <a.length; i++) //遍历数组

var n = a[i].indexOf("="); //获取每个参数中的等号下标位置

if (n == -i) continue; //如果没有发现则跳到下一次循环继续操作

var vl = a[i].substring(0, n); //截取等号前的参数名称

var v2 = a[i].substring (n+1); //截取等号后的参数值

o[vl] = unescape (v2); //以名/值对的形式存储在对象中

}

return o; //返回对象

}

调用该函数，即可获取URL中的查询字符串信息，并以对象形式读取它们的值。

var fl = querystring(); //调用查询字符串函数

for(var i in fl) { //遍历返回对象，获取每个参数及其值

console.log(i + "=" + f1[i]);

}

如果当前页面的URL中没有查询字符串信息，用户可以在浏览器的地址栏中补加完整的查询字符串，如“？id=123&name= location”，再次刷新页面，即可显示查询的查询字符串信息。

如果改变 location.hash 属性值，则页面会跳转到新的描点（<a name="anchor">g!<i<element id="anchor">), 但页面不会重载。

location.hash = "#top";

除了设置location对象的href属性外，还可以修改部分URL信息，用户只需要给location对象的其他属性赋值即可。这时会创建一个新的URL，浏览器会将它装载并显示出来。

如果需要URL其他信息，只能通过字符串处理方法截取。例如，如果要获取网页的名称，可以这样设计。

var p = location.pathname;

var n = p.substring(p.lastlndexOf("/")+!);

如果要获取文件扩展名，可以这样设计。

var c = p.substring(p.lastlndexOf(".")+1);

location对象还定义了两个方法：reload()和replace()。

reload()：可以重新装载当前文档。

replace()：可以装载一个新文档而无须为它创建一个新的历史记录。也就是说，在浏览器的历史列表中，新文档将替换当前文档。这样在浏览器中就不能够通过“返回”按钮返回当前文档。对那些使用了框架并且显示多个临时页的网站来说，replaceO方法比较有用。这样临时页面就不会被存储在历史列表中。