开发者社区> 问答> 正文

钉钉H5任何实现离开页面时二次确认的功能?我只看到了钉钉小程序有提供此API

已解决

如题,环境是 Vue、dingtalk-jsapi ,没有找到相关的离开时二次确认对话的 API,如果自己实现对话框的话也需要在用户点击返回按钮的时候阻止该操作,但是尝试下面的监听代码也是无效(无效的原因可能是因为它并不是监听返回按钮的回调函数?):

//添加监听回调函数
dd.on('leftBtnClick', () => {
  // 弹出自定义二次确认对话框
  // 阻止用户返回的操作
});

展开
收起
游客76pm7bbestxfo 2024-02-20 11:23:23 138 0
2 条回答
写回答
取消 提交回答
  • 采纳回答

    在钉钉H5微应用中,目前官方文档并未明确指出有现成的API可以直接实现离开页面时的二次确认功能,正如你所述,钉钉小程序提供了此类API,但H5环境下可能需要自行实现。

    尽管如此,可以通过监听页面生命周期钩子并在适当的时候模拟二次确认的行为。在Vue中,你可以尝试结合HTML5 History API或者Vue Router的导航守卫(Navigation Guards)来实现这一功能。

    一种可行的方法是利用Vue Router的beforeRouteLeave导航守卫,在用户即将离开当前路由时弹出确认对话框:

    export default {
      name: 'YourComponent',
      beforeRouteLeave(to, from, next) {
        const confirmLeaving = window.confirm('确定要离开当前页面吗?');
        if (confirmLeaving) {
          next();
        } else {
          next(false); // 取消导航
        }
      },
    };
    

    对于非Vue Router的场景,或者希望捕获浏览器级别的后退操作,可以尝试监听popstate事件或者覆盖window.history.pushStatewindow.history.replaceState,并在合适的时机调用window.confirm

    let originalPushState = window.history.pushState;
    let originalReplaceState = window.history.replaceState;
    
    // 重写pushState和replaceState方法以监听历史记录变更
    window.history.pushState = function(state) {
      if (typeof originalPushState === 'function') {
        originalPushState.apply(window.history, arguments);
      }
    
      // 添加自定义逻辑,在这里监听后退按钮点击
      window.addEventListener('popstate', handleBackButton);
    };
    
    window.history.replaceState = function(state) {
      if (typeof originalReplaceState === 'function') {
        originalReplaceState.apply(window.history, arguments);
      }
    
      // 同样在这里监听后退按钮点击
      window.addEventListener('popstate', handleBackButton);
    };
    
    function handleBackButton(event) {
      if (!event.state) { // 处理浏览器后退按钮点击
        const confirmLeaving = window.confirm('确定要离开当前页面吗?');
        if (!confirmLeaving) {
          event.preventDefault(); // 阻止默认行为
          return false; // 或者使用history.forward()来恢复页面状态
        }
      }
    }
    
    // 不再需要监听时记得移除事件监听器
    // window.removeEventListener('popstate', handleBackButton);
    

    请注意,这种方法可能在不同浏览器或环境下表现不一,尤其是移动端和PC端的浏览器对于popstate事件的触发条件可能有所区别。另外,由于钉钉H5微应用的环境封闭性,可能还需要结合钉钉提供的API进行更为精确的控制,但这方面的官方支持有限,自定义实现时需要谨慎对待兼容性和用户体验。

    2024-02-20 11:57:31
    赞同 1 展开评论 打赏
  • 有尝试过使用 JS 原生的 onbeforeunload 事件,但是在钉钉上返回的时候无法触发该事件,刷新的时候可以触发

    2024-02-20 11:53:14
    赞同 展开评论 打赏
来源圈子
更多
收录在圈子:
+ 订阅
问答排行榜
最热
最新

相关电子书

更多
Spring Boot2.0实战Redis分布式缓存 立即下载
CUDA MATH API 立即下载
API PLAYBOOK 立即下载