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

Jquery 在移动端如何让返回能够不刷新页面?

  •  
  •   hoythan · 2016-12-21 00:08:28 +08:00 · 6552 次点击
    这是一个创建于 2914 天前的主题,其中的信息可能已经有所发展或是发生改变。

    https://segmentfault.com/q/1010000007863491?_ea=1476187

    在移动端,我有一个按钮,点击后会弹出一个 div 层, 用户选择好内容后可以点击确定关闭这个 div, 这个步骤因为在同一个页面是没有跳转的.

    但是因为担心的误触返回导致按钮这个界面东西都白填了就不好了

    想问下能不能实现弹出的 div 层的时候 点击返回按钮能够控制仅仅关闭 div 层不回跳?

    有人提到了 onbeforeunload,onunload,onpagehide ,但是不会用?

    15 条回复    2016-12-22 10:31:37 +08:00
    jarlyyn
        1
    jarlyyn  
       2016-12-21 00:11:53 +08:00
    onlyhot
        2
    onlyhot  
       2016-12-21 03:26:07 +08:00 via iPhone
    弹出表单后隐藏返回按键不就好了?
    别人都提供思路了,你说不会用也是厉害,翻手册去
    onlyhot
        3
    onlyhot  
       2016-12-21 03:28:18 +08:00 via iPhone
    另外,弹出表单,你给返回按键重新定义触发函数也行啊
    hoythan
        4
    hoythan  
    OP
       2016-12-21 10:09:03 +08:00
    @onlyhot 如果我能控制手机的返回按钮我还费个什么劲啊
    hoythan
        5
    hoythan  
    OP
       2016-12-21 10:09:37 +08:00
    @onlyhot 绑定浏览器返回按钮的触发函数是什么?
    hoythan
        6
    hoythan  
    OP
       2016-12-21 10:11:23 +08:00
    @onlyhot 如何隐藏浏览器的返回按钮?
    hoythan
        7
    hoythan  
    OP
       2016-12-21 10:11:38 +08:00
    @onlyhot 控制浏览器的按钮的手册在哪里?
    BOYPT
        8
    BOYPT  
       2016-12-21 10:14:10 +08:00   ❤️ 1
    使用 router, 用户点击功能时候跳转的是#hashtag ,这样返回按钮是在用户的记录中跳转(而不会跳转页面)。
    有些 router 也兼容楼上说的 history api 。
    ragnaroks
        9
    ragnaroks  
       2016-12-21 10:17:28 +08:00   ❤️ 1
    页面关闭时先执行 onbeforeunload,后 onunload,重写 onbeforeunload 方法(最常见的就是你关闭当前页面,会提示你是否确定离开),不过可能有的手机浏览器并不支持.
    hoythan
        10
    hoythan  
    OP
       2016-12-21 10:20:14 +08:00
    @BOYPT 非常感谢,原来锚链接可以记录跳转,这样就好办了.
    Biwood
        11
    Biwood  
       2016-12-21 10:22:28 +08:00   ❤️ 1
    非常简单,弹出 div 层的时候给当前页面的 url 赋值一个 hash ,同时绑定 onhashchange 事件,点返回的时候,页面不会刷新,只是 hash 变化了,同时可以在 hashchange 事件绑定的函数里面关闭 div 弹窗
    BOYPT
        12
    BOYPT  
       2016-12-21 10:30:17 +08:00
    @Biwood 这就是 router 实现的,我但是觉得自己实现要很繁琐; 我以前项目用过 director https://github.com/flatiron/director
    都两年没更新了,没支持 history api 。

    @hoythan
    比较新的库比如 https://github.com/tildeio/router.js/ 就支持 history api 。
    最明显的例子是 github 的源码浏览窗口, 点击源码目录, url 栏目随即变化,但是页面不刷新,把 url 复制出去重新打开,也能回到这个目录;
    learnshare
        13
    learnshare  
       2016-12-21 10:59:46 +08:00
    pushState ,看起来又要推荐 Vue/React/Ng 了
    GeoffZhu
        14
    GeoffZhu  
       2016-12-21 12:21:49 +08:00
    最简单的办法,不应该是弹窗上放一个明显的 X ,让用户点这个关。如果不能放,控制 history 是最好的方法
    maijiawei
        15
    maijiawei  
       2016-12-22 10:31:37 +08:00
    history.go(-1)
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3492 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 00:55 · PVG 08:55 · LAX 16:55 · JFK 19:55
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.