uni-app webview中如果网站有requestFullscreen功能会导致uni异常

uni-app webview中如果网站有requestFullscreen功能会导致uni异常

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

产品分类:uniapp/App
PC开发环境操作系统:Windows
手机系统:Android
手机系统版本号:Android 15
手机厂商:小米
手机机型:平板
页面类型:vue
vue版本:vue3
打包方式:云端

示例代码:

if (bol) { let de = document.documentElement if (de.requestFullscreen) { de.requestFullscreen() } else if (de.mozRequestFullScreen) { de.mozRequestFullScreen() } else if (de.webkitRequestFullScreen) { de.webkitRequestFullScreen() } } else { if (document.exitFullscreen) { document.exitFullscreen() } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen() } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen() } }


更多关于uni-app webview中如果网站有requestFullscreen功能会导致uni异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

应该用uni的全屏,而不是webview的全屏。uni-app是plus的api控制。uni-app x是pages.json控制

更多关于uni-app webview中如果网站有requestFullscreen功能会导致uni异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


webview里面是网站呀

在 uni-app 的 Webview 中使用 requestFullscreen 确实可能导致应用异常,这是因为 Webview 容器与全屏 API 的兼容性问题。Webview 本身对全屏操作的限制,以及 uni-app 框架的页面管理机制,可能引发页面渲染错误或应用崩溃。

建议通过以下方式解决:

  1. 避免直接调用全屏 API:在 Webview 内嵌的网页中,尽量不要使用原生的 requestFullscreen,可以改为自定义全屏样式(例如通过 CSS 模拟全屏效果)。

  2. 使用 uni-app 的全屏方案:如果需要全屏功能,可以通过 uni-app 的 API(如 plus.navigator.setFullscreen)来控制 Webview 容器的全屏状态,而不是在网页内部直接调用全屏。

  3. 异常捕获:在调用全屏 API 前,添加 try-catch 块来捕获可能的异常,避免应用崩溃。

示例修改代码:

if (bol) {
  try {
    let de = document.documentElement;
    if (de.requestFullscreen) {
      de.requestFullscreen();
    }
    // 其他前缀方法...
  } catch (error) {
    console.error('全屏请求失败:', error);
  }
} else {
  try {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    }
    // 其他前缀方法...
  } catch (error) {
    console.error('退出全屏失败:', error);
  }
}
回到顶部