使用location操作浏览器的页面跳转

16 篇文章 0 订阅
3 篇文章 0 订阅

使用location对象可以通过很多方式来改变浏览器的位置,总结如下:

跳转到新的URLloncation.assignloncation.assign("http://www.baidu.com")
window.locationwindow.location="http://www.baidu.com"
location.hreflocation.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);//重新加载(页面所有内容重新从服务器获取);

 

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值