关于Location对象的总结

关于Location对象的总结

在W3C中，Location是window下的一个对象，所以在使用Location时，可以省略写window，直接写成location.herf酱紫就可以。既然是对象，那么就有它对应的属性和方法，下面我们来一一介绍。

Location 对象属性

属性	描述
hash	设置或返回从井号 (#) 开始的 URL（锚）
host	设置或返回主机名和当前 URL 的端口号
hostname	设置或返回当前 URL 的主机名
href	设置或返回完整的 URL。
pathname	设置或返回当前 URL 的路径部分
port	设置或返回当前 URL 的端口号
protocol	设置或返回当前 URL 的协议
search	设置或返回从问号 (?) 开始的 URL（查询部分）

Location对象方法

方法	描述
assign()	加载新的文档。
reload()	重新加载当前文档。
replace()	用新的文档替换当前文档。

tips:请注意，很多人都知道这些属性的返回值，但是往往会忽略掉，其实这些属性都是可以设置的

-------------------------------------------------------------------------------------Example-------------------------------------------------------------------------------------------

属性：

hash

<script>
	/*************************hash**********************/
     // 假如现在的URL='http://supergiker.com/index.html#123456'
	alert(location.hash);// 返回的是 #123456
</script>

host

<script>
	/*************************host**********************/
	// 假如现在的URL='http://supergiker.com:8090/index.html'
	var Host=location.host;
	var arr=Host.split(':');
	var hostname=arr[0];
	var port=arr[1]
	alert(Host);//弹出 supergiker.com:8090
	alert(hostname);//弹出 supergiker.com
	alert(port);//弹出 8090
</script>

hostname

<script>
        /*************************hostname**********************/
        // 假如现在的URL='http://supergiker.com'
	var domain=location.hostname;
	alert(domain)//弹出 supergiker.com
</script>

href

<script>
	/*************************href**********************/
	// 假如现在的URL='http://supergiker.com'
	var URL=location.href;
	alert(URL)//弹出 http://supergiker.com
</script>

pathname

<script>
	/*************************pathname**********************/
	// 假如现在的URL='http://supergiker.com/images/db.jpg'
	var pathname=location.pathname;
	alert(pathname)//弹出 /images/db.jpg
</script>

port

<script>
	/*************************port**********************/
	// 假如现在的URL='http://supergiker.com:8090'
	var port=location.port;
	alert(port)//弹出 8090
</script>

protocol

<script>
	/*************************protocol**********************/
	// 假如现在的URL='http://supergiker.com'
	var protocol=location.protocol;
	alert(protocol)//弹出 http:
</script>

search

<script>
	/*************************search**********************/
	// 假如现在的URL='http://supergiker.com/index.html?url=bigImg'
	var search=location.search;
	alert(search)//弹出 ?url=bigImg
</script>

方法：

reload()

<script>
	/*************************reload()**********************/
	var newBtn=document.createElement('button');
	var bodyChild=document.body.children;
	if(bodyChild.length!=0){
		document.body.insertBefore(newBtn,bodyChild[0]);
	}else{
		document.body.appendChild(newBtn);
	}
	newBtn.οnclick=function () {
		location.reload();//重新加载页面
	}
</script>

assign()

<script>
	/*************************assign()**********************/
	var newBtn=document.createElement('button');
	var bodyChild=document.body.children;
	if(bodyChild.length!=0){
		document.body.insertBefore(newBtn,bodyChild[0]);
	}else{
		document.body.appendChild(newBtn);
	}
	newBtn.οnclick=function () {
		location.assign('http://www.supergiker.com');
		//加载新文档，当用history.go(-1)跳转时，会跳转到你点击按钮的这个页面
	}
</script>

replace()

<script>
	/*************************replace()**********************/
	var newBtn=document.createElement('button');
	var bodyChild=document.body.children;
	if(bodyChild.length!=0){
		document.body.insertBefore(newBtn,bodyChild[0]);
	}else{
		document.body.appendChild(newBtn);
	}
	newBtn.οnclick=function () {
		location.replace('http://www.supergiker.com');
		/*加载新文档，当用history.go(-1)跳转时，会跳转到你点击按钮这个页面的之前的一个页面，点击按钮的这个
		页面应该是history.go(0)*/
	}
</script>