记录下有个前端项目的页面在电脑可以正常打开,但是在苹果老平板和部分其它设备没法正常打开,显示白屏的问题。
先说原因,部分js语法不兼容老浏览器,导致浏览器读取报错。导致我那平板型号ipad myla2ch/a(20年)在浏览器打不开页面的原因:我在写正则表达式时用到正后发断言符,?<=正后发断言符是es8(18年)的语法,在这个型号在平板的浏览器运行不了,应该是浏览器比较旧的缘故。
解决方法:正则表达式的匹配换个写法。没去搞兼容旧版本的全局解决方法
row.checkItem.match(/(?<=【)\d+(?=】)/)的匹配【】里的数字改成了
row.checkItem.match(/\d+(?=】)/)
排查问题的方法:靠一次次删除代码排查ipad打不开页面是什么原因。
1.先将页面整个删除,写简单的html代码,能打开,说明页面和地址已经对应上。
2.我代码是用vue写的,还原代码后删除js代码和用到html里用到js方法的代码,html界面和css代码能显示,说明问题可能出在js里。
3.用到js的代码不还原,只还原js的代码,每调用js方法,打不开页面,不知道什么原因每调用js的方法就打不开了。
4.删除所有js前半段代码,留后半段,打不开。删后半段,留前半段代码,可以打开。问题可能出在后半段代码。
5.逐步减半删除js后半段的代码,排查是哪些方法有问题打不开页面,最后找出有问题的方法。
6.将代码还原后注释掉有问题的方法,页面可以打开。在有问题的js代码里逐步注释找到有问题的代码,最后发现用到?<=的那一行代码就会有问题,注释掉就可以。网上查找发现?<=是es8的语法,老版本的浏览器识别不了。即使没有调用到这个方法里的?<=代码,当浏览器读取到这行代码时,会因为识别不了符号而整个页面文件读取失败导致空白页打不开。