iOS 加载本地 HTML 文件 CSS 样式图片无效果
在开发的过程中,有时候需要加载一些 HTML 页面,对于不太复杂的界面,基本上都可以放到本地用 UIWebview 来加载,但是在开发过程中会碰到 UIWebview 加载出来的 HTML 页面没有图片和 CSS 样式
加载出来的效果如下图:

出现这种问题一般是资源路径读取的问题,我们把包含 HTML 文件的文件夹拖入工程的时候一般情况下是这样的:

一般情况下我们的 Added folders 选项都是选的 Create Groups 选项,工程中被加入的文件夹是黄颜色的

问题就出在这个 Create Groups 上面,以这种方式加入工程的文件夹,文件夹下的文件在iOS沙盒中全都被保存在一个 mainBundle 根路径下,即不管加入项目的文件的目录结构如何,在 APP 中都可以通过 mainBundlePath/filename 来访问到,而原来的目录结构则不存在了。而 HTML 中的图片和 CSS 文件的引用方式写的则是绝对路径。因此 HTML 中的路径就不对,需要把引用文件的代码如:
href="css/min/home.min.css"
src="data:images/qq.gif"
全部替换为这种样式,不用写路径了
href="min.css"
src="qq.gif"
代码如下:
NSString *path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSString *htmlString = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];
NSString *basePath = [[NSBundle mainBundle] bundlePath];
NSURL *baseURL = [NSURL fileURLWithPath:basePath];
[self.webView loadHTMLString:htmlString baseURL:baseURL];
这样工作量是很大的,还有一种办法就是在选择 Added folders 选项时选择 Create folder references

这时加入工程的文件夹是蓝颜色的

这样,就可以正确的加载出我们想要的效果了

代码如下:
UIWebView *webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
webView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
webView.scrollView.bounces = NO;
webView.delegate = self;
[webView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"movie-item" ofType:@"html" inDirectory:@"web/movie"]]]];
[self.view addSubview:webView];
这时需要注意 HTML 文件路径要写正确。
原文链接:http://www.jianshu.com/p/00b9e4d6c807
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
iOS 加载本地 HTML 文件 CSS 样式图片无效果的更多相关文章
- WebView加载本地Html文件并实现点击效果
Webview是用来与前端交互的纽,可以加载本地Html文件,和网页并实现交互的功能. WebView通过WebSetting可以使用Android原生的JavascriptInterface来进行j ...
- @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件
目录 @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 运行 使用 配置 svg-sprite-loader 调用当前环境下的颜色 props @vue/cl ...
- UIWebView加载本地html文件
UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(, , KScreenWidth, KScreenHeight-)]; ...
- 360chrome,google chrome浏览器使用jquery.ajax加载本地html文件
使用360chrome和google chrome浏览器加载本地html文件时,会报错,提示: XMLHttpRequest cannot load file:///Y:/jswg/code/html ...
- Mysql加载本地CSV文件
Mysql加载本地CSV文件 1.系统环境 系统版本:Win10 64位 Mysql版本: 8.0.15 MySQL Community Server - GPL Mysql Workbench版本: ...
- ajax加载本地html文件出现 XMLHttpRequest cannot load的问题
谷歌浏览器ajax加载本地html文件出现 XMLHttpRequest cannot load的问题(火狐中不会出现这问题) Cross origin requests are only suppo ...
- easyui 加载本地json 文件的方法
easyui 加载本地json 文件的方法 2017年12月15日 17:18:07 vivian_hnd 阅读数 2155 https://blog.csdn.net/vivian_wang07/a ...
- 转:Android Webview 加载外部html时选择加载本地的js,css等资源文件
原文地址:http://m.blog.csdn.net/blog/qduningning/43196819 在使用WebView加载网页的时候,有一些固定的资源文件如js的jquery包,css,图片 ...
- uiwebview 加载本地js、css、img,html从网站加载
资源文件都是放在根目录下 1.index.html <html> <head> <title>My test Page</title> <link ...
随机推荐
- 设置角色遗留问题和为权限设置角色以及EasyUI Tabs的使用
设置角色遗留问题和为权限设置角色以及EasyUI Tabs的使用 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) (1):框架搭建 (2):数据库访问层的设计Demo ...
- c# 在datagridview中添加comboboxcolumn 绑定数据库读取显示数据
datagridview中的comboboxcolumn 从绑定的数据库中读取显示时,只需要注意一点,就是sql语句加个 CStr() 字符串转换函数即可,如下: SELECT CStr(XXX) a ...
- nginx+apache+mysql+php+memcache+squid搭建集群web环境
服务器的大用户量的承载方案 一.前言 二.编译安装 三. 安装MySQL.memcache 四. 安装Apache.PHP.eAccelerator.php-memcache 五. 安装Squid 六 ...
- C#中数组,ArrayList与List对象的区别
在C#中,当我们想要存储一组对象的时候,就会想到用数组,ArrayList,List这三个对象了.那么这三者到底有什么样的区别呢? 我们先来了解一下数组,因为数组在C#中是最早出现的. 数组 数组有很 ...
- ASP.NET Zero--5.配置权限
修改角色的时候,会有一份权限列表,可以给这个角色分配哪些权限,那如何添加一个新权限呢? 这里以添加一个“测试”的权限为例 1.打开AppPermissions.cs [..\MyCompanyNa ...
- [ios2]判断retina 屏幕
判断是否retina屏幕 #define isRetina ([UIScreen instancesRespondToSelector:@selector(currentMode)] ? CGSize ...
- 捕获input 文本框内容改变的事件(onchange,onblur,onPropertyChange比较)
input 文本框内容改变,可以使用onchange或者onblur来判断,但onchange是在文本内容改变,然后失去焦点的时发生,onblur是在失去焦点时发生,不会自己去判断. 如: <i ...
- CSS属性之absolute
0.脱离标准文档流 绝对定位的元素会脱离标准文档流,拥有z-index属性,并且对于它的任何操作和改变都不会影响它的兄弟元素和父级元素,这里就不过多介绍. 不过值得注意的是,虽然绝对定位元素脱离的标准 ...
- CentOS 7安装redis及php扩展
安装remi源 # wget http://rpms.famillecollet.com/enterprise/remi-release-7.rpm # rpm -Uvh remi-release-7 ...
- python——爬虫
网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本.另外一些不常使用的名字还有蚂蚁.自动索引.模拟程序或者蠕 ...