博客
关于我
页面后退刷新、无刷新
阅读量: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:Can‘t connect to local MySQL server through socket ‘/var/run/mysqld/mysqld.sock‘解决方法
    查看>>
    MYSQL:基础——3N范式的表结构设计
    查看>>
    MYSQL:基础——触发器
    查看>>
    Mysql:连接报错“closing inbound before receiving peer‘s close_notify”
    查看>>
    mysqlbinlog报错unknown variable ‘default-character-set=utf8mb4‘
    查看>>
    mysqldump 参数--lock-tables浅析
    查看>>
    mysqldump 导出中文乱码
    查看>>
    mysqldump 导出数据库中每张表的前n条
    查看>>
    mysqldump: Got error: 1044: Access denied for user ‘xx’@’xx’ to database ‘xx’ when using LOCK TABLES
    查看>>
    Mysqldump参数大全(参数来源于mysql5.5.19源码)
    查看>>
    mysqldump备份时忽略某些表
    查看>>
    mysqldump实现数据备份及灾难恢复
    查看>>
    mysqldump数据库备份无法进行操作只能查询 --single-transaction
    查看>>
    mysqldump的一些用法
    查看>>
    mysqli
    查看>>
    MySQLIntegrityConstraintViolationException异常处理
    查看>>
    mysqlreport分析工具详解
    查看>>
    MySQLSyntaxErrorException: Unknown error 1146和SQLSyntaxErrorException: Unknown error 1146
    查看>>
    Mysql_Postgresql中_geometry数据操作_st_astext_GeomFromEWKT函数_在java中转换geometry的16进制数据---PostgreSQL工作笔记007
    查看>>