iOS之在webView中引入本地html,image,js,css文件的方法

 
2014-12-08 20:00:16CSDN-sky_2016-点击数:10292

 
 

项目需求

最近开发的项目,需要一个webView,同时这个webView会需要引入一些项目中的资源:

  • 一个本地的html文件,作为webView的模板
  • 两张loading图片,在图片未加载的时候进行占位
  • jquery.js,scrollLoading.js 也是本地的,实现滚动加载图片功能

然后就开始了漫长的Google历程。

在webView中引入本地的html文件

这里最主要的一个webView的方法是:loadHTMLString:baseURL: 把HTML文件的内容以字符串的形式加载到webView里面,然后解析。

// get the model which is a html file for the webViewNSString * htmlPath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];NSString * htmlCont = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];// load the html file to webView[_webView loadHTMLString:htmlCont baseURL:nil];

通过上述方法,很方便的就能把一个HTML文件加载到webView中,很简单吧,接下来,来点进阶功能!

在webView中引入本地的image文件

这个功能的实现,很大程度上是借鉴了这篇文章:UIWebView – Loading External Images and CSS。大家可以去看看这篇文章,或者看我下面的继续描述。

这个功能的实现是承接上面那个方法的进一步扩展,最关键的是那个baseURL。先看实现代码:

// get the model which is a html file for the webViewNSString * htmlPath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];NSString * htmlCont = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];    // 获取当前应用的根目录NSString *path = [[NSBundle mainBundle] bundlePath];NSURL *baseURL = [NSURL fileURLWithPath:path];    // 通过baseURL的方式加载的HTML// 可以在HTML内通过相对目录的方式加载js,css,img等文件[_webView loadHTMLString:htmlCont baseURL:baseURL];

在object-c里面通过如上面的方式加载HTML文件,指定了baseURL的值为程序的bundlePath,然后在HTML文件里面就可以自由的通过直接书写标签的方式加载图片图片文件了

<img src="loading.png" />;

要注意的是:所有在应用内的资源文件都是在baseURL的根目录也就是此代码中的bundlePath的根目录,所以图片资源,不管在项目里面放在哪个目录结构下,在HTML内引用的时候,都是直接根目录的。

baseURL到底是什么东西?对此,我也很好奇,所以我NSLog了代码里面的baseURL,然后得到的结果是:file:///Users/(用户名)/Library/Application%20Support/iPhone%20Simulator/7.0.3/Applications/(一些大写字母加连字符加数字的序列号)/(应用名).app/ 。然后我在终端里面找到这个目录,打开一看,发现都是一些HTML,image,txt等静态资源。

bundlePath和其中的内容展示

至此,在webView中插入本地image资源的功能已经实现了,下面是更有挑战性的功能:添加js文件

添加本地js文件到webView中

这个实现说起来其实很简单,因为不需要任何代码层面上的修改,只需要按上面添加image的方式,在script的src里面直接写js的文件名即可。

但是如果直接这样写,你就会发现js资源根本没有被加载。到底image和js有什么区别?看上面的图片,可以看到默认在bundlePath里面是没有我引入到工程里面的jquery.js和scrollLoading.js的。那么,这个是不是导致js资源没有被正确加载的原因?

在这篇文章:How to load a local .CSS file & JavaScript resources using iPhone UIWebView Class和这篇文章iPhone基于lightbox的图片放大特效和网页布局中,都提及到一个

Select .js file and in the “Detail” view unselect the bullseye column indicating it is compiled code

In the “Groups & files” view expand the “Targets” tree and expand the application then go to “Copy Bundle Resources” and drag the *.js files into it.

方法是有了,可是这种英文的描述,还没有附加图片,实在是让人看不懂,大致知道的就是:js文件在xcode里面,默认是一种需要被编译的文件,这就导致它不会被放到我们刚刚放到的BundlePath(更专业的名称应该是Bundle Resources)里。

所以要解决的问题是,怎样才能使得js文件不被编译并且放到Bundle Resources中。

期间为了理解上面那两句英文而Google的经历就不说了,直接说结果吧。

在xcode里面,每个project都有至少一个Targets(多个的也有,但是我不懂),在Targets里面(打开Targets的方式是在左侧栏,点击project,在中间的内容区,就会出现project喝Targets),存放了一些资源文件,在Build Phases下可以看到,跟本次内容关联最大的有两项:Compile Sources和Copy Bundle Resources。在没修改的情况下,展开Compile Sources就能看到找了很久的jquery.js和scrollLoading.js

打开Targets(基于xcode5的界面)展开Compile Sources后能看到两个js文件

接下来要做的很简单,从Compile Sources中删除两个js文件,再在Copy Bundle Resources中添加这两个文件,一切搞定。想来(偷懒,不想Google继续深入了解了),Compile Sources是放置那些需要被编译的文件,.h,.m和冤枉的.js文件等等,而Copy Bundle Resources里面放的是一些资源文件,在程序在运行时会引入的,同时在项目打包之后也依旧存在的文件。

其他格式的资源文件,在添加的时候也大致就是这个流程,不重复说了。

 

iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZ的更多相关文章

  1. 在UTF-8页面中引入编码为GBK的JavaScript文件乱码问题了

    原文地址:http://js8.in/2009/12/11/%E5%AF%B9%E5%BC%95%E7%94%A8%E5%A4%96%E9%83%A8javascript%E9%A1%B5%E9%9D ...

  2. react项目中引入了redux后js控制路由跳转方案

    如果你的项目中并没有用到redux,那本文你可以忽略 问题引入 纯粹的单页面react应用中,通过this.props.history.push('/list')就可以进行路由跳转,但是加上了redu ...

  3. C#中常用的几种读取XML文件的方法

    1.C#中常用的几种读取XML文件的方法:http://blog.csdn.net/tiemufeng1122/article/details/6723764/

  4. 部署springboot项目时 打包成jar时包中html,js,css文件缺失

    问题 打包出来的jar包里面没有html,js,css文件 解决方案 在pom.xml文件下的build选项中的src/main/resources的目录下 添加配置 <build> &l ...

  5. WebView加载本地html、js文件常见问题及解决办法

    声明:基于android studio平台,php语言搭建服务器 目录: 一.JavaScript脚本语言没有反应 二.alert无法弹出 三.html页面之间不能跳转 四.屏幕缩放没有达到预期效果 ...

  6. maven 引入本地项目jar报红线错误解决方法

    问题:本地创建了2个项目,A和B,A引入B,A的pom如下: <dependency> <groupId>com.ebc</groupId> <artifac ...

  7. 在eclipse中引入mybatis和spring的约束文件

    eclipse中引入mybatis约束文件步骤: 首先: config的key值 http://mybatis.org/dtd/mybatis-3-config.dtd mapper的key值 htt ...

  8. maven在pom文件中引入了icepdf-core包,pom文件却莫名的报错,说jai_core包missing

    maven在pom文件中引入了icepdf-core包,却莫名的报错,说jai_core包missing,把这个jai_core包引入之后还是一样报错,PS:icepdf-core使用的时候不用引用j ...

  9. django引入模板时,部分css文件渲染不成功失灵引入不成功

    今天碰到了一件怪事,下载好的模板,在webstorm中就好好地,但是一引入到pycharm的django项目中就各种失灵,位置错乱. 检查一番,发现该设置的都设置对了啊,而且js文件和css文件还有一 ...

随机推荐

  1. 【转】iOS学习之Storyboard中的UIScrollView使用自动布局

    在使用storyboard和xib时,我们经常要用到ScrollView,还有自动布局AutoLayout,但是ScrollView和AutoLayout 结合使用,相对来说有点复杂.根据实践,我说一 ...

  2. 【转】ArrayList循环遍历并删除元素的常见陷阱

    转自:https://my.oschina.net/u/2249714/blog/612753?p=1 在工作和学习中,经常碰到删除ArrayList里面的某个元素,看似一个很简单的问题,却很容易出b ...

  3. css样式

    这是CSS的定义经常用到的样式: body{ width:100%; background:#000; text-align:center;font:12px "宋体", Aria ...

  4. 通过YUM库自动安装Mongodb

    1.1查看操作系统版本 1.2验证当前yum库是否包含mongodb 1.3配置包含mongodb的yum源 1.4再次验证YUM库中的mongodb 1.5 yum库安装mongodb 为方便观察, ...

  5. WPF中UserControl和DataTemplate

    最新更新: http://denghejun.github.io 前言 前言总是留给我说一些无关主题的言论,WPF作为全新Microsoft桌面或web应用程序显示技术框架, 从08年开始,一直到现在 ...

  6. Unity3D的四种坐标系

    [Unity3D的四种坐标系] 1.World Space(世界坐标):我们在场景中添加物体(如:Cube),他们都是以世界坐标显示在场景中的.transform.position可以获得该位置坐标. ...

  7. ExAllocatePool、ExAllocatePoolWithTag

    PVOID p = ExAllocatePool(Pool_Type, Size); PVOID p = ExAllocatePoolWithTag(Pool_Type, Size, Tag); 调用 ...

  8. javascript 时间格式化

    添加扩展 //时间格式化扩展Date.prototype.format = function(format){ var o = { "M+" : this.getMonth()+1 ...

  9. Ubuntu ./configure 半途终止 导致没有生成makefile文件 解决方法

    在安装thrift的时候,解压包进入目录,执行命令: ./configure 之后,发现某些包没有安装,导致configure到一半的时候退出,接着make发现没有makefile文件.估计是我系统安 ...

  10. jquery autocomplete插件

    jquery autocomplete插件 https://goodies.pixabay.com/jquery/auto-complete/demo.html autocomplete-table ...