發(fā)現(xiàn)問(wèn)題
最近項(xiàng)目中使用到HTML5和原生的混合開(kāi)發(fā)器虾，項(xiàng)目在IOS10上面運(yùn)行正常讯嫂，在IOS8下遇到了兼容性的問(wèn)題，HTML5頁(yè)面可以加載出來(lái)兆沙，只是頁(yè)面樣式丟失欧芽，并且JS腳本執(zhí)行不了，所以只能調(diào)試看下是否有問(wèn)題（這篇文章有介紹Safari連接IOS設(shè)備調(diào)試葛圃，推薦使用Safari調(diào)試千扔，Chrome調(diào)試會(huì)有問(wèn)題）。
使用Safari調(diào)試器查看HTML文件顯示正常
但是JS文件和CSS文件顯示變成了亂碼库正，這就很好解釋了為什么頁(yè)面沒(méi)有樣式和JS執(zhí)行也有問(wèn)題了曲楚。
找到原因
網(wǎng)上搜索了相關(guān)資料，確實(shí)也有人遇到（別人遇到類(lèi)似的問(wèn)題）诀诊，不過(guò)他的解決辦法是把JS/CSS文件放到服務(wù)區(qū)洞渤，本地保存HTML文件，這種方法解決感覺(jué)也太曲線(xiàn)救國(guó)了属瓣，既然是文件出現(xiàn)了亂碼很有可能是文件的編碼有問(wèn)題载迄，所以從這里入手試試看。
網(wǎng)上找到一個(gè)工具Notepad++可以設(shè)置很多的編碼格式抡蛙，下載軟件打開(kāi)CSS文件护昧，發(fā)現(xiàn)文件的編碼是 UTF-8無(wú)BOM格式，嘗試轉(zhuǎn)換為 UTF-8格式的
文件的內(nèi)容沒(méi)有變化粗截，但是使用16進(jìn)制可以看到前面添加了3個(gè)字節(jié)的內(nèi)容惋耙，這就是BOM頭
問(wèn)題的解決
替換為轉(zhuǎn)換編碼之后的文件，iOS8上可以正常的加載CSS和JS了熊昌，可以直接使用Notepad++轉(zhuǎn)換編碼或者直接使用Xcode打開(kāi)二進(jìn)制編輯绽榛，在文件的開(kāi)頭加上3個(gè)字節(jié) EF BB BF ,然后保存，這樣就加上了BOM頭婿屹。
一個(gè)解決問(wèn)題的腳本
這種問(wèn)題當(dāng)然得用自動(dòng)化的方法解決灭美，所以，有了下面的shell腳本昂利，在xcode中添加一個(gè)run script届腐，粘貼修改如下代碼即可铁坎，files數(shù)組中保存的是你項(xiàng)目中js和css文件的路徑，文件路徑相對(duì)于項(xiàng)目的根目錄
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
