前端兼容性问题解决方案

原创已于 2024-07-17 17:51:10 修改 · 1.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2024-07-17 14:39:50 首次发布

1、IOS中对带横杠的日期格式字符串进行格式化时，旧版IOS、旧版火狐浏览器会有问题：

new Date('2024-07-12')

一般处理方案用斜杠代替横杠：

let date = '2024-7-12'
new Date(date.replace(/-/g, '/'))

2、小程序通过webview访问H5出现白屏，直接访问h5正常

这种问题一般是缓存引起的，临时方案需要用户删除微信浏览缓存或移除小程序解决，长期方案可以在h5页面增加动态时间戳，让浏览器每次都访问新的h5页面

// 原始链接
https://www.baidu.com

// 增加动态时间戳让用户每次都取最新页面

`https://www.baidu.com?_t=${new Date().getTime()}`
// 如果是vue的hash模式的链接需要在search部分增加时间戳
`https://www.baidu.com/path/?_t=${new Date().getTime()}#/vue/hash`

3、部分安卓手机或IOS使用history.go(-1)返回上一页，页面不刷新，或者执行某些操作后重新跳转到该页面，预期要响应操作结果，但是页面不刷新

pageshow 事件的 event 对象还包含一个名为 persisted 的布尔值属性。如果页面中保存在bfcache中，则这个属性的值为true；否则，这个属性的值为false。

// 经测试，该方法适用ios和大部分安卓手机
// 在需要刷新的页面的setup阶段增加此事件
window.addEventListener('pageshow', function(e) {
      if (e.persisted) {
        window.location.reload();
      }
 });

4、移动端使用绝对布局时，如果内容区有滚动条，IOS会出现滚动不流畅的问题

这种情况需要在滚动元素上增加CSS -webkit-overflow-scrolling: touch 属性：

// app.css
.scroll-el {
  -webkit-overflow-scrolling: touch;
}

5、旧版浏览器不支持磨砂玻璃效果

/** 磨砂玻璃效果 **/
.backdrop {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

如果是简单的替代，可以通过filter属性去替换backdrop-filter属性

6、IOS滚动出现白屏问题

// 网上说的-webkit-overflow-scrolling: touch解决不了，可以采用下面的方法，降低滚动速度解决
scrollEl.scrollTo({ top: 300, behavior: 'smooth' });

7、vite3版本的项目在ios11打开空白，配置babel.config.js，package.json的browsers，还有vite.config.js的target都未解决，最后使用官方兼容性插件：

npm i @vitejs/plugin-legacy terser -D

8、小程序中数组使用includes方法时提示没有该方法

这种情况需要给Array的原型链中添加includes方法就好了


// 处理ES6不兼容的问题includes方法的问题
if (!Array.prototype.includes) {
  Array.prototype.includes = function (searchElement, fromIndex) {
    let array = this;
    if (!searchElement) {
      console.error('unknown element in Array.includes method');
      return;
    }
    let index = fromIndex || 0;
    if (index < 0) {
      index = this.length + index;
      if (index < 0) {index = 0;}
    }
    for (let i = index; i < array.length; i++) {
      if (array[i] === searchElement) {
        return true;
      }
    }
    return false;
  };

9、当小程序页面包含fixed元素，里面的内容可以滚动时，如果内容滚动到底部，回弹结束后再次拉起滚动条，发现内容无法滚动，这种情况要在页面的json文件增加disableScroll为true，并且页面最外层元素要设置高度为100vh，避免出现滚动

// page.json
{
  "navigationBarTitleText": "我的页面",
  "disableScroll":true,
  "usingComponents": {
    
  }
}

// page.wxss
.container {
  width: 100vw;
  height: 100vh;
  position: relative;
}

10、旧版火狐浏览器出现“ResizeObserver is not defined”的问题

这种情况一般是ResizeObserver对象缺失，需要引入resize-observer-polyfill来解决

npm install resize-observer-polyfill -S

//  在main.js全局引入
import 'resize-observer-polyfill/dist/ResizeObserver.global'

11、在旧版火狐浏览器通过创建a标签进行下载事件触发时，火狐浏览器没有响应

let url1 = URL.createObjectURL('blob文件流')
const a = document.createElement('a')
a.href = url1
const fileName = '文件名'
a.download = fileName
a.style.display = 'none'
// 火狐浏览器无响应
// a.click()
// 兼容性处理方案
let evt = document.createEvent('MouseEvents')
evt.initEvent('click', true, true)
a.dispatchEvent(evt)
// 兼容性处理方案结束
URL.revokeObjectURL(a.href)

12、IE浏览器出现flex布局错乱的问题

这种是硬伤，只能针对IE改成用float布局替换flex布局，如果要适配IE建议还是不要用flex

13、IE浏览器下写js时，定义对象时，严格模式下末尾不能有逗号

var obj = {
    a: 12,
    b: 13, // 错误，末尾不能有逗号
}

14、IE浏览器下不要通过let、const等定义变量，IE不支持ES6语法