博客
关于我
页面后退刷新、无刷新
阅读量: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中的字符集陷阱:为何避免使用UTF-8
    查看>>
    mysql中的数据导入与导出
    查看>>
    MySQL中的时间函数
    查看>>
    mysql中的约束
    查看>>
    MySQL中的表是什么?
    查看>>
    mysql中穿件函数时候delimiter的用法
    查看>>
    Mysql中索引的分类、增删改查与存储引擎对应关系
    查看>>
    Mysql中索引的最左前缀原则图文剖析(全)
    查看>>
    MySql中给视图添加注释怎么添加_默认不支持_可以这样取巧---MySql工作笔记002
    查看>>
    Mysql中获取所有表名以及表名带时间字符串使用BetweenAnd筛选区间范围
    查看>>
    Mysql中视图的使用以及常见运算符的使用示例和优先级
    查看>>
    Mysql中触发器的使用示例
    查看>>
    Mysql中设置只允许指定ip能连接访问(可视化工具的方式)
    查看>>
    mysql中还有窗口函数?这是什么东西?
    查看>>
    mysql中间件
    查看>>
    MYSQL中频繁的乱码问题终极解决
    查看>>
    MySQL为Null会导致5个问题,个个致命!
    查看>>
    MySQL为什么不建议使用delete删除数据?
    查看>>
    MySQL主从、环境搭建、主从配制
    查看>>
    Mysql主从不同步
    查看>>