location对象
location提供了当前窗口中加载的文档有关的信息。location即是window对象的属性,又是documet对象的属性。所以window.location和document.location引用的是同一个对象。
location对象的所有属性
属性名 | 例子 | 说明 |
---|---|---|
hash | "#contents" | 返回URL中的hash(如果URL不包含散列,则返回为空字符串) |
host | "www.wrox.com:80" | 返回服务器名称和端口 |
hostname | "www.wrox.com" | 返回服务器名称 |
herf | "http://www.wrox.com" | 返回当前页面完整的URL |
pathname | "/WileyCDA" | 返回url中的目录和文件名 |
port | "8080" | 返回端口 |
protocol | "http:" | 返回页面使用协议(http、https) |
search | "?q=javascript" | 返回url查询字符串。以问号开头 |
1.查询字符串参数
简单说location.search返回从问号到URL末尾的所有内容,但是并没有对参数进行逐个拆分。为此,可以尝试下面的demo拆分参数。
function getKeyAndValue() {
var qs = (location.search.length > 0 ? loction.search.substring(1) : "");
//
var args = {};
//
var items = qs.length ? qs.split("&") : [];
var item = null;
var name = null;
var value = null;
for (var i = 0; i < items.length; i ++){
item = items[i].split("=");
name = decodeURIComponent(item[0]);
value = decodeURIComponent(item[1]);
if (name.length){
args[name] = value;
}
}
return args;
}
上面这个方法非常简单,大家应该也都写过,所以不讲解了。
2.访问位置操作
其实通过location对象可以改变浏览器的访问位置。例如:
location.assign("https://www.baidu.com")
//上面的方法,也可以这样写
windwo.location = "https://www.baidu.com"
location.herg = "https://www.baidu.com"
除了上述操作外,也可以使用hash、search、hostname、pathname、port属性设置新值改变URL
//初始URL为https://www.baidu.com
//将URL改成"https://www.baidu.com/#section1"
location.hash = "#section1"
//将URL改成"https://www.baidu.com/?q=javascript"
location.search = "?q=javascript";
//将URL改成"https://www.yahoo.com"
location.hostname = "www.yahoo.com";
//将URL改成"https://www.baidu.com/mydir、"
location.pathname = "mydir";
//将URL改成"https://www.baidu.com:8080/"
location.port = 8080
每次修改location属性(hash除外),页面都会重新加载。
当以上面任何方式修改URL后,都会在浏览器生成一条历史记录。因此用户点击“后退”,会返回到前一个页面。如果想要禁止用户返回的话,可以使用replace()方法。这个方法值接受一个参数url。该方法不会在历史记录中生成数据。
// setTimeout主要是用于延时执行方法
setTimeout( function(){
location.replace("https://www.baidu.com");
} 1000);
还有一个比较常用的方法reload(),可以重新加载当前页面。如果调用reload()时不传递任何参数,页面会以最有效的方式重新加载。如果想要强制加载需要传入true。
location.reload();
location.reload(true);
注:因为reload调用后的代码可能不会立刻被执行,所以最好将reload()放在代码最后一行
网友评论