浏览器后退按钮显示服务器发送的保留页面状态,但使用javascript完成的任何DOM修改未得到保留
用于从代码隐藏中触发JavaScript代码的代码段(,C#)为:浏览器后退按钮显示服务器发送的保留页面状态,但使用javascript完成的任何DOM修改未得到保留
int returnValue = SaveStudent("John", "XII"); // SaveStudent() is a C# function that saves the student details in DB and returns studentId.
hdnStudentId = returnValue ; // hdnStudentId is a hidden-field control
ScriptManager.RegisterStartupScript(this, this.GetType(),
"ShowStudent", "showStudentDetails();",true);
的定义 “showStudentDetails()” JavaScript方法是:
function showStudentDetails(){
If($('[id*=hdnStudentId]').val() > 0){
// show the popup
}
}
这里是问题的说明:
在网页“WebPage1.APSX”中,将数据保存到数据库之后,我使用ScriptManager类(如上所述)显示 引导弹出窗口。
这里我设置了插入rowid 隐藏字段变量的值插入数据库(比如12345)。
ScriptManager类 成功在DOM中注册脚本并显示弹出窗口。
此后,我将Here hidden-field变量重置为-1。在 弹出窗口中,我有一个按钮控件,该按钮控件重定向到另一页 'WebPage1.APSX'。 ('[id * = hdnStudentId]')。val(' - 1');
现在,用户点击'浏览器后退按钮',它不会触及服务器端代码,并且会根据服务器发送的先前页面实例呈现UI。
由于这是网页的前一个实例的服务器,隐场 变量被设置为“12345”,而不是-1(不知道为什么,我们已经 并重置为-1值)发送和显示再次弹出。
要求:当用户点击 '浏览器的后退按钮',我们需要记住在DOM以前处理过的数据,以及(即$( '[ID * = hdnStudentId]')VAL(。 '-1');),以便我们可以避免在浏览器后退按钮单击时显示弹出窗口。
您需要结账浏览器历史记录API来保存时没有服务器所涉及的历史你的页面状态,这里是MDN文档https://developer.mozilla.org/en-US/docs/Web/API/History_API
的DOM
window
对象通过 的history
对象访问浏览器的历史。它暴露了有用的方法和让你 来回移动通过用户的历史,以及性能 - 与HTML5开始 - 操纵历史堆栈
,也阿贾克斯的导航的例子的内容https://developer.mozilla.org/en-US/docs/Web/API/History_API/Example。希望有所帮助!
谢谢..这真的是一个好主意,但我在多个网页(大约10个.aspx页面)中实现它时遇到了一些问题。 所以,我试图把它保存在MasterPage中。但在获取上一页时遇到问题。 **问题:**点击页面链接时,上一页是“以前存在”页面,但在页面上刷新也会加载上一页。而且,浏览器上显示的URL也会错误地更改。 母版页的代码片段被放置在下一个评论中,因为'这个回复的字符数很长'。 –
这里是母版页的代码段: 代码被注释掉,因为这些代码不能按预期工作: //history.pushState(null,null,document.referrer); window.addEventListener(如 'popstate',函数(事件){ //history.pushState(null,NULL,document.referrer); //history.pushState(null,NULL,window.location.href); 警报('嗨,你点击浏览器后退按钮'); }); –
您是否认为这可能是由于将'pushState()'的动态引用传递给了我不推荐传递像'document.referrer'或'window.location.href'这样的动态参数。我想最好这样做,'var stateObj = {id:hdnStudentId}; history.pushState(stateObj,null,“#popup”); URL后面的'#'是仅供客户端使用的JS的一般模式。然后在你的事件监听器中,你可以调用函数'showStudentDetails(stateObj.id)',这意味着扩展你的函数来接受参数。 –
谢谢@萨鲁斯..我跟着你的劝告..最后下面的代码片段为我工作.. 我用'历史。pushState的();”方法刚刚显示弹出后:
$('#divStudentDetails').modal('show');
history.pushState(null, null, "");
嗨民间,请回复。我会很感激你! –