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

加载出来的效果如下图:

 

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

 

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

 

问题就出在这个 Create Groups 上面,以这种方式加入工程的文件夹,文件夹下的文件在iOS沙盒中全都被保存在一个 mainBundle 根路径下,即不管加入项目的文件的目录结构如何,在 APP 中都可以通过 mainBundlePath/filename 来访问到,而原来的目录结构则不存在了。而 HTML 中的图片和 CSS 文件的引用方式写的则是绝对路径。因此 HTML 中的路径就不对,需要把引用文件的代码如:

  1. href="css/min/home.min.css"
  2. src="data:images/qq.gif"

全部替换为这种样式,不用写路径了

  1. href="min.css"
  2. src="qq.gif"

代码如下:

  1. NSString *path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
  2. NSString *htmlString = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];
  3. NSString *basePath = [[NSBundle mainBundle] bundlePath];
  4. NSURL *baseURL = [NSURL fileURLWithPath:basePath];
  5. [self.webView loadHTMLString:htmlString baseURL:baseURL];

这样工作量是很大的,还有一种办法就是在选择 Added folders 选项时选择 Create folder references

 

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

 

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

 

代码如下:

  1. UIWebView *webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
  2. webView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
  3. webView.scrollView.bounces = NO;
  4. webView.delegate = self;
  5. [webView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] pathForResource:@"movie-item" ofType:@"html" inDirectory:@"web/movie"]]]];
  6. [self.view addSubview:webView];

这时需要注意 HTML 文件路径要写正确。

文/zyfoolboy(简书作者)
原文链接:http://www.jianshu.com/p/00b9e4d6c807
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。

iOS 加载本地 HTML 文件 CSS 样式图片无效果的更多相关文章

  1. WebView加载本地Html文件并实现点击效果

    Webview是用来与前端交互的纽,可以加载本地Html文件,和网页并实现交互的功能. WebView通过WebSetting可以使用Android原生的JavascriptInterface来进行j ...

  2. @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件

    目录 @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 运行 使用 配置 svg-sprite-loader 调用当前环境下的颜色 props @vue/cl ...

  3. UIWebView加载本地html文件

    UIWebView *webView = [[UIWebView alloc] initWithFrame:CGRectMake(, , KScreenWidth, KScreenHeight-)]; ...

  4. 360chrome,google chrome浏览器使用jquery.ajax加载本地html文件

    使用360chrome和google chrome浏览器加载本地html文件时,会报错,提示: XMLHttpRequest cannot load file:///Y:/jswg/code/html ...

  5. Mysql加载本地CSV文件

    Mysql加载本地CSV文件 1.系统环境 系统版本:Win10 64位 Mysql版本: 8.0.15 MySQL Community Server - GPL Mysql Workbench版本: ...

  6. ajax加载本地html文件出现 XMLHttpRequest cannot load的问题

    谷歌浏览器ajax加载本地html文件出现 XMLHttpRequest cannot load的问题(火狐中不会出现这问题) Cross origin requests are only suppo ...

  7. easyui 加载本地json 文件的方法

    easyui 加载本地json 文件的方法 2017年12月15日 17:18:07 vivian_hnd 阅读数 2155 https://blog.csdn.net/vivian_wang07/a ...

  8. 转:Android Webview 加载外部html时选择加载本地的js,css等资源文件

    原文地址:http://m.blog.csdn.net/blog/qduningning/43196819 在使用WebView加载网页的时候,有一些固定的资源文件如js的jquery包,css,图片 ...

  9. uiwebview 加载本地js、css、img,html从网站加载

    资源文件都是放在根目录下 1.index.html <html> <head> <title>My test Page</title> <link ...

随机推荐

  1. 设置角色遗留问题和为权限设置角色以及EasyUI Tabs的使用

    设置角色遗留问题和为权限设置角色以及EasyUI Tabs的使用 ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇)   (1):框架搭建    (2):数据库访问层的设计Demo ...

  2. c# 在datagridview中添加comboboxcolumn 绑定数据库读取显示数据

    datagridview中的comboboxcolumn 从绑定的数据库中读取显示时,只需要注意一点,就是sql语句加个 CStr() 字符串转换函数即可,如下: SELECT CStr(XXX) a ...

  3. nginx+apache+mysql+php+memcache+squid搭建集群web环境

    服务器的大用户量的承载方案 一.前言 二.编译安装 三. 安装MySQL.memcache 四. 安装Apache.PHP.eAccelerator.php-memcache 五. 安装Squid 六 ...

  4. C#中数组,ArrayList与List对象的区别

    在C#中,当我们想要存储一组对象的时候,就会想到用数组,ArrayList,List这三个对象了.那么这三者到底有什么样的区别呢? 我们先来了解一下数组,因为数组在C#中是最早出现的. 数组 数组有很 ...

  5. ASP.NET Zero--5.配置权限

    修改角色的时候,会有一份权限列表,可以给这个角色分配哪些权限,那如何添加一个新权限呢?   这里以添加一个“测试”的权限为例 1.打开AppPermissions.cs [..\MyCompanyNa ...

  6. [ios2]判断retina 屏幕

    判断是否retina屏幕 #define isRetina ([UIScreen instancesRespondToSelector:@selector(currentMode)] ? CGSize ...

  7. 捕获input 文本框内容改变的事件(onchange,onblur,onPropertyChange比较)

    input 文本框内容改变,可以使用onchange或者onblur来判断,但onchange是在文本内容改变,然后失去焦点的时发生,onblur是在失去焦点时发生,不会自己去判断. 如: <i ...

  8. CSS属性之absolute

    0.脱离标准文档流 绝对定位的元素会脱离标准文档流,拥有z-index属性,并且对于它的任何操作和改变都不会影响它的兄弟元素和父级元素,这里就不过多介绍. 不过值得注意的是,虽然绝对定位元素脱离的标准 ...

  9. CentOS 7安装redis及php扩展

    安装remi源 # wget http://rpms.famillecollet.com/enterprise/remi-release-7.rpm # rpm -Uvh remi-release-7 ...

  10. python——爬虫

    网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本.另外一些不常使用的名字还有蚂蚁.自动索引.模拟程序或者蠕 ...