zoukankan      html  css  js  c++  java
  • 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) {
      }];
    
    1. 利用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真不少~

  • 相关阅读:
    Weblogic 12c 集群部署和session复制
    Weblogic 12c 集群环境搭建
    Programming In Scala笔记-第十九章、类型参数,协变逆变,上界下界
    这是最好的时光,这是最坏的时光 SNAPSHOT
    这是最好的时光 这是最坏的时光 v0.1.1.1
    鹅厂欧阳大神给年轻人的一些分享
    谈到电影,我们收获了什么
    那些被电影搞的日子
    Programming In Scala笔记-第十五章、Case Classes和模式匹配
    [CSharp]传一个包含多个属性的对象,只改变其中个别属性值的方法
  • 原文地址:https://www.cnblogs.com/wgb1234/p/14880974.html
Copyright © 2011-2022 走看看