博客
关于我
页面后退刷新、无刷新
阅读量:160 次
发布时间:2019-02-28

本文共 1232 字,大约阅读时间需要 4 分钟。

情境一:支付金额默认与用户输入不一致问题

页面默认选中100元购买1个礼包,需支付金额为100元。当用户输入其他金额后,上述选项丢失且需支付金额应更新至用户输入值。然而,当用户点击支付后返回时,默认选项恢复,且需支付金额重置为100元,而输入框仍显示用户输入值。这与业务流程不符。

解决方案:通过HTML缓存控制和页面刷新机制

  • HTML头部禁止缓存:
  • 此方法在手机端无效,因部分浏览器忽略缓存控制。

    1. 强制刷新界面:
    2. if(window.name != "bencalie"){location.reload();window.name = "bencalie";}else{window.name = "";}
      1. 页面加载事件处理:
      2. window.onload = function() {    var user_input = +$("#user_input_money").val();    if(user_input > 0) {        // 处理逻辑:恢复默认选项并更新需支付金额        $(".active").removeClass("active");        $(".need-money").text(user_input);    }}
        1. PHP处理:
        2. header("Cache-Control:no-store,no-cache,must-revalidate");header("Cache-Control:post-check=0,pre-check=0", false);header("Pragma:no-cache");

          情境二:页面跳转前状态保留问题

          页面标题列表展开内容默认展开第一个标题。当用户点击非默认标题查看文章详情时,需保留展开的状态。解决方案:利用History API(pushState、replaceState)和popstate事件。

          实现方法:

        3. 在点击标题时调用:
        4. window.history.pushState({html: content, pageTitle: title, id: id}, "", linkUrl);
          1. 列表返回时触发popstate事件,恢复状态。
          2. 注意事项:

            • pushState和replaceState仅适用于同域链接
            • popstate事件可获取状态信息
            • window.onpopstate事件处理状态变化

            代码示例:

            window.history.replaceState({    html: datahtml,    pageTitle: titlehtml,    id: id}, "", lurl);

            技术小知识:

            • 浏览器支持History API
            • hashchange事件处理链接变化
            • popstate事件处理页面跳转
            • onbeforeunload和onunload事件处理页面退出

            以上方法可有效解决页面状态保留问题。

    转载地址:http://sqhc.baihongyu.com/

    你可能感兴趣的文章
    Mysql中存储引擎简介、修改、查询、选择
    查看>>
    Mysql中存储过程、存储函数、自定义函数、变量、流程控制语句、光标/游标、定义条件和处理程序的使用示例
    查看>>
    mysql中实现rownum,对结果进行排序
    查看>>
    mysql中对于数据库的基本操作
    查看>>
    Mysql中常用函数的使用示例
    查看>>
    MySql中怎样使用case-when实现判断查询结果返回
    查看>>
    Mysql中怎样使用update更新某列的数据减去指定值
    查看>>
    Mysql中怎样设置指定ip远程访问连接
    查看>>
    mysql中数据表的基本操作很难嘛,由这个实验来带你从头走一遍
    查看>>
    Mysql中文乱码问题完美解决方案
    查看>>
    mysql中的 +号 和 CONCAT(str1,str2,...)
    查看>>
    Mysql中的 IFNULL 函数的详解
    查看>>
    mysql中的collate关键字是什么意思?
    查看>>
    MySql中的concat()相关函数
    查看>>
    mysql中的concat函数,concat_ws函数,concat_group函数之间的区别
    查看>>
    MySQL中的count函数
    查看>>
    MySQL中的DB、DBMS、SQL
    查看>>
    MySQL中的DECIMAL类型:MYSQL_TYPE_DECIMAL与MYSQL_TYPE_NEWDECIMAL详解
    查看>>
    MySQL中的GROUP_CONCAT()函数详解与实战应用
    查看>>
    MySQL中的IO问题分析与优化
    查看>>