Ajax加载页面浏览器前进后/退按钮失效的解决方案

最新推荐文章于 2021-08-06 14:39:06 发布

jkkl2016

最新推荐文章于 2021-08-06 14:39:06 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/jkkl2016/article/details/8587708

版权

javacript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、使用Ajax局部刷新页面技术的几点不爽之处：
（1）、浏览器的前进/后退按钮失效。
（2）、加载页面刷新后，显示的是原始页,而不是加载后的页面。
（3）、加载后的页面，无法通过url分享，或进行收藏。
在Jquery下的解决方案：
1、既不使整个页面刷新，又能改变地址栏的URL，一种可行的方法就是采用锚点（anchor 对此陌生的码农参看html手册超链接，或下文 demo.php中a标签的href的值）。
2、通过jquery-hashchange插件，捕获url变动消息，响应$(window).hashchange(）函数。
3、在该响应函数中，获取锚点，通过锚点值，向所加载页面传值。

下面例子概述：demo.php 为主页面，通过load(),默认加载demo1.php,当点击页面的“加载内容”链接时，通过load()加载demo2.php,此时，上述三个不爽之处，均已解决。

注意：demo.html中要自己加载上jquery插件和jquery-hashchange插件（链接地址已给出）。

demo.html

<html >
<script type="text/javascript" src="js/jquery.min.js"></script><!--引入jquery-->

<script type="text/javascript" src="js/jquery.ba-hashchange.min.js"></script>
<!---引入jquery-hashchange下载地址：http://benalman.com/projects/jquery-hashchange-plugin/
-->
<!--引入jquery-hashchange插件-->
<body >
<meta charset="utf-8">
<a href="#demo2.html/username/uerid">加载内容</a><!--锚链接传值信息。-->
<div id = "content">
  <!--动态加载区-->
</div>
<script type="text/javascript">
 $(function(){
  $(window).hashchange(function(){//响应url地址栏变动消息
   var hash = location.hash;//获取锚点值
   if(hash != false){
    
    var url_arr = hash.replace(/^#/,'').split('/');//解析锚点中的参数
          //加载页面，有参数时，默认采用post方法传递参数，
    $('#content').load(url_arr[0],{ "username":url_arr[1],"userid":url_arr[2]});
   } else {

    $('#content').load('demo1.html');//默认加载页面。
   }
  })// End window.hashchange()
  
  $(window).hashchange();

 })

 </script>
<body>
</html>

demo2.html

<div>
<!--参考的 php接收参数代码
 $_POST['username'];
    $_POST['userid'];
-->

 解析锚点通过，load（）加载demo2.html 
    come from demo2.html</div>

demo1.html

<div>
 默认加载页面：come from demo1.html</div>

参考文献：

http://xinple.org/?p=410

jkkl2016

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax加载页面浏览器前进后/退按钮失效的解决方案

1、使用Ajax局部刷新页面技术的几点不爽之处：（1）、浏览器的前进/后退按钮失效。（2）、加载页面刷新后，显示的是原始页,而不是加载后的页面。（3）、加载后的页面，无法通过url分享，或进行收藏。在Jquery下的解决方案： 1、既不使整个页面刷新，又能改变地址栏的URL，一种可行的方法就是采用锚点（anchor 对此陌生的码农参看html手册超链接，或下文 demo.ph
复制链接

扫一扫