V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
hanzichi
V2EX  ›  问与答

视频网站视频上传过程中「离开页面」的提示是什么时候触发的?

  •  
  •   hanzichi · 2017-07-24 17:08:59 +08:00 · 1797 次点击
    这是一个创建于 2671 天前的主题,其中的信息可能已经有所发展或是发生改变。

    视频网站上传视频过程中,如果点击了页面的超链接,或者页面的关闭按钮,会有个提示框,提示要离开页面。

    那么这个提示框是如何触发的?

    我的第一个思路是监听页面所有超链接,以及要离开页面的操作,点击后,将默认事件保存,比如点击了一个超链接,将链接地址保存,出来是否离开页面的提示框,如果选择是,用 js 跳转,如果选择否,不操作。这样做的话,获取所有会中断上传的事件的元素,可能会很多。

    另一个想法是,基于上传是 xhr2,有个 onabort 事件,能监听到上传中止,这个方案没有很成熟的想法,只是知道有这个事件,能和这个需求结合起来吗?感觉如果可以的话,是这样比较方便。感觉两个都是事件监听,没想到能结合的方法。

    求老司机给个建议

    第 1 条附言  ·  2017-07-24 18:54:14 +08:00
    才疏学浅,目测用的就是 beforeunload 事件,学习了
    9 条回复    2017-08-13 14:21:18 +08:00
    kslr
        1
    kslr  
       2017-07-24 17:30:49 +08:00   ❤️ 1
    beforeunload
    tanranran
        2
    tanranran  
       2017-07-24 17:47:18 +08:00   ❤️ 1
    $(window).bind('beforeunload',function(){
    return '您输入的内容尚未保存,确定离开此页面吗?';
    });
    hanzichi
        3
    hanzichi  
    OP
       2017-07-24 17:59:40 +08:00
    @tanranran #2 可以可以,不过为什么我用原生的,有问题?

    ```
    window.addEventListener('beforeunload', function (e) {
    return '您正在编辑的 issue 还没有提交,确定要离开?';
    });
    ```
    tanranran
        4
    tanranran  
       2017-07-24 18:04:18 +08:00   ❤️ 1
    @hanzichi 原生

    window.onbeforeunload=function(){
    return "快住手!!别点下去!!";
    };
    crystom
        5
    crystom  
       2017-07-24 18:16:46 +08:00   ❤️ 1
    window.addEventListener("beforeunload", function (e) {
    var confirmationMessage = "\o/";

    e.returnValue = confirmationMessage; // Gecko, Trident, Chrome 34+
    return confirmationMessage; // Gecko, WebKit, Chrome <34
    });
    hanzichi
        6
    hanzichi  
    OP
       2017-07-24 18:53:55 +08:00
    @crystom #5 可以可以,这波很强
    crystom
        7
    crystom  
       2017-07-24 20:20:41 +08:00 via iPhone   ❤️ 1
    @hanzichi mdn 抄来的。。
    hanzichi
        8
    hanzichi  
    OP
       2017-08-13 14:20:44 +08:00
    # 测试

    - 测试
    - 测试
    hanzichi
        9
    hanzichi  
    OP
       2017-08-13 14:21:18 +08:00
    <h1>测试</h1>

    <ul>
    <li>测试</li>
    <li>测试</li>
    </ul>
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   954 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 21:26 · PVG 05:26 · LAX 13:26 · JFK 16:26
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.