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

时间：2022-05-08 11:54:42

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等静态资源。

iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZbundlePath和其中的内容展示

至此，在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

iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZ打开Targets(基于xcode5的界面)iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZ展开Compile Sources后能看到两个js文件

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

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

 

相关文章