博客
关于我
页面后退刷新、无刷新
阅读量: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中having的用法
    查看>>
    MySQL中interactive_timeout和wait_timeout的区别
    查看>>
    mysql中int、bigint、smallint 和 tinyint的区别、char和varchar的区别详细介绍
    查看>>
    mysql中json_extract的使用方法
    查看>>
    mysql中json_extract的使用方法
    查看>>
    mysql中kill掉所有锁表的进程
    查看>>
    mysql中like % %模糊查询
    查看>>
    MySql中mvcc学习记录
    查看>>
    mysql中null和空字符串的区别与问题!
    查看>>
    MySQL中ON DUPLICATE KEY UPDATE的介绍与使用、批量更新、存在即更新不存在则插入
    查看>>
    MYSQL中TINYINT的取值范围
    查看>>
    MySQL中UPDATE语句的神奇技巧,让你操作数据库如虎添翼!
    查看>>
    Mysql中varchar类型数字排序不对踩坑记录
    查看>>
    MySQL中一条SQL语句到底是如何执行的呢?
    查看>>
    MySQL中你必须知道的10件事,1.5万字!
    查看>>
    MySQL中使用IN()查询到底走不走索引?
    查看>>
    Mysql中使用存储过程插入decimal和时间数据递增的模拟数据
    查看>>
    MySql中关于geometry类型的数据_空的时候如何插入处理_需用null_空字符串插入会报错_Cannot get geometry object from dat---MySql工作笔记003
    查看>>
    mysql中出现Incorrect DECIMAL value: '0' for column '' at row -1错误解决方案
    查看>>
    mysql中出现Unit mysql.service could not be found 的解决方法
    查看>>