一、WebView加载HTML

UIWebView提供了三个方法来加载html资源

1. loadHTMLString:baseURL: 把html文件的内容以字符串的形式加载到webView里面,然后解析。编码为UTF8

1
2
3
NSString *filePath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSURL *baseURL = [[NSBundle mainBundle] bundleURL];
[self.webView loadHTMLString:[NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil] baseURL:baseURL];

2. loadData:MIMEType:textEncodingName:baseURL: 把html文件的内容以二进制的形式加载到webView里面,然后解析。MIMETYPE指定html文件的格式为"text/html",编码为UTF8

1
2
3
4
NSString *filePath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSURL *baseURL = [[NSBundle mainBundle] bundleURL];
NSData *data = [NSData dataWithContentsOfFile:filePath];
[self.webView loadData:data MIMEType:@"text/html" textEncodingName:@"UTF-8" baseURL:baseURL];

3. loadRequest:构造一个请求,webView以请求的形式加载本地html文件,然后解析。这种方式可以直接加载网络html

1
2
3
4
NSString *filePath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
NSURL *url = [NSURL fileURLWithPath:filePath];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[self.webView loadRequest:request];

二、WebView加载image,css,js

1. 上面加载html方式中的前两种都指定了一个baseURL,那么这个baseURL是干什么的?

iOS程序在运行的时候会把程序用到的资源文件copy到Bundle中,baseURL指定的目录就是Bundle的根目录

所以image,css,js资源,不管在项目里面放在哪个目录结构下,在HTML内引用的时候,都是直接根目录的

书写资源路径的时候,按照相对路径来理解,html和image,css,js可以看做是在同一个目录下

2. Xcode之前版本可能会把css,js文件当做编译资源而不是Bundle资源,这时可能会出现css,js没有效果

我们在Xcode中Build Phases下可以看到资源文件的存放位置,跟本次内容关联最大的有两项:Compile SourcesCopy Bundle Resources

查看确保资源位置放置正确即可修复这类问题

参考资料(戳这里):

>  http://www.shuizhongyueming.com/2014/01/06/load-local-image-js-css-file-to-webview-in-xcode/

感谢分享

OC与JS交互前言-b的更多相关文章

  1. OC与JS交互前言

    OC与JS交互过程中,可能会需要使用本地image资源及html,css,js文件,这些资源应该如何被加载? 一.WebView加载HTML UIWebView提供了三个方法来加载html资源 1.  ...

  2. OC和JS交互的三种方法

    看简书上说一共有六种OC和JS交互的方法,但是前三种原理都一致,都是通过检测.拦截Url地址实现互相调用的.剩下的react native等第三方框架原理不一样,也没有去研究,下边记录我使用的三种方法 ...

  3. Mac Webview OC与JS交互实现

    1.首先,需要定义一个JS可识别的变量(如external)用于OC与JS交互 - (void)webView:(WebView *)sender didClearWindowObject:(WebS ...

  4. iOS(UIWebView 和WKWebView)OC与JS交互 之二

    在iOS应用的开发过程中,我们经常会使用到WebView,当我们对WebView进行操作的时候,有时会需要进行源生的操作.那么我记下来就与大家分享一下OC与JS交互. 首先先说第一种方法,并没有牵扯O ...

  5. OC与JS交互之WebViewJavascriptBridge

    上一篇文章介绍了通过UIWebView实现了OC与JS交互的可能性及实现的原理,并且简单的实现了一个小的示例DEMO,当然也有一部分遗留问题,使用原生实现过程比较繁琐,代码难以维护.这篇文章主要介绍下 ...

  6. OC与JS交互之UIWebView

    随着H5的强大,hybrid app已经成为当前互联网的大方向,单纯的native app和web app在某些方面显得就很劣势.关于H5的发展史,这里有一篇文章推荐给大家,今天我们来学习最基础的基于 ...

  7. WebViewJavascriptBridge源码探究--看OC和JS交互过程

    今天把实现OC代码和JS代码交互的第三方库WebViewJavascriptBridge源码看了下,oc调用js方法我们是知道的,系统提供了stringByEvaluatingJavaScriptFr ...

  8. iOS(WKWebView)OC与JS交互 之三

      随着H5功能愈发的强大,没进行过混合开发的小伙们都不好意思说自己能够独立进行iOS的app开发,在iOS7操作系统下,常用的native,js交互框架有easy-js,WebViewJavascr ...

  9. OC与JS交互之WKWebView

    上一篇文章我们使用了JavaScriptCore框架重写了之前的示例,iOS8苹果偏爱HTML5,重构了UIWebVIew,给我们带来了WKWebView,使其性能.稳定性.功能大幅度提升,也更好的支 ...

随机推荐

  1. Redis学习手册(Hashes数据类型)

    一.概述: 我们可以将Redis中的Hashes类型看成具有String Key和String Value的map容器.所以该类型非常适合于存储值对象的信息.如Username.Password和Ag ...

  2. The 10 Most Important Security Controls Missing in JavaEE--reference

    JavaEE has some excellent built-in security mechanisms, but they don’t come close to covering all th ...

  3. [转] React Native Navigator — Navigating Like A Pro in React Native

    There is a lot you can do with the React Native Navigator. Here, I will try to go over a few example ...

  4. Java基础知识强化之IO流笔记42:IO流总结(图解)

    1. IO流总结(图解)

  5. E: Sub-process /usr/bin/dpkg returned an error code (1)

    E: Sub-process /usr/bin/dpkg returned an error code (1) 错误描述 dpkg: error processing archive /var/cac ...

  6. 【C#】获取本地Cookie的问题

    using System; using System.Net; using System.IO; using System.Text; // // TODO: 在此处添加代码以启动应用程序 // st ...

  7. 那天有个小孩跟我说LINQ(五)转载

    2  LINQ TO SQL(代码下载)      我们以一个简单的销售的业务数据库为例子         表结构很简单:Users(购买者(用户)表),Products(产品信息表),Sales(销 ...

  8. 总结一下const和readonly

    const和readonly的值一旦初始化则都不再可以改写: const只能在声明时初始化:readonly既可以在声明时初始化也可以在构造器中初始化: const隐含static,不可以再写stat ...

  9. ubuntu 安装 fcitx

    安装fcitx (1)添加ppa源 sudo add-apt-repository ppa:fcitx-team/nightly 或 sudo add-apt-repository ppa:fcitx ...

  10. IOS之沙盒(Sandbox)机制

    IOS中每个App应用程序都有一个单独封闭的文件夹,这个文件夹称为沙盒,并且苹果规定,任何App都无权访问其他App的沙盒 沙盒目录通过 FOUNDATION_EXPORT NSString *NSH ...