JS--JavaScript中的location对象概述和API详解

location对象概述

location对象存储当前页面与位置(URL)相关的信息,表示当前显示文档的Web地址。使用window对象的location属性可以访问。

location对象定义了8个属性,其中7个属性分别指向当前URL的各部分信息,另一个属性(href)博阿寒了完整的URL信息,详细说明如下表:

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

示例:定义一个获取URL查询字符串参数值的通用函数,以键值对存储在对象内返回

<script>
	var queryString = function(){
		var q = location.search.substring(1); //获取查询字符串
		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;
	}
	
	var f = queryString();
	for(var i in f){
		document.write(i + "=" + f[i]);
	}
</script>

在这里插入图片描述
注 意 : \color{red}{注意:} location对象的属性都是可读可写的,如果改变了文档的location属性值,则浏览器就会载入新的页面。如果改变了location.hash属性值,则页面会跳转到新的锚点,但此时页面不会重载。

如果把一个含有URL的字符串赋给location对象或它的href属性,浏览器就会把新的URL所指向的文档装载并显示出来。

location = "http://www.baidu.com";
location.href ="http://www.baidu.com";

如果需要URL的其他信息,只能通过字符串处理的方式截取。
例如:如果要获取网页的名称,可以使用以下方式

var p = location.pathname;
var name = p.substring(p.lastIndexOf("/" + 1);

如果要获取文件扩展名,可使用以下方式

var p = location.pathname;
var c = p.substring(p.lastIndexOf("." + 1);

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

  • reload():
    可以重写装载当前文档
  • replace():
    可以装载一个新文档而无需为它创建一个新的历史记录。也就是说,在浏览器的历史列表中,新的文档将会替换当前文档。这样浏览器中就不能通过【返回】按钮返回当前文档了。

对于那些使用了框架并且显示多个临时页面的网站来说,replace()方法比较有用,这样临时页面不会存储在历史记录中。

注 意 : w i n d o w . l o c a t i o n 与 d o c u m e n t . l o c a t i o n 不 同 , 前 者 引 用 l o c a t i o n 对 象 , \color{red}{注意:window.location与document.location不同,前者引用location对象,} window.locationdocument.locationlocation 后 者 只 是 一 个 只 读 字 符 粗 , 与 d o c u m e n t . U R L 同 义 。 \color{red}{后者只是一个只读字符粗,与document.URL同义。} document.URL
当存在服务重定向时,document.location包含的是已经装载的URL,而location.href包含的则是原始请求的文档的URL。

  • 5
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值