HTML调用iOS中的API，实现原理是通过桥接的方式，下面我们就简单的实现html是怎样与iOS桥接。补充一点，通过这一原理让iOS与HTML实现交互的开源框架已经有很多，比如Facebook开源的React-Native，Hbuilder等。
目标实现
- 点击webView中的图片，调用系统相册
实现原理
- 通过js文件实现桥接方式
具体步骤
- 桥接文件实现
创建newsDetail.js文件，文件实现如下，
window.onload = function(){
// 拿到所有的图片
var allImg = document.getElementsByTagName("img");
// 遍历
for(var i= 0; i<allImg.length;i++) {
// 取出单个图片对象
var img = allImg[i];
img.id = i;
// 监听点击
img.onclick = function(){
// 约定的操作
window.location.href = 'xmg:///openCamera'
}
}
}
- 加载newsDetail.js文件
加载newsDetail.js的url路径，创建jsHtml标签，
// 加载js的url路径
let js = NSBundle.mainBundle().URLForResource("newsDetail", withExtension: "js");
// 创建html标签
let jsHtml = "<script src=\"\(js!)\"></script>"
// 拼接HTML
let html = "<html><head>\(cssHtml)</head><body>\(titleHtml)\(subTitleHtml)\(bodyHtml)\(jsHtml)</body></html>"
- 实现webView的代理方法
webView的代理实现，对接newsDetail.js桥链接，
// webView的代理方法
func webView(webView: UIWebView, shouldStartLoadWithRequest request: NSURLRequest, navigationType: UIWebViewNavigationType) -> Bool {
// 1.取出请求字符串
let requestString: NSString = (request.URL?.absoluteString)!;
// print(requestString!);
// 2.判断处理
let URLHeader = "xmg:///";
let range = requestString.rangeOfString(URLHeader);
let location = range.location;
if (location != NSNotFound) { // 包含了协议头
// 取出要操作的方法名称
let method = requestString.substringFromIndex(range.length);
// print(method);
// 包装成SEL
let sel = NSSelectorFromString(method);
// 执行
self.performSelector(sel);
}
return true;
}
访问系统相册，
// 访问相册
func openCamera() -> Void {
let photoVC = UIImagePickerController();
photoVC.sourceType = UIImagePickerControllerSourceType.PhotoLibrary;
// 模态出来
self.presentViewController(photoVC, animated: true, completion: nil);
}
运行效果如下，即成功。
2016-07-19 18_08_35.gif
网友评论