OC与JS交互前言-b
一、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 Sources和Copy Bundle Resources
查看确保资源位置放置正确即可修复这类问题
参考资料(戳这里):
> http://www.shuizhongyueming.com/2014/01/06/load-local-image-js-css-file-to-webview-in-xcode/
感谢分享
OC与JS交互前言-b的更多相关文章
- OC与JS交互前言
OC与JS交互过程中,可能会需要使用本地image资源及html,css,js文件,这些资源应该如何被加载? 一.WebView加载HTML UIWebView提供了三个方法来加载html资源 1. ...
- OC和JS交互的三种方法
看简书上说一共有六种OC和JS交互的方法,但是前三种原理都一致,都是通过检测.拦截Url地址实现互相调用的.剩下的react native等第三方框架原理不一样,也没有去研究,下边记录我使用的三种方法 ...
- Mac Webview OC与JS交互实现
1.首先,需要定义一个JS可识别的变量(如external)用于OC与JS交互 - (void)webView:(WebView *)sender didClearWindowObject:(WebS ...
- iOS(UIWebView 和WKWebView)OC与JS交互 之二
在iOS应用的开发过程中,我们经常会使用到WebView,当我们对WebView进行操作的时候,有时会需要进行源生的操作.那么我记下来就与大家分享一下OC与JS交互. 首先先说第一种方法,并没有牵扯O ...
- OC与JS交互之WebViewJavascriptBridge
上一篇文章介绍了通过UIWebView实现了OC与JS交互的可能性及实现的原理,并且简单的实现了一个小的示例DEMO,当然也有一部分遗留问题,使用原生实现过程比较繁琐,代码难以维护.这篇文章主要介绍下 ...
- OC与JS交互之UIWebView
随着H5的强大,hybrid app已经成为当前互联网的大方向,单纯的native app和web app在某些方面显得就很劣势.关于H5的发展史,这里有一篇文章推荐给大家,今天我们来学习最基础的基于 ...
- WebViewJavascriptBridge源码探究--看OC和JS交互过程
今天把实现OC代码和JS代码交互的第三方库WebViewJavascriptBridge源码看了下,oc调用js方法我们是知道的,系统提供了stringByEvaluatingJavaScriptFr ...
- iOS(WKWebView)OC与JS交互 之三
随着H5功能愈发的强大,没进行过混合开发的小伙们都不好意思说自己能够独立进行iOS的app开发,在iOS7操作系统下,常用的native,js交互框架有easy-js,WebViewJavascr ...
- OC与JS交互之WKWebView
上一篇文章我们使用了JavaScriptCore框架重写了之前的示例,iOS8苹果偏爱HTML5,重构了UIWebVIew,给我们带来了WKWebView,使其性能.稳定性.功能大幅度提升,也更好的支 ...
随机推荐
- Linux环境下搭建Android开发环境
最近在折腾linux.因为咱是搞安卓开发的,所以少不了需要搭建Android开发环境,就此小记,希望能给向我一样的开发者一点帮助!开干! 1.安装JDK 下载JDK包,得到的是类似于jdk-8u65- ...
- android应用版本更新功能---完整版
源码下载地址:csdn下载地址:http://download.csdn.net/download/csdn576038874/9526085 博客园下载地址:http://files.cnblogs ...
- javascript进击(三)简介
JavaScript 表单验证(可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证) 被 JavaScript 验证的这些典型的表单数据有: 用户是否已填写表单中的必填项目? 用户输 ...
- Android 自学之帧布局 FrameLayout
帧布局(FrameLayout)直接继承了ViewGroup组件: 帧布局容器为每一个加入其中的组件都创建了一个空白的区域,这个区域我们称之为一帧,所有每个组件都占据一帧,这些都会根据gravity属 ...
- 理解Objective-c中的copy
说一下深拷贝和浅拷贝的基本概念:a指针指向地址A1, 浅拷贝是创建了一个b指针指向地址A1:深拷贝是创建了一个c指针指向地址A2,A1和A2的地址不同. 我们看到NSObject接口里面是已经声明了c ...
- php生成验证码图片
0:效果图 1:index.php用来生成验证码图片 <?php session_start(); header ('Content-Type: image/png'); $image=imag ...
- (转)Eclipse中junit框架的使用——单元测试
[转]junit浅学笔记一 JUnit是一个回归测试框架(regression testing framework).Junit测试是程序员测试,即所谓白盒测试,因为程序员知道被测试的软件如何(How ...
- jquery - ul li click 无响应
搞了很久, 发现对应jquery来说, 动态产生的ul li(其实不只是这个, 还有 table td等), 直接使用 $("#ul_div>li").click(funct ...
- bootstrap paginator 与 bootstrap3兼容
bootstrap paginator可支持bootstrap2 和bootstrap3. 默认的下载包中支持2,需要手动修改才能支持bootstrap3.具体方法:找到bootstrap-pagin ...
- java内存
java内存分为四部分: 1).栈区(stacksegment),由编译器自动分配释放,存放函数的参数值和局部变量的值等,具体方法执行结束之后,系统自动释放JVM内存资源: 2).堆区(heapseg ...