iOS加载本地html文件处理跳转锚点定位问题

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注入的方法:

1. 利用location.hash属性进行锚点定位

[self.webView evaluateJavaScript:@"window.location.hash='#third'" completionHandler:^(id _Nullable, NSError * _Nullable error) {
  }];

2. 利用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真不少~