最近聽好幾位同學說起這個問題,碰巧我也遇到了這個問題,所以有必要做個記錄~
加載本地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代碼