iOS UIWebView导入本地html无法加载css和js问题

最近一直在做h5相关,发现本地html模板导入进项目后,js和css并显示不出来,后来发现是路径的问题。

导入html文件夹方式

  1. Create groups (创建虚拟结构-包结构)


    屏幕快照 2018-06-13 上午10.29.37.png

    屏幕快照 2018-06-13 上午10.26.21.png

app编译过后引入的文件会被放在同一个文件夹下面会忽略原本的文件夹,所以在HTML文件中的路径就会出现问题。因此html文件中引入css,js,图片等就不需要添加前缀路径了,直接写文件名就行。

<link rel="stylesheet" type="text/css" href="new_file.css"/>
<script src="myScript.js"></script>
  1. Create folder references for any added folders (创建实体结构)


    屏幕快照 2018-06-13 上午10.27.00.png
屏幕快照 2018-06-13 上午10.27.23.png

app编译过后引入的文件会按照原本的目录结构存放,这个时候就需要添加相对路径。因此html文件中引入css,js,图片等就需要添加前缀路径了。

<link rel="stylesheet" type="text/css" href="css/new_file.css"/>
<script src="js/myScript.js"></script>

加载本地动态html(代码中组合生成的html字符串)

1.使用绝对路径拼接

//获取文件全路径
NSString *imagePath = [[NSBundle mainBundle] pathForResource:@"newImage@2x" ofType:@"png"];
//代码加载图片需要前面拼接file:///
[self.htmlString appendFormat:@"<img src=\"file:///%@\" width=[\"40\" height=\"40\"/> \n",imagePath];
//baseURL为nil;
[webview loadHTMLString:mStringhtml baseURL:nil];

2.使用URLForResource

//获取文件URL
 NSURL *fileUrl = [[NSBundle mainBundle] URLForResource:@"new_file.css" withExtension:nil];
/加载文件需要路径
[self.htmlString appendFormat:@"<link rel=\"stylesheet\" type=\"text/css\" href=%@ />\n",fileUrl];  
//lbaseURL为nil;
 [webview loadHTMLString:self.htmlString baseURL:nil];

3.使用bundleURL

/加载文件可以只需要文件名
[self.htmlString appendFormat:@"<link rel=\"stylesheet\" type=\"text/css\" href=\"new_file.css\" />\n "];  
//使用[[NSBundle mainBundle] bundleURL];
 [webview loadHTMLString:weakSelf.mStringhtml baseURL:[[NSBundle mainBundle] bundleURL]];
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容