如何在Swagger UI执行前弹出含确定/取消按钮的确认弹窗

完全可行，你可以通过自定义Swagger UI的交互逻辑来实现这个需求，核心思路是拦截「Execute」按钮的点击事件，插入确认弹窗判断，具体实现如下：

实现步骤 #

• 定位Swagger UI的页面容器，通过事件委托监听所有「Execute」按钮的点击行为
• 阻止按钮默认的请求执行逻辑，弹出带OK/Cancel的确认弹窗
• 根据用户选择执行对应操作：点击OK则触发原请求逻辑，点击Cancel则终止操作

示例代码 #

将以下代码添加到Swagger UI页面中（需在Swagger UI渲染完成后执行）：

// 监听Swagger UI容器内的点击事件，委托给Execute按钮
document.querySelector('.swagger-ui').addEventListener('click', function(e) {
  // 匹配Execute按钮（类名需根据Swagger UI版本调整，部分旧版本为.btn.try-out__btn）
  const executeBtn = e.target.closest('.btn.execute');
  if (executeBtn) {
    // 阻止默认请求执行
    e.preventDefault();
    e.stopPropagation();
    
    // 弹出确认弹窗
    const confirmExecute = confirm('确认执行该接口请求吗？');
    if (confirmExecute) {
      // 确认后手动触发原按钮逻辑
      executeBtn.click();
    }
    // 取消则无操作，终止请求流程
  }
});

注意事项 #

• 不同版本的Swagger UI按钮DOM结构可能有差异，需要根据实际页面的元素类名调整选择器
• 若通过swagger-ui npm包/CDN初始化UI，也可使用requestInterceptor钩子实现，但该钩子触发时机为请求即将发送时，不如拦截按钮点击的交互直观

内容的提问来源于stack exchange，提问作者user2887397