iOS-通过UIWebView加载本地HTML5文件

自学H5有段时间了,感觉还没有入门,惭愧!今天需要实现通过OC调用本地的H5文件,包括 CSS 和 JS ,我尝试性通过以前webView加载本地资源的方法解析H5文件,但结果只有HTML文本,没有加载CSS 和 JS! 分析肯定是CSS 和 JS 文件没有加载进来。后来查找资料问朋友,和一个一个去尝试,功夫不负有心人,等结果出来才发现其实没那么难!


前提:有一个本地H5文件,包含绝对的 CSS 和 JS 路径

这里写图片描述


当使用普通的方式引入本地资源和解析资源时:

这里写图片描述

文件展现样式:(文件夹为黄色)

这里写图片描述

代码实现:

    self.webView = [[UIWebView alloc] initWithFrame:[UIScreen mainScreen].bounds];
    [self.view addSubview:self.webView];

    NSString *htmlPath = [[NSBundle mainBundle] pathForResource:@"TextLogin.html" ofType:nil];
    NSURL *url = [NSURL fileURLWithPath:htmlPath];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];

    [self.webView loadRequest:request];

运行结果:

这里写图片描述

发现结果只有HTML文本,没有加载CSS 样式,所以这种方法行不通。


最后直接说合理的解决方法吧!

01、文件通过 “Create folder references” 方式添加

这里写图片描述

文件展现样式:(文件夹为蓝色)

这里写图片描述

02、代码实现:
    // 获取本地资源路径
    NSString *pathStr = [[NSBundle mainBundle] pathForResource:@"TextLogin" ofType:@"html" inDirectory:@"XMIndex"];
    // 通过路径创建本地URL地址
    NSURL *url = [NSURL fileURLWithPath:pathStr];
    // 创建请求
    NSURLRequest * request = [NSURLRequest requestWithURL:url];
    // 通过webView加载请求
    [self.webView loadRequest:request];
03、运行结果,通过加载H5展现出来的

这里写图片描述


总结:

1、实现的原理是为本地H5文件添加绝对路径,然后获取真实文件夹内的xxx.html文件,通过webView加载即可。

2、总结下Create groups 和 Create folder references 的区别

  • 蓝色的是folder ,黄色的是group 。folder就是文件管理器中的文件夹的概念,而group是一个分组的概念;

  • group一般只在你的工程中是文件夹的形式,但是在group内部的文件还是以散乱的形式放在一起的,除非你是从外部以group的形式引用进来的;

  • 而folder 只能作为资源,整个引用进项目,不能编译代码,也就是说,以folder形式引用进来的文件,不能被放在complie sources列表里面。只是拷贝到工程文件夹里面,不参与编译,还有文件夹的层级概念,所以导入头文件的时候就要写全路径;

  • 一般导入文件选用Create groups,特殊情况用 Create folder references!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值