首页 > 编程笔记 > JavaScript笔记 > JS BOM

JS location对象详解

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

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

举例说明:
http://www.123.cn:80/news/index.asp?id=123&name=location#top
location 对象属性
属性 说明
href 声明了当前显示文档的完整 URL,与其他 location 属性只声明部分 URL 不同,把该属性设置为新的 URL 会使浏览器读取并显示新 URL 的内容
protocol 声明了 URL 的协议部分,包括后缀的冒号。例如:“http:”
host 声明了当前 URL 中的主机名和端口部分。例如:“www.123.cn:80”
hostname 声明了当前 URL 中的主机名。例如:“www.123.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&name=location”
    var a = q.split ("&");  //以&符号为界把查询字符串劈开为数组
    var o = {};  //定义一个临时对象
    for (var i = 0; i < a.length; i ++) {  //遍历数组
        var n = a[i].indexOf ("=");  //获取每个参数中的等号下标位置
        if (n == -1) continue;  //如果没有发现则跳到下一次循环继续操作
        var v1 = a[i].substring (0, n);  //截取等号前的参数名称
        var v2 = a[i].substring (n + 1);  //截取等号后的参数值
        o[v1] = unescape (v2);  //以名/值对的形式存储在对象中
    }
    return o;  //返回对象
}
然后调用该函数,即可获取 URL 中的查询字符串信息,并以对象形式读取它们的值。
var f1 = queryString ();  //调用查询字符串函数
for (var i in f1) {  //遍历返回对象,获取每个参数及其值
    console.log(i + "=" + f1[i]);
}
如果当前页面的 URL 中没有查询字符串信息,用户可以在浏览器的地址栏中补加完整的查询字符串,如“?id=123&name=location”,再次刷新页面,即可显示查询的字符串信息。

location 对象的属性都是可读可写的。例如,如果把一个含有 URL 的字符串赋给 location 对象或它的 href 属性,浏览器就会把新的 URL 所指的文档装载进来,并显示出来。
location = "https://www.xinbaoku.com/dede/";  //页面会自动跳转到对应的页面
location.href = "https://www.xinbaoku.com/";  //页面会自动跳转到对应的页面
如果改变 location.hash 属性值,则页面会跳转到新的锚点(<a name="anchor"> 或 <element id="anchor">),但不会重载。
location.hash = "#top";
除了设置 location 对象的 href 属性外,还可以修改部分 URL 信息,用户只需要给 location 对象的其他属性赋值即可。这时会创建一个新的 URL,浏览器会将它装载并显示出来。

如果需要 URL 其他信息,只能通过字符串处理方法截取。例如,如果要获取网页的名称,可以这样设计。
var p = location.pathname;
var n = p.substring (p.lastIndexOf ("/") + 1);
如果要获取文件扩展名,可以这样设计。
var c = p.substring (p.lastIndexOf (".") + 1);
location 对象还定义了两个方法:reload() 和 replace()。 对那些使用了框架并且显示多个临时页的网站来说,replace() 方法比较有用。这样临时页面都不被存储在历史列表中。

window.location 与 document.location 不同,前者引用 location 对象,后者只是一个只读字符串,与 document.URL 同义。但是,当存在服务器重定向时,document.location 包含的是已经装载的 URL,而 location.href 包含的则是原始请求文档的 URL。

所有教程

优秀文章