zoukankan      html  css  js  c++  java
  • UIWebView 加载本地HTML文件

    UIWebView加载本地HTML文件

    2013 年 6 月 27 日

    http://www.iliunian.com/2030.html

    一.准备HTML文件及其资源文件

    使用UIWebView加载本地的HTML文件 index.html,在index.html中引用了本地的图片、CSS文件、JS文件以及外部的图片。
    index.html内容如下

    <html> <head> <link href="index.css" rel="stylesheet" type="text/css"> <script type="text/javascript"language="javascript"src="index.js"> </head> <body> <p>This is local Image</p> <img src="Smiley.png" width="50" height="50" /> <hr/> <p>this is local image from CSS.</p> <div id="myimage"> </div> <hr/> <p>this is external image.</p> <img src="http://imglf9.ph.126.net/F37NyhuzmvHJChMARbFmHA==/1010495166409149719.jpg" width="300" height="200" /> </body> </html>

    HTML中会显示3张图片,第一张是html从本地读取的图片,第二张是通过CSS从本地读取的图片,第三张是通过绝对地址从外部读取的图片。
    index.css文件内容如下:

    body { padding: 0px; margin: 0px; } p { font-size: 15px; color: #808080; font-family: Arial, Helvetica, sans-serif; } #myimage { background-image: url(SmallSmiley.png); background-repeat: repeat-x; }

    index.js文件内容为:

    function rewrite() { document.write("This text was written by an external script!") }

    index.js
    还有引用到了两个本地图片文件:
    SmallSmiley.png
    Smiley.png

    二.加载本地HTML文件

    将html文件及相关资源添加到项目中

    需要注意的是,把js文件加入到项目时会默认将其当做需要编译的代码,需要在TARGETS->Build Phases中的”Compile Sources”中找到该js文件,并将其移到上面的Copy Bundle Resources中。

    然后在代码中可以用两种方法加载。
    1.第一种方式,使用loadRequest:方法加载本地文件NSURLRequest

    NSString* path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"]; NSURL* url = [NSURL fileURLWithPath:path]; NSURLRequest* request = [NSURLRequest requestWithURL:url] ; [webView loadRequest:request];

    2.第二种方式,使用loadHTMLString:baseURL:加载HTML字符串

    NSURL *baseURL = [NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]]; NSString *path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"]; NSString *html = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil]; [webView loadHTMLString:html baseURL:baseURL];

    加载后的显示效果如下,本地图片,CSS加载的本地图片,以及外部图片都可以正常显示。

    在HTML页面加载完毕后,我们可以使用UIWebView的stringByEvaluatingJavaScriptFromString:方法执行javascript语句。如下:

    - (void)webViewDidFinishLoad:(UIWebView *)webView{ [webView stringByEvaluatingJavaScriptFromString:@"rewrite();"]; }

    执行js代码后,页面显示就变成了

    三.关于baseURL

    loadHTMLString:baseURL:方法的第二个参数是baseURL,baseURL即HTML字符串中引用到资源的查找路径,没有引用外部资源时,可以直接传nil;若引用了外部资源,一般情况下使用mainBundle的路径即可,即

    NSURL *baseURL = [NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]];

    这是因为,Xcode项目中的文件路径都是虚拟的,在APP中实际不存在,即在APP中,几乎所有的文件都可以从mainBundle根目录下直接访问,当然,例外总是存在的。

    在将文件/文件夹加入到项目时,有这样两个选项“Create Folder References for any added folders”和“Recursively create groups for any added folders”。

    默认情况下为第一种,即所有加入到项目的文件都会在mainBundle根路径下,即不管加入项目的文件的目录结构如何,在APP中都可以通过 mainBundlePath/filename来访问到;如果采用第二种方式,则就会保留相对路径,需要通过mainBundlePath/path /filename来访问。通过这两种方式到项目的文件夹显示具有不同的颜色,如下

    images1目录是使用“Create Folder References for any added folders”增加的目录,images2目录是使用“Recursively create groups for any added folders”增加的目录。

    获取images1目录下文件的代码如下:

    NSString* image1Path = [[NSBundle mainBundle] pathForResource:@"image1"ofType:@"jpg"]; NSString* image11Path = [[NSBundle mainBundle] pathForResource:@"image11"ofType:@"jpg"];

    images1和images11目录实际是不存在的,下面代码返回的路径都是nil

    NSString* images1Dir = [[NSBundle mainBundle] pathForResource:@"images1"ofType:nil]; NSString* images11Dir = [[NSBundle mainBundle] pathForResource:@"images11"ofType:nil];

    对于images2目录以及目录下的文件路径,其在APP中仍然保持了目录关系,就不能用上述方法获取,而且目录路径是真实存在的,应该使用的代码如下:

    NSString* images2Path = [[NSBundle mainBundle] pathForResource:@"image2"ofType:@"jpg"inDirectory:@"images2"]; NSString* image22Path = [[NSBundle mainBundle] pathForResource:@"image22"ofType:@"jpg"inDirectory:@"images2/images22"]; NSString* images2Dir = [[NSBundlemainBundle] pathForResource:@"images2"ofType:nil]; NSString* images2Dir = [[NSBundle mainBundle] pathForResource:@"images22"ofType:nilinDirectory:@"images2"];

    还有一种比较特殊的目录是以.bundle为后缀的目录,将其加入到项目是不管选择的是哪个选项,其都会保持其目录结构。

    对子bundle的访问,可以通过同images2目录相同的方法访问,但一般情况下是先获取到子Bundle,再通过子Bundle获取到其里面的资源。

    NSBundle *bundle = [NSBundle bundleWithPath:[[NSBundle mainBundle] pathForResource:@"images" ofType:@"bundle"]]; NSString* imagebPath = [bundle pathForResource:@"imageb"ofType:@"jpg"]; NSString* imagebbPath = [bundle pathForResource:@"imagebb"ofType:@"jpg" inDirectory:@"imagesb"];

    参考:
    How to load local HTML resouces in UIWebView
    UIWebView and JavaScript
    UIWebView如何加载CSS?
    UIWebView – Loading External Images and CSS
    Using iPhone UIWebView Class with local CSS & JavaScript resources
    UIWebView – The Most Versatile Class in UIKit

  • 相关阅读:
    os.path.basename()和os.path.splitext()
    关于pytorch中@和*的用处
    Python | os.path.join() method
    SURF (Speeded Up Robust Features,加速稳健特征)
    Canny算子
    医学影像中常见名词解释
    sigmod、tanh、ReLU激活函数的实现
    plt.gca()坐标轴移动
    损失函数和梯度下降解释
    torch和numpy的相互转换
  • 原文地址:https://www.cnblogs.com/allanliu/p/4369556.html
Copyright © 2011-2022 走看看