iOS-HTML交互学习笔记（五）-HTML中调用API

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

• 加载newsDetail.js文件

加载newsDetail.js的url路径，创建jsHtml标签，

// 加载js的url路径
let js = NSBundle.mainBundle().URLForResource("newsDetail", withExtension: "js");
// 创建html标签
let jsHtml = ""

    
// 拼接HTML
let html = "\(cssHtml)\(titleHtml)\(subTitleHtml)\(bodyHtml)\(jsHtml)"

• 实现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