美文网首页我爱编程iOS开发资料收集
iOS之在webView中引入本地html,image,js,c

iOS之在webView中引入本地html,image,js,c

作者: 乡水情缘 | 来源:发表于2016-12-11 18:22 被阅读0次

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

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

    加载webview的代码如下
       // get the model which is a html file for the webView
    NSString * 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文件

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

    // get the model which is a html file for the webView
    NSString * 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];
    

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

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

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

    添加本地js文件到webView中

    添加js文件

    这个实现说起来其实很简单,因为不需要任何代码层面上的修改,只需要按上面添加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

    e2804a7f745cc38bf3b4e5e1eae08845.png fcba8fcb77ff990394dfcd106a530e3b.png

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

    其他格式的资源文件,在添加的时候也大致就是这个流程,不重复说了。
    参考链接 http://www.th7.cn/web/html-css/201412/70846.shtml

    2.iOS中用UIWebView的loadHTMLString后图片和文字失调解决方法

    iOS中用UIWebView的loadHTMLString后图片和文字失调,图片过大,超过屏幕,文字太小;或者图片太小,文字太大,总之就是不协调。我们的需求是让图片的大小跟着屏幕的变化而变化,就是动态的去适应屏幕;那么文字的字体就是我们自己可以控制,可大可小。要想达到这样的效果,我们要在用loadHTMLString加载字符串之前对它进行处理。怎么处理呢?什么原理呢?

    NSString *htmls = [NSString stringWithFormat:@"<html> \n"
                               "<head> \n"
                               "<style type=\"text/css\"> \n"
                               "body {font-size:15px;}\n"
                               "</style> \n"
                               "</head> \n"
                               "<body>"
                               "<script type='text/javascript'>"
                               "window.onload = function(){\n"
                               "var $img = document.getElementsByTagName('img');\n"
                               "for(var p in  $img){\n"
                                  " $img[p].style.width = '100%%';\n"
                                   "$img[p].style.height ='auto'\n"
                               "}\n"
                               "}"
                               "</script>%@"
                               "</body>"
                               "</html>",htmlString];
    

    原理就是用一个for循环,拿到所有的图片,对每个图片都处理一次,让图片的宽为100%,就是按照屏幕宽度自适应;让图片的高atuo,自动适应。文字的字体大小,可以去改font-size:15px,这里我用的是15px。根据自己的具体需求去改吧。

    相关文章

      网友评论

        本文标题:iOS之在webView中引入本地html,image,js,c

        本文链接:https://www.haomeiwen.com/subject/viypmttx.html