关于Location对象的总结
在W3C中,Location是window下的一个对象,所以在使用Location时,可以省略写window,直接写成location.herf酱紫就可以。既然是对象,那么就有它对应的属性和方法,下面我们来一一介绍。
属性 | 描述 |
---|---|
hash | 设置或返回从井号 (#) 开始的 URL(锚) |
host | 设置或返回主机名和当前 URL 的端口号 |
hostname | 设置或返回当前 URL 的主机名 |
href | 设置或返回完整的 URL。 |
pathname | 设置或返回当前 URL 的路径部分 |
port | 设置或返回当前 URL 的端口号 |
protocol | 设置或返回当前 URL 的协议 |
search | 设置或返回从问号 (?) 开始的 URL(查询部分) |
方法 | 描述 |
---|---|
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>