uni-app webview加载h5页面时物理键返回会让h5页面back两级中断http请求导致客户端报错

uni-app webview加载h5页面时物理键返回会让h5页面back两级中断http请求导致客户端报错

开发环境 版本号 项目创建方式
Windows 10 HBuilderX

示例代码：

onBack() {  
    ab_.debug && console.log('webview canBack')  
    webview.canBack(function(e) {  
        if (e && e.canBack) {  
            ab_.debug && console.log('canBack')  
           webview.back()  
        } else {  
            ab_.debug && console.log('navBack')  
            navBack ? navBack() : abUni.navigateBack()  
        }  
    })  
},

更多关于uni-app webview加载h5页面时物理键返回会让h5页面back两级中断http请求导致客户端报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

能否给一个能复现的demo

更多关于uni-app webview加载h5页面时物理键返回会让h5页面back两级中断http请求导致客户端报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


创建webview时设置一下返回键的处理方式。见文档：
https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewStyles

backButtonAutoControl: (String 类型 )Webview窗口自动处理返回键逻辑
当Webview窗口在显示栈顶，并且Webview窗口中没有调用JS监听返回键（plus.key.addEventListener(‘backbutton’,…)）时按下返回键响应行为。 可取值： “hide” - 隐藏Webview窗口，隐藏动画与上一次调用显示时设置的动画类型相对应（如“slide-in-right”对应的关闭动画为“slid-out-right”）； “close” - 关闭Webview窗口，关闭动画与上一次调用显示时设置的动画类型相对应（如“slide-in-right”对应的关闭动画为“slid-out-right”） ； “none” - 不做操作，将返回键传递给下一Webview窗口处理； “quit” - 退出应用。

在 uni-app 中使用 webview 加载 H5 页面时，物理返回键默认会触发 webview 的返回行为，这可能会导致 H5 页面的历史记录回退两级或中断正在进行的 HTTP 请求，进而引发客户端报错。为了解决这个问题，你可以通过以下方式来处理物理返回键的行为：

1. 监听物理返回键事件

在 uni-app 中，你可以通过监听 onBackPress 事件来捕获物理返回键的点击事件，并自定义处理逻辑。

export default {
  onBackPress() {
    // 获取当前 webview 实例
    const pages = getCurrentPages();
    const currentPage = pages[pages.length - 1];
    const webview = currentPage.$getAppWebview();

    // 判断当前页面是否是 webview
    if (webview && webview.children && webview.children.length > 0) {
      const childWebview = webview.children[0];

      // 判断 webview 是否可以返回
      if (childWebview.canBack()) {
        // 让 webview 返回上一级
        childWebview.back();
        return true; // 阻止默认返回行为
      }
    }

    // 默认返回行为
    return false;
  }
};

2. 在 H5 页面中处理返回逻辑

如果 H5 页面中有复杂的路由逻辑或需要处理返回行为，可以在 H5 页面中通过 window.history 或 window.onpopstate 事件来监听返回行为，并执行相应的逻辑。

window.onpopstate = function(event) {
  // 处理返回逻辑
  console.log('H5 页面返回事件触发');
  // 可以在这里取消正在进行的 HTTP 请求
};

3. 避免中断 HTTP 请求

如果返回行为导致 HTTP 请求中断，可以在 H5 页面中使用 AbortController 来手动取消请求，或者在请求完成前阻止返回行为。

const controller = new AbortController();
const signal = controller.signal;

fetch('https://example.com/api', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('请求被取消');
    } else {
      console.error('请求失败', err);
    }
  });

// 在返回时取消请求
window.onpopstate = function(event) {
  controller.abort();
};

4. 与原生端通信

如果需要在 uni-app 和 H5 页面之间进行更复杂的交互，可以通过 postMessage 或 uni-app 的 uni.postMessage 方法进行通信，确保返回行为不会影响 H5 页面的正常逻辑。

// uni-app 端
uni.postMessage({
  data: {
    type: 'backPress'
  }
});

// H5 页面
window.addEventListener('message', function(event) {
  if (event.data.type === 'backPress') {
    // 处理返回逻辑
  }
});
回到顶部