博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
BOM中的那点事-location
阅读量:6257 次
发布时间:2019-06-22

本文共 2267 字,大约阅读时间需要 7 分钟。

      现在来了解一下JavaScript中的location对象。location记录了页面文档的位置信息,当然这个位置不是地址位置,而是指web中的文档位置。location其实是一个很特殊的对象,首先它是window的属性,同时也是document的属性,换句话说window.location和document.location引用的同一个对象。location的有用之处不仅仅是它记录文档信息,同时它还将文档的URL解析为不同的部分,编程时可以通过不同的属性方便地引用各个部分,下表列出来location中URL的各个部分:

 属性名称  示    例  描       述
 hash  #test  返回URL中的hash值,#号后跟数字,如果URL中没有哈希值返回空字符串
 host    返回服务器名称和端口号
 hostname    返回不含端口号的服务器名称
 href    返回加载文档的完整URL地址,location的toString函数返回该值
 pathname  /admin/login.html  返回URL中除server名称和端口的目录和文件名称
 port  80  服务器端口
 protocol  http  加载的文档URL所使用的协议
 search  ?q=javascript  返回查询字符串

虽然通过location可以轻易访问到查询字符串,但是想获取查询字符串中的参数就没有这么方便,可以通过如下函数来分离各个参数的名称和值:

1 function getQueryStringArgs() { 2     //获取查询字符串,通过substring去掉最前面的问号 3     var qs = (location.search.length > 0) ? location.search.substring(1) : ""; 4     //创建保存查询参数的对象 5     var args = {}; 6     //获取参数每一项 7     var argItems = qs.split('&'); 8     var item = null, name = null, value = null; 9     //遍历每个项目,通过=号分隔参数名称和值10     for (var i = 0; i < argItems.length; i++) {11         item = argItems[i].split('=');12         name = decodeURIComponent(item[0]);13         value = decodeURIComponent(item[1]);14         args[name] = value;15     }16 17     return args;18 }

通过location我们可以改变加载的文档。首先,也是最常用的方法就是使用assign,通过assign使窗体加载新指定的URL:

1 window.location.assign();

通过调用assign可以立即加载指定的URL,并且咋浏览器历史记录中增加一条,当然如果我们设置location.href属性的值或者直接设置location对象为一个URL,效果等同于调用assign一样,立即打开新的URL:

1 window.location = "http://www.google.com";2 window.location.href = ;

href的方式似乎是我们最常用的了。另外修改location中其他的属性也会改变加载的页面,使浏览器重新加载页面,如下代码:

1 window.location = "http://www.test.com";2 //修改hash3 location.hash = "#section";4 //修改查询字符串5 location.search = "?q=javascript";6 //修改服务器名称7 location.hostname = "www.google.com";8 //修改pathname9 location.pathname = "test";

当然通过上面的方法加载新的URL时会为浏览器历史记录增加一条,那么点击向后的时候会退回的前一个地址,如果我们不想记录浏览历史,可以通过replace函数来实现该功能:

1 window.location.replace();

location还有一个有用的函数reload,通过reload可以从新加载文档,但是首先会检查缓存区是否有该地址的文档,如果有从缓存区加载,否则从服务器加载,但是可以通过参数来取消这一策略:

1 //从新加载,有可能从缓存加载2 window.location.reload();3 //从新加载,直接从服务器加载4 window.location.reload(true);

location是一个非常有用的对象,在编程时经常会用到,在此仅当抛砖引玉。如果有其他值得注意的或者有错误欢迎指正。

 

有园友反应需要说明BOM和DOM,由于本文章不是介绍BOM和DOM,因此把相关链接贴出来,大家可以阅读:

关于JavaScript组成:

关于BOM:

也可以看:

关于DOM请看:

和:

转载于:https://www.cnblogs.com/gyycyy/archive/2012/08/08/locationInBOM.html

你可能感兴趣的文章
C#设计模式之十一享元模式(Flyweight Pattern)【结构型】
查看>>
基于zookeeper简单实现分布式锁
查看>>
Makefile:160: recipe for target 'all' failed (Ubuntu 16.06 + Opencv3.2)解决办法
查看>>
a WebSite for MapXtreme2005 Crack
查看>>
几种函数调用方式
查看>>
【MySQL】MySQL 常用语法之锁表与解锁表
查看>>
【142】阿蛮歌霸使用技巧
查看>>
HTTP 请求报文 响应报文
查看>>
[转载] 程序员必看:请不要做浮躁的人 24法则
查看>>
JavaWeb_JavaEE_命名规则
查看>>
HDU 4010 Query on The Trees
查看>>
[PAL规范]SAP HANA PAL 数据处理四分位间距检测Inter-quartile Range Test编程规范IQRTEST...
查看>>
[HDU 1317]XYZZY[SPFA变形][最长路]
查看>>
Skip list--reference wiki
查看>>
解决Asp输出乱码问题
查看>>
1941设置站点模板,一生珍藏,所有玩具
查看>>
程序员面试题:问谁养蛇?
查看>>
黑马程序猿_try-catch-finally
查看>>
Atitit.android webview h5运行环境总结
查看>>
腾讯与唯品会笔试面试经历
查看>>