iOS載入本地html檔案處理跳轉錨點定位問題
阿新 • • 發佈：2021-06-13
最近聽好幾位同學說起這個問題,碰巧我也遇到了這個問題,所以有必要做個記錄~
載入本地HTML檔案
載入本地的html檔案必然是要讀取它的檔案地址,一般來說是放到專案的資原始檔目錄下,然後mainBundle載入即可,至於SDK內原理一致,不是本文討論的範疇了~
(⚠️注意: html檔案屬於引用檔案不參與編譯,所以拖進專案時不要勾選☑️group,而是下面那個引用folder )
NSString *path = [[NSBundle mainBundle] pathForResource:@"demo" ofType:@"html"];
錨點引數處理
如上述程式碼載入html檔案是沒啥毛病的,也能加載出來,但是並不滿足錨點跳轉到頁面某個位置的需求
path後拼接錨點引數
NSString *fileURLString = [path stringByAppendingFormat:@"#third"];
NSLog(@"%@",fileURLString);
列印之後發現缺少 file:// 協議頭,用這個得拼協議頭,於是:
NSString *filePath = [NSString stringByAppendingString:@"file://%@",fileURLString];
NSLog(@"%@", filePath);
列印之後發現URL結果是正確✅的,有協議頭也有傳參, 這就可以組裝URL載入webView了,可是一執行結果頁面都載入不出來~
NSURL *URL = [NSURL fileURLWithPath: filePath];
NSLog(@"%@", URL.absoluteString);
打印發現#third 會被轉成 %23third,這貌似就陷入難題了,因為前面無論如何努力,最終都要通過URL進行頁面載入~ 只能另闢蹊徑(js注入大法好)了
解決方案①
在頁面載入完成之後,呼叫js注入的方法:
- 利用
location.hash屬性進行錨點定位
[self.webView evaluateJavaScript:@"window.location.hash='#third'" completionHandler:^(id _Nullable, NSError * _Nullable error) { }];
- 利用
dom元素滾動方法
[self.webView evaluateJavaScript:@"window.document.getElementById('third').scrollIntoView()" completionHandler:^(id _Nullable, NSError * _Nullable error) {
}];
解決方案② (終極)
這個方法最簡單~ 最native~
NSURL *lastURL = [NSURL URLWithString:@"#third" relativeToURL:URL];
NSLog(@"%@",lastURL.absoluteString);
如此傳參就不會存在#被轉%23的問題了
demo.html的程式碼在這裡 demo程式碼