实现页面无刷新改变URL

1 篇文章 0 订阅

通过查阅资料总结如下,如有错误一起交流。共同进步

此题的意思是说页面不需要刷新而只改变他的URl,这样便于此时的页面保存为书签。其中的关键就是利用了js中history对象的两个新成员pushstate 和replacestate,然后再结合Ajax的异步传输功能。

浏览器的问题:chrome,firefox以及IE10.0以上才可以使用这项功能。

对比传统的Ajax

1、可以无刷新改变页面内容,但无法改变页面URL

2、为了更好的可访问性,内容发生改变后,改变URL的hash(从#开始的URL)

3、hash的方式不能很好的处理浏览器的前进、后退等问题

这样就引入了两个新的浏览器操作接口pushstate 和replacestate

下面我们就重点介绍这两个接口的功能以及如何使用:

1、pushState是将指定的URL添加到浏览器历史里

其中:var state = {   

                 title: title,
                url: options.url,
                otherkey: othervalue
           };

window.history.pushState(state, document.title, url);     //三个参数,分别为:状态对象,标题(目前被浏览器忽略),地址

说明state是一个字典数组,里面存放的数据。另外window对象上提供了onpopstate事件(浏览器上的前进和后退操作),上面传递的state对象会成为event的子对象,这样就可以拿到存储的title和URL了。

 //当onpopstate这个event事件发生时,上面的state对象会成为event的子对象,这样就可以拿到存储的state对象的content.innerHTML和page了。
 var popstate = function(){
  title = history.state.title;
  url = history.state.url;
  //测试说明popstate事件表示浏览器前进和后退  alert(history.state.title+",....,"+history.state.url);
 };
 window.addEventListener('popstate', popstate, false);};  //popstate函数监听popstate事件。

2、replaceState是将指定的URL替换当前的URL。只将新的URL内容显示出来而没有必要刷新。

//指定的URL替换当前的URL,有三个参数其中第一个是字典数组表示状态对象,第二个是标题,第三个是地址

 window.history.replaceState(    
  {
         title: title,
         url: options.url,
  },
  page,
  urlbase + (page > 1 ? '?page=' + page : '' )  //产生新的URL
 );

不管怎么样新的知识点就只有这几点,下面举一个例子会比较好理解:

下面的例子代码用的是php语言实现的,功能是:改变页码时URL改变而不刷新页面,并且可以将URL保存到标签里,另外可以实现前进与后退操作。

 


     
     




     
     
修改url而不刷新页面
<script type="text/javascript">
var domLoaded = function(){
	if(ua != null && ua[1] < 10){
		alert('您的浏览器不支持');  //如果是IE浏览器且版本小于10.0就没有这个功能
		return ;
	}
 
	if(location.href.indexOf("?") > -1){
		var urlparts = location.href.match(/(.+?)\?.+/i);  
		var urlbase = urlparts[1];   //此时取到的字符串是?前面的
	}
	else{
		var urlbase = location.href;
	}
	var page = 
     
     ;
	var ua = window.navigator.userAgent.match(/msie (\d\.\d)/i);  //msie表示微软的IE浏览器的所有版本
	var content = document.getElementById("content");
	var loading = document.getElementById("loading");
 
  //指定的URL替换当前的URL
	window.history.replaceState(     
		{
			content:content.innerHTML,
			page:page
		},
		page,
		urlbase + (page > 1 ? '?page=' + page : '' )  //产生新的URL
	);
 
	var ajax = new XMLHttpRequest(); //实例化一个异步请求对象
	//接收来自服务器的消息响应函数
	var ajaxCallback = function(){    
		if(ajax.readyState == 4){
			loading.style.display = 'none';   
			content.innerHTML = ajax.responseText;    
			//将指定的URL添加到浏览器列表里
			window.history.pushState(
				{
					content:content.innerHTML,
					page:page
				},
				page,
				urlbase + "?page=" + page
			);
			next.href = urlbase + "?page=" + (page + 1);  
		}
	};
 

	//典型的Ajax程序
	var next = document.getElementById('next');
	var nextClickEvent = function(event){
		if(loading.style.display != 'block'){
			loading.style.display = 'block';
			page++;
			ajax.open('GET', urlbase + '?page=' + page + '&ajaxload=on', true);
			ajax.onreadystatechange = ajaxCallback;
			ajax.send('');
			event.preventDefault();  //关闭该对象(a)的默认作用,阻止页面刷新
		}
	};
	next.addEventListener('click', nextClickEvent, false);//将click这个事件绑定到nextClickEvent()函数上监听,false表示是要以冒泡事件监听
	
	//当onpopstate这个event事件发生时,上面的state对象会成为event的子对象,这样就可以拿到存储的state对象的content.innerHTML和page了。
	var popstate = function(){
		content.innerHTML = history.state.content;
		page = history.state.page;
	};
	window.addEventListener('popstate', popstate, false);
};  //domLoaded监听函数结束
 

try{
	window.addEventListener('DOMContentLoaded', domLoaded, false);
}
catch(e){
	alert('您的浏览器不支持');	
}
</script>


	

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值