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

来源:互联网 发布:淘宝客服工作内容介绍 编辑:程序博客网 时间:2024/05/22 03:24

自学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!
0 0
原创粉丝点击