- 浏览: 50536 次
- 来自: 深圳
文章分类
最新评论
后退时关闭当前页面
<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>
2、替换当前历史记录点
window.history.replaceState和window.history.pushState类似,不同之处在于replaceState不会在window.history里新增历史记录点,其效果类似于window.location.replace(url),都是不会在历史记录点里新增一个记录点的。当你为了响应用户的某些操作,而要更新当前历史记录条目的状态对象或URL时,使用replaceState()方法会特别合适。
3、监听历史记录点
监听历史记录点,直观的可认为是监听URL的变化,但会忽略URL的hash部分,监听URL的hash部分,HTML5有新的API为onhashchange,我的博客里也有说到该方法和跨浏览器的兼容解决方案。可以通过window.onpopstate来监听url的变化,并且可以获取存储在该历史记录点的状态对象,也就是上文说到的json对象,如:
// 当前的url为:http://www.qingdou.me/post-1.html
window.onpopstate=function()
{
// 获得存储在该历史记录点的json对象
var json=window.history.state;
// 点击一次回退到:http://www.qingdou.me/index.html
// 获得的json为null
// 再点击一次前进到:http://www.qingdou.me/post-1.html
// 获得json为{time:1369647895656}
}
值得注意的是:javascript脚本执行window.history.pushState和window.history.replaceState不会触发onpopstate事件。
还有一点注意的是,谷歌浏览器和火狐浏览器在页面第一次打开的反应是不同的,谷歌浏览器奇怪的是回触发onpopstate事件,而火狐浏览器则不会。
======================================================================
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是不可以一起使用的
===============================================================
按微信产品部副总经理张颖“每一个公众号都是一个APP”的说法,我们确实可以利用微信内置浏览器访问为公众号设计WebApp单页应用,以使得客户在访问公众号时有近似原生App的体验,不过目前这样的公众号很少,原因除了使用javascript开发单页应用的难度比开发一般的Web页面难度更高一些,更重要的一点是使用微信内置浏览器访问Web页面时,Android用户一按物理返回键就回到微信界面,而Android用户按物理返回键的习惯预期是回到上一页,这样就使得微信公众号的WebApp客户体验非常差。
有什么方法改变这一点么?最理想的解决办法是微信自己接管用户按物理返回键这个事件,然后类似像getNetworkType一样提供javascript事件给开发者使用。不过很遗憾,腾讯目前没有提供这个事件,而且看样子将来也不打算提供。
这个问题不是大问题,但如果不解决会影响Android用户的客户体验。幸运的是,我找到了解决办法,方法就是利用javascript window history来解决。
由于安全原因javascript不允许修改history里已有的url链接,但可以使用pushState方法往history里增加url链接,并且提供popstate事件监测从history栈里弹出url。我们可以利用这一点,在WebApp加载主界面后先往history里压入“#”链接,然后监听popstate事件,在Android手机的浏览器,按下物理返回键默认的操作是执行window.history.back(),此时将触发popstate事件。收到popstate事件时代码显示“再按一次退出程序”div顶层标签,此时history栈已经为空,如用户再次按下物理返回键将执行默认操作回到微信。接着,我们要设定一个定时器,在指定的时间(比如2秒)后如用户没有再次按下物理返回键将再次往history里压入“#”链接,并隐藏“再按一次退出程序”div顶层标签,等待用户下一次按下物理返回键。
pushHistory();
setTimeout(function () {
window.addEventListener("popstate", function(e) {
showBox("再按一次退出程序", 2000, function() {
pushHistory();
});
}, false);
08
}, 300);
function pushHistory() {
var state = {
title: "title",
url: "#"
};
window.history.pushState(state, "title", "#");
}
function showBox(msg, timeOut, onTimeOut) {
if (typeof alertBoxDiv === "undefined") {
alertBoxDiv = $("<div/>").addClass("alert-box hide").append( $("<div/>").addClass("label label-primary")).appendTo($("body"));
}
alertBoxDiv.children(".label").html(msg);
alertBoxDiv.removeClass("hide");
if (typeof timeOut === "undefined") timeOut = 2000;
setTimeout(function() {
alertBoxDiv.addClass("hide");
if (typeof onTimeOut !== "undefined") onTimeOut();
}, timeOut);
}
监听popstate事件的代码稍作修改就可以用于任意控制单页应用中javascript生成的任意动态页面的跳转,此方法已经在微信公众号WebApp中使用,可在微信中搜索“myfunds”公众号关注体验。这个方法也可以用于微信公众号之外的WebApp,链接就不发了,免得CSDN又要审查。
window.history.pushState('forward', null, 'Wx.deputyDiaryList.jdp?t='+new Date().getTime());
1.在一个页面中添加多少历史记录,后退,只要没有页面的转换,就不会跳转到页面;(A--B页面。再B页面pushState 多少记录,后退时 这些记录URL都不会刷新该URL的页面;只有在B到A的时候才会触发)
2.
微信中 只要按后退键就触发$(window).on('popstate', function () {};
浏览器中:
流程是:A->B,B原URL--新增一个新URL显示在地址栏--当按后退按钮时地址栏先退回原URL--
--退回A最后的RUL,这时才会触发 $(window).on('popstate', function () {}。
而
history.replaceState
流程是:A->B,B原URL--替换一个新URL显示在地址栏--当后退时则直接退回新URL地址页面
(好像)并不触发$(window).on('popstate', function () {};
可能是因为地址栏地址都一样导致。。
<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>
2、替换当前历史记录点
window.history.replaceState和window.history.pushState类似,不同之处在于replaceState不会在window.history里新增历史记录点,其效果类似于window.location.replace(url),都是不会在历史记录点里新增一个记录点的。当你为了响应用户的某些操作,而要更新当前历史记录条目的状态对象或URL时,使用replaceState()方法会特别合适。
3、监听历史记录点
监听历史记录点,直观的可认为是监听URL的变化,但会忽略URL的hash部分,监听URL的hash部分,HTML5有新的API为onhashchange,我的博客里也有说到该方法和跨浏览器的兼容解决方案。可以通过window.onpopstate来监听url的变化,并且可以获取存储在该历史记录点的状态对象,也就是上文说到的json对象,如:
// 当前的url为:http://www.qingdou.me/post-1.html
window.onpopstate=function()
{
// 获得存储在该历史记录点的json对象
var json=window.history.state;
// 点击一次回退到:http://www.qingdou.me/index.html
// 获得的json为null
// 再点击一次前进到:http://www.qingdou.me/post-1.html
// 获得json为{time:1369647895656}
}
值得注意的是:javascript脚本执行window.history.pushState和window.history.replaceState不会触发onpopstate事件。
还有一点注意的是,谷歌浏览器和火狐浏览器在页面第一次打开的反应是不同的,谷歌浏览器奇怪的是回触发onpopstate事件,而火狐浏览器则不会。
======================================================================
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是不可以一起使用的
===============================================================
按微信产品部副总经理张颖“每一个公众号都是一个APP”的说法,我们确实可以利用微信内置浏览器访问为公众号设计WebApp单页应用,以使得客户在访问公众号时有近似原生App的体验,不过目前这样的公众号很少,原因除了使用javascript开发单页应用的难度比开发一般的Web页面难度更高一些,更重要的一点是使用微信内置浏览器访问Web页面时,Android用户一按物理返回键就回到微信界面,而Android用户按物理返回键的习惯预期是回到上一页,这样就使得微信公众号的WebApp客户体验非常差。
有什么方法改变这一点么?最理想的解决办法是微信自己接管用户按物理返回键这个事件,然后类似像getNetworkType一样提供javascript事件给开发者使用。不过很遗憾,腾讯目前没有提供这个事件,而且看样子将来也不打算提供。
这个问题不是大问题,但如果不解决会影响Android用户的客户体验。幸运的是,我找到了解决办法,方法就是利用javascript window history来解决。
由于安全原因javascript不允许修改history里已有的url链接,但可以使用pushState方法往history里增加url链接,并且提供popstate事件监测从history栈里弹出url。我们可以利用这一点,在WebApp加载主界面后先往history里压入“#”链接,然后监听popstate事件,在Android手机的浏览器,按下物理返回键默认的操作是执行window.history.back(),此时将触发popstate事件。收到popstate事件时代码显示“再按一次退出程序”div顶层标签,此时history栈已经为空,如用户再次按下物理返回键将执行默认操作回到微信。接着,我们要设定一个定时器,在指定的时间(比如2秒)后如用户没有再次按下物理返回键将再次往history里压入“#”链接,并隐藏“再按一次退出程序”div顶层标签,等待用户下一次按下物理返回键。
pushHistory();
setTimeout(function () {
window.addEventListener("popstate", function(e) {
showBox("再按一次退出程序", 2000, function() {
pushHistory();
});
}, false);
08
}, 300);
function pushHistory() {
var state = {
title: "title",
url: "#"
};
window.history.pushState(state, "title", "#");
}
function showBox(msg, timeOut, onTimeOut) {
if (typeof alertBoxDiv === "undefined") {
alertBoxDiv = $("<div/>").addClass("alert-box hide").append( $("<div/>").addClass("label label-primary")).appendTo($("body"));
}
alertBoxDiv.children(".label").html(msg);
alertBoxDiv.removeClass("hide");
if (typeof timeOut === "undefined") timeOut = 2000;
setTimeout(function() {
alertBoxDiv.addClass("hide");
if (typeof onTimeOut !== "undefined") onTimeOut();
}, timeOut);
}
监听popstate事件的代码稍作修改就可以用于任意控制单页应用中javascript生成的任意动态页面的跳转,此方法已经在微信公众号WebApp中使用,可在微信中搜索“myfunds”公众号关注体验。这个方法也可以用于微信公众号之外的WebApp,链接就不发了,免得CSDN又要审查。
window.history.pushState('forward', null, 'Wx.deputyDiaryList.jdp?t='+new Date().getTime());
1.在一个页面中添加多少历史记录,后退,只要没有页面的转换,就不会跳转到页面;(A--B页面。再B页面pushState 多少记录,后退时 这些记录URL都不会刷新该URL的页面;只有在B到A的时候才会触发)
2.
微信中 只要按后退键就触发$(window).on('popstate', function () {};
浏览器中:
流程是:A->B,B原URL--新增一个新URL显示在地址栏--当按后退按钮时地址栏先退回原URL--
--退回A最后的RUL,这时才会触发 $(window).on('popstate', function () {}。
而
history.replaceState
流程是:A->B,B原URL--替换一个新URL显示在地址栏--当后退时则直接退回新URL地址页面
(好像)并不触发$(window).on('popstate', function () {};
可能是因为地址栏地址都一样导致。。
发表评论
-
IE下使用uploadify上传文件的相关问题解决
2017-10-12 12:14 276SWFUpload.prototype.cleanUp = f ... -
js和java 中文乱码
2016-11-18 11:37 552因为在jsp中对中文进行了编码的时候用的是UTF-8的编码 ... -
js常用方法
2016-08-25 17:37 444当前返回日期yyyy-MM-dd function get ... -
js时间比较/当前时间
2015-12-03 21:49 470var selectDate=edit.getContro ... -
js map类型
2015-08-25 10:11 935<script> function Map2() ... -
javat替换成换行符,关于textarea中换行、回车、空格的识别与处理
2015-08-24 20:05 1632var newString=con.replace(/\n/ ... -
限制文本框只能输入数字
2015-07-07 15:59 395js控制只允许输入数字 avascript 只允许输入数字有很 ... -
正确优雅的解决用户退出问题——JSP和Struts解决方案(转载)
2015-07-06 17:37 501正确优雅的解决用户退出问题——JSP和Struts解决方案(转 ... -
长度限制
2015-06-12 16:56 650//=============得到输入框长度(包括中文)=== ... -
js input即时监听输入值
2015-06-08 17:01 2519总结一下 :要想在输入框超过限制长度时候,不给输入。之前是用o ... -
回车和点击实现表单提交
2015-06-02 14:06 404<html> <head> <t ... -
js记录用户名密码 COOKIE
2015-06-02 10:43 808记录COOKIE后,当取消复选框时 发现无法删除COOKIE。 ... -
Js实现图片上传前在本地预览
2015-05-28 17:59 529<!DOCTYPE html PUBLIC " ... -
获取系统当前时间 适合用于头部
2015-05-26 16:26 428<!DOCTYPE HTML PUBLIC " ... -
JS 将字符串转换成日期类型
2015-05-22 14:52 630JS 将字符串转换成日期类型 2013-06-19 17:48 ... -
JS函数中带与不带括号的区别
2015-05-21 18:16 428JS函数中带与不带括号的区别 其实总结起来如下: 函数只要是要 ... -
JS 字符串长度判断
2015-05-20 10:08 1649content.replaceAll("(\r\n| ... -
js开发遇到在方法中调用另一方法问题
2015-05-19 18:03 497/eas_crm_dayi/WebContent/ecp/pa ...
相关推荐
主要介绍了使用ajax和history.pushState无刷新改变页面URL示例,需要的朋友可以参考下
本文主要详细介绍了使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL的方法,需要的朋友可以参考下
ajax与HTML5 history pushState:replaceState实例1
pjax是对ajax + pushState的封装,让你可以很方便的使用pushState技术。 同时支持了缓存和本地存储,下次访问的时候直接读取本地数据,无需在次访问。 并且展现方式支持动画技术,可以使用系统自带的动画方式,也...
基本上,它就像是跨域的AJAX,但不是浏览器跟服务器之间交互,而是在两个客户端之间通信。让我们来看一下window.postMessage是如何工作的。除了IE6、IE7之外的所有浏览器都支持这个功能。 数据发送端 首先我们要做的...
前言 这样的需求很常见:点击页码局部更新页面(非整体刷新),并且产生历史管理。局部刷新很容易实现,ajax可以满足我们的需要,但是这并不会...作用:将当前URL和history.state加入到history中,并用新的state和URL替
基于PHP的无刷新添加留言的Ajax实例源码.zip 基于PHP的无刷新添加留言的Ajax实例源码.zip 基于PHP的无刷新添加留言的Ajax实例源码.zip 基于PHP的无刷新添加留言的Ajax实例源码.zip 基于PHP的无刷新添加留言的Ajax...
pjax (ajax + pushState的封装) 无刷新翻页等.zip
Ajax全新教程 无刷新页面 无刷新数据更新 无刷新绑定 asp.net全新Ajax教程
Ajax-ajax.js.zip,用于发送http请求的简单前端跨浏览器js库,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载网页的...
BOM对象history被增强了一波,主要是对历史栈的操作,以前只有 replace , go 之类的,都会跳转并刷新整个页面,现在有了 pushState , replaceState 等等单纯操作历史栈的方法,只是单纯修改历史栈里的内容,没有副...
ajax.dll 配置 ajax局部无刷新 ajax 异步处理
ASP.net批处理实现无刷新ajax和jquery.form的图片批量上传例子
Ajax-nette.ajax.js.zip,nette框架的灵活ajax。支持代码段、重定向等。,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不...
ajax无刷新简单聊天室 ajax无刷新简单聊天室
此源码使用了Jquery.Pagination.js+Jquery.Ajax+Asp.net技术实现了无刷新分页的效果。其中用到的Asp.net知识有Linq to sql和ashx技术。分页插件可以自定义样式,自定义的样式在pagenumstyle.css文件中。项目使用vs...
使用Ajax实现页面无刷新(局部刷新),以登录为例,诠释了ajax的强大和适用。方法简单易懂。