vue在ios返回上一路由白屏

原文链接

问题描述:

进入A页面——>B页面——>ios自带的返回——>白屏出现——>手动点击白屏处——>问题解决

问题

原因是,经过排查,发现在ios 机器上使用webview 开发Vue项目时候,go history (-1),无法将body 的高度拉掉,使得遮住,触发轻点击,方可消除该遮罩

解决的理论:用于最重要的html 容器是container,然而因为设置html、body高度是100%,从而造成了 container 撑开父级,但浏览器默认滚动的scroll 并不是 container(可能我这里认识是错的),而是body,某些因素,造成返回history 后,无法复原(ios 的锅),为此,我们将 container 进行了绝对定位,并让它重新成为 scroll 的对象,从而解决问题

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}
.container {
  width: 100%;
  height: 100%;
  background: #fff;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  position: absolute;
  left:0;
  top:0;
}
### 问题分析 在 UniApp 开发中,当 iOS 平台使用 `hash` 路由模式时可能会遇到白屏问题。这通常是因为某些特定情况下,iOS 的 WebView 对带有特殊字符(如 `#`)的 URL 处理不当所致[^1]。此外,在 Vue 或 H5 应用中切换路由或刷新页面时也可能引发类似的显示异常[^2]。 以下是针对该问题的具体解决方案: --- ### 解决方案 #### 方法一:调整路由模式至 History 模式 通过更改应用的路由模式为 `history` 可有效规避因 `hash` 导致的问题。这种方式利用浏览器原生 API (`pushState`) 实现无刷新跳转,从而减少潜在兼容性风险。 实现方式如下: ```javascript // 修改 vue-router 配置文件中的 mode 参数 const router = new VueRouter({ mode: 'history', // 使用 history 模式替代 hash 模式 routes: [...], // 定义路由表 }); ``` 需要注意的是,启用 `history` 模式可能引入新的跨域或路径匹配问题,因此建议同步更新服务器端配置以支持动态路径解析[^5]。 --- #### 方法二:优化 Webview 加载逻辑 对于嵌入到 Native App 中的应用场景,可以通过改进 WebView 初始化流程降低白屏概率。具体措施包括但不限于预加载空白页、延迟渲染以及合理设置缓存策略等[^4]。 示例代码片段: ```javascript function preloadWebView() { const blankPageUrl = '/blank'; // 假设存在一个轻量级占位页面 window.location.href = blankPageUrl; // 提前触发加载 setTimeout(() => { navigateToActualRoute(); // 待资源准备完毕后再转向目标地址 }, 500); // 设置适当延时时间 } function navigateToActualRoute() { const actualRoute = decodeURIComponent(window.location.hash.substring(1)); if (actualRoute) { window.location.replace(actualRoute); } } ``` 上述方法能够显著改善用户体验的同时兼顾性能表现。 --- #### 方法三:修正回调机制适配特殊符号处理 如果确认问题是由于腾讯服务或其他第三方平台未能正确识别含 `#` 符号的链接引起,则需联系相关方协商统一标准;或者尝试自行封装一层中间层用于过滤非法参数再转发请求给最终目的地。 伪代码示意: ```javascript function sanitizeCallbackUrl(urlString) { let sanitizedUrl; try { const urlObj = new URL(urlString); Object.keys(urlObj.searchParams).forEach(key => { const value = encodeURIComponent(decodeURIComponent(urlObj.searchParams.get(key))); urlObj.searchParams.set(key, value); }); sanitizedUrl = `${urlObj.pathname}${urlObj.search ? '?' : ''}${urlObj.search}`; } catch (_) { console.error('Invalid URL:', urlString); throw _; } return sanitizedUrl; } ``` 调用此函数即可确保传入数据符合预期格式要求。 --- ### 总结说明 综合来看,推荐优先考虑 **方法一** 即切换至 `history` 模式的长期稳定性优势;而对于即时修复需求则可采纳 **方法二** 和/或 **方法三** 结合实际业务特点灵活运用。无论采取哪种手段都务必经过充分测试验证其有效性及副作用影响范围。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值