使用location对象可以通过很多方式来改变浏览器的位置,总结如下:
跳转到新的URL | loncation.assign | loncation.assign("http://www.baidu.com") |
window.location | window.location="http://www.baidu.com" | |
location.href | location.href="http://www.baidu.com" | |
设置或改变URL的部分值,
| hash(片段标识符) | 假设URL初始值为http://www.wrox.com/WileyCDA/ location.hash="#section1"; 将URL修改为了http://www.wrox.com/WileyCDA/#section1 |
search(查询字符串) | 假设URL初始值为http://www.wrox.com/WileyCDA/ location.search="?setion1"; //将URL修改为“http://www.wrox.com/WileyCDA/?section1”; | |
hostname(服务器名称) | 假设URL初始值为http://www.wrox.com/WileyCDA/ location.hostname="www.yahoo.com"; //将URL修改为“http://www.yahoo.com”; | |
pathname(文件路径) | 假设初始URL为“http://www.yahoo.com”; location.pathname="mydir"; //将URL修改为"http://www.yahoo.com/mydir/" | |
port(端口号) | 假设初始URL为“http://www.yahoo.com/mydir/”; location.port=8080;//无需双引号; //将URL修改为"http://www.yahoo.com:8080/WileyCDA/" |
备注:在IE8、Firefox1、Safari2+、Opear9+和Chrome中,修改hash(片段标识符)的值会在浏览器的历史记录中生成一条新记录。在IE的早期版本中,hash属性不会在用户单击“后退”和前进按钮时被更新,只会在用户单击包含hash的URL时才会被更新。
如果需要禁用生成新的记录,则可以使用replace()方法,使用这个方法之后,浏览器位置虽然会发生改变,但不会在浏览器中生成新的访问记录,用户无法后退,不能回到前一个页面,例子如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>你无法再次回到这个页面</title>
</head>
<body>
<p>三秒之后这个页面会跳转到百度,之后无法再回到之后页面</p>
<span id="second"></span>
<script type="text/javascript">
var second=document.getElementById("second");
var i=3;
function goTo(){
second.innerHTML=i;
i--;
if(i>0){
//通过超时调用实现延时调用的效果
setTimeout(goTo,1000);
}else{
location.replace("http://www.baidu.com");
};
};
goTo();
</script>
</body>
</html>
页面跳转之后,无回退键;
location的最后一个方法是reload(),这个方法选择是否可以传递一个参数true;
如果location调用reload()方法不传递参数true,则浏览器会采用最有方式,在浏览器已有的缓存上加载当前页面,如果传递参数true,则浏览器会将当前页面全部重新加载不使用缓存;
location.reload();//重新加载(有可能从缓存中加载)
location.reload(true);//重新加载(页面所有内容重新从服务器获取);