iOS 使用 WKWebView 加载本地的JS和CSS文件出现乱码问题

释放双眼,带上耳机,听听看~!

发现问题

最近项目中使用到HTML5和原生的混合开发,项目在IOS10上面运行正常,在IOS8下遇到了兼容性的问题,HTML5页面可以加载出来,只是页面样式丢失,并且JS脚本执行不了,所以只能调试看下是否有问题(这篇文章有介绍Safari连接IOS设备调试,推荐使用Safari调试,Chrome调试会有问题)。

使用Safari调试器查看HTML文件显示正常

HTML文件显示正常截图

但是JS文件和CSS文件显示变成了乱码,这就很好解释了为什么页面没有样式和JS执行也有问题了。

JS文件乱码

 

CSS文件乱码

找到原因

网上搜索了相关资料,确实也有人遇到(别人遇到类似的问题),不过他的解决办法是把JS/CSS文件放到服务区,本地保存HTML文件,这种方法解决感觉也太曲线救国了,既然是文件出现了乱码很有可能是文件的编码有问题,所以从这里入手试试看。

网上找到一个工具Notepad++可以设置很多的编码格式,下载软件打开CSS文件,发现文件的编码是 UTF-8无BOM格式,尝试转换为 UTF-8格式

NotePad查看文件编码

文件的内容没有变化,但是使用16进制可以看到前面添加了3个字节的内容,这就是BOM头

输入图片说明

问题的解决

替换为转换编码之后的文件,iOS8上可以正常的加载CSS和JS了,可以直接使用Notepad++转换编码或者直接使用Xcode打开二进制编辑,在文件的开头加上3个字节 EF BB BF ,然后保存,这样就加上了BOM头。

显示正常

一个解决问题的脚本

这种问题当然得用自动化的方法解决,所以,有了下面的shell脚本,在xcode中添加一个run script,粘贴修改如下代码即可,files数组中保存的是你项目中js和css文件的路径,文件路径相对于项目的根目录

files=("./mmosite/Resources/web-contents/css/news-style.css" "./mmosite/Resources/web-contents/js/news-script.js")
for fileName in ${files[*]}
do
sed -n '2p' $fileName
echo "fileName=${fileName}"
ret=`hexdump -s 0x0 -n 3 $fileName`
echo $ret
ret=${ret:8:9}
echo $ret
if [ "$ret" = "ef bb bf " ]
then
echo "OK"
else
echo "FAIL"
echo -n -e \xEF\xBB\xBF | cat - $fileName > temp && mv temp $fileName
fi
done

人已赞赏
iOS文章

iOS发布自己的CocoaPods库

2020-4-28 3:31:48

iOS文章

iOS XML/HTML 解析器

2020-4-28 4:46:48

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索