当前位置:首页 > 开发 > Web前端 > Ajax > 正文

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

发表于: 2015-07-19   作者:lanrikey   来源:转载   浏览:
摘要: 后退时关闭当前页面 <script type="text/javascript"> jQuery(document).ready(function ($) {         if (window.history && window.history.pushState) {
后退时关闭当前页面
<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是不可以一起使用的

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

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

推荐文章
编辑推荐
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号