V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
DreamCMS
V2EX  ›  前端开发

求大佬帮我看下前端代码, history 历史上一页问题

  •  
  •   DreamCMS · 16 天前 · 895 次点击
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <button id='aaa' style="font-size:80px;padding:50px;" onclick="pushHistory('home2222')">21122121212</button>

    <script>
    function pushHistory(e) {
    var state = {
    title: "title",
    url: "#"+e
    };
    window.history.pushState(state, "title", "#"+e);
    }

    setTimeout(function() {

    // $('#aaa').click();

    }, 1800);
    </script>

    浏览器打开,点击按钮,url 增加#home2222 ,如果点后退正常,退到打开的上一页
    但如果打开定时的 aaa 自动点击,URL 等待 1.8 秒可以加上#home2222 但后退与上面不正常,退出去了。
    13 条回复    2024-04-29 12:59:16 +08:00
    laobobo
        1
    laobobo  
       16 天前
    惭愧啊 7 年前端的我也以为是一样的,问了下 ai , 两者还是有区别的,手动点击会记录到浏览器中,而 js 方式不会
    laobobo
        2
    laobobo  
       16 天前
    @laobobo 更正一下,貌似 firfox 没事,有可能是 chrome 自己的行为
    yohane3016
        3
    yohane3016  
       16 天前
    然而 Chrome 124 和 firefox 124 试了都正常后退,区别在于 chrome 要点击一次页面才会更新更新前进后退按钮的状态,firefox 是在 state 发生变动时就更新前进后退按钮的状态
    DreamCMS
        4
    DreamCMS  
    OP
       16 天前
    @laobobo 对 Chrome 会这样,所以安卓机器也这样
    DreamCMS
        5
    DreamCMS  
    OP
       16 天前
    @yohane3016 安卓机器不行 大部分内核还是老的
    yohane3016
        7
    yohane3016  
       16 天前
    @laobobo #6 确实应该设计如此,手机上试了好几个浏览器都是 pushState 后手动点一下屏幕就能正确返回的
    NoManPlay
        8
    NoManPlay  
       16 天前
    模拟点击不会触发 popstate 事件
    ```js
    window.addEventListener('popstate', function(event) {
    if (event.state) {
    console.log("Page was loaded: ", event.state.page);
    // 根据 event.state 更新页面内容
    }
    });
    ```
    southlink
        9
    southlink  
       16 天前
    在 chrome 中,要有用户操作,插入的历史记录才会被激活,应该是为了防止有网页恶意插入历史记录不让用户返回。可以看看这个: https://html.spec.whatwg.org/multipage/interaction.html#history-action-activation
    DreamCMS
        10
    DreamCMS  
    OP
       16 天前
    @NoManPlay 问题我是直接打开这个页面 在自动点击 后退大退了 没法监听
    tanranran
        11
    tanranran  
       16 天前
    看了楼上的回答,涨知识了
    CHTuring
        12
    CHTuring  
       16 天前
    这个在移动端的 H5 活动页是很常见的,所以 H5 点全局返回按钮需要加上判断事件

    ```
    if (document.referrer) {
    // 返回上一页
    } else {
    // 返回首页
    }
    ```
    shizhibuyu2023
        13
    shizhibuyu2023  
       16 天前
    你问的问题我不知道,但是改 hash 为啥不用 a 标签或者直接改 window.location.hash?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5802 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 40ms · UTC 06:41 · PVG 14:41 · LAX 23:41 · JFK 02:41
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.