iOS加载本地html文件处理跳转锚点定位问题
最近听好几位同学说起这个问题,碰巧我也遇到了这个问题,所以有必要做个记录~
加载本地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代码
更新于2021年07月03日
最近发现一个问题,就是带query参数(包含中文)和带锚点参数的URL字符串转成URL对象时,对URL取path属性,结果值为nil
但是把这个URL参数和锚点去掉就能够取到path的值,就很奇怪... 苹果bug真不少~