使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL

后退时关闭当前页面
<script type="text/javascript">
jQuery(document).ready(function ($) {
        if (window.history && window.history.pushState) {
            $(window).on('popstate', function () {
      WeixinJSBridge.call('closeWindow');
      /**
      window.opener=null;
          window.open('','_self');
          window.close();
      */
            return false;
            });
            window.history.pushState('forward', null, 'Wx.AuthSuccess.jdp');
  //  window.history.pushState('forward', null, 'baidu.com');
  //window.location.href="www.baidu.com";

  //WeixinJSBridge.call('closeWindow');
        }
    });
</script>



======================================================================
QA team通过Tealeaf 和Avicode检测到application有很多的500 errrors,因此这2周几乎都在解决这个问题。通过reproduce这些各种不同的错误，几乎可以把原因归结在浏览器的后退按钮（pressing back button）和键盘的后退键 (backspace),和leader交流下，觉得有必要阻止页面后退。

当然，相关的文章到处走势，其实就是一篇文章都是转来转去的.基本上是3个solution:

1).设置网页过期（服务器端）

2).javascript：window.history(客户端)

3).对于键盘的backspace.通过window.event来过滤，当然要考虑的是对于Input控件，要保持删除的功能。

<script type="text/javascript">

function backspace() {

if (event.keyCode == 8 && event.srcElement.tagName != "INPUT" && event.srcElement.type != "text")

            event.returnValue = false;

     }

if (navigator.appName == "Microsoft Internet Explorer") {

         window.history.forward(1);

     }

else // if it is Mozilla than

     {

         window.history.forward(-1);

     }   

</script>

下面是我的尝试：

1) 先来说对于，网页过期的：

网页一旦过期，意味着每次页面的刷新，需要重新从服务器端获取所有的网页资源。这时候如果通过浏览器的后退按钮，进行后退，就会reload整个页面，相当于一个get request.因此对于相应页面会执行 OnLoad事件，以及OnLoadCompleted事件

若在OnLoadCompleted事件页面没能获取到所需要的资源，将会显示网页已过期的错误。但是无论讲＊＊＊＊＊怎样添加到页面中，都不能重现网页已过期的错误，

2) 对于页面可客户端的OnLoad执行脚本： Windows.History.Forward(1)，对于这个方法别人说不完美，但没有说处理理由。我相说的是，对于直接点击后腿按钮的情况，Window.History.Forward(1)几乎可以Cover 大多数场景，只是一个奇怪的事情当所有的后退经过一个页面的时候，就会停止，不会继续forward 到原来页面。原以为这就是我们的解决500 errors的钥匙，但是一次不经意的聊天，让我们想起了，如果不是点击后腿按钮，而是选择HIstory List中网页，又该如何去处理？ 为了解决这一问题，我有2个想法

a）获取选择HistoryList中页面的index,然后Windows.History.Froward(index), 查阅资料，最后在msdn上看到的解释是，处于安全的因素microsoft 不会暴露Window.history对象中url 实际地址和Index，也就是说无法得到HistoryList 网页的具体信息。

b)  记录后退之前页面的URL，然后直接用Windows.Location.Href,记录后退之前的url这个不难，<%= %> <%#%>, 均可做到，但是问题来了，如何区分网页的get reque是由于后退造成的，似乎有一个无解！

不过在探索a,b 的时候，想到2个问题

1）关于Windows..history.forward()；如果windows.history List中只有5个页面，但是我把Windows..history.forward(100)，结果会是如何。

2）如果我在history list选择一个距离当前页面距离不是1的页面 Windows..history.forward(1),会如何工作？

解释：

   1)其实Windows..history.forward(100)和Windows..history.forward(1)的效果是一样的.

   那Windows..history.forward(1),究竟是如何工作的，通过http watch

wps_clip_image-11801

可以看到，Windows..history.forward(1),总是会将windows.history.list里买你的所有页面走完，直到页面再也不能往前，对于windows.history.list.length=5的时候，无论在哪个页面发起history,forward(1)，都会走到当前页面。因此是可以很好地阻止页面后退，缺点是带来了很多的额外的http request,因为需要一个页面一个页面后退。

另外一个奇怪的问题：在我们的一个application里面我发现，windows.history.forward(1)，会走到某个页面，停止。以至于在那个页面之后的页面，就无法实现组织后退的功能。我偶然发现对于windows.history.forward(1)页面居然会执行OnInit ,Onload ,OnloadComplete这些事件，我很费解，为什么windows.history.forward会触发服务器端事件呢，然来是因为在基类里面设置了缓存过期，这样每次需要从server上取页面资源 。

因此页面过期和windows.history.forward是不可以一起使用的