HTML調(diào)用iOS中的API，實(shí)現(xiàn)原理是通過(guò)橋接的方式，下面我們就簡(jiǎn)單的實(shí)現(xiàn)html是怎樣與iOS橋接蚀乔。補(bǔ)充一點(diǎn)，通過(guò)這一原理讓iOS與HTML實(shí)現(xiàn)交互的開(kāi)源框架已經(jīng)有很多菲茬，比如Facebook開(kāi)源的React-Native吉挣，Hbuilder等。
目標(biāo)實(shí)現(xiàn)
- 點(diǎn)擊webView中的圖片婉弹，調(diào)用系統(tǒng)相冊(cè)
實(shí)現(xiàn)原理
- 通過(guò)js文件實(shí)現(xiàn)橋接方式
具體步驟
- 橋接文件實(shí)現(xiàn)
創(chuàng)建newsDetail.js文件睬魂，文件實(shí)現(xiàn)如下，
window.onload = function(){
// 拿到所有的圖片
var allImg = document.getElementsByTagName("img");
// 遍歷
for(var i= 0; i<allImg.length;i++) {
// 取出單個(gè)圖片對(duì)象
var img = allImg[i];
img.id = i;
// 監(jiān)聽(tīng)點(diǎn)擊
img.onclick = function(){
// 約定的操作
window.location.href = 'xmg:///openCamera'
}
}
}
- 加載newsDetail.js文件
加載newsDetail.js的url路徑镀赌，創(chuàng)建jsHtml標(biāo)簽氯哮，
// 加載js的url路徑
let js = NSBundle.mainBundle().URLForResource("newsDetail", withExtension: "js");
// 創(chuàng)建html標(biāo)簽
let jsHtml = "<script src=\"\(js!)\"></script>"
// 拼接HTML
let html = "<html><head>\(cssHtml)</head><body>\(titleHtml)\(subTitleHtml)\(bodyHtml)\(jsHtml)</body></html>"
- 實(shí)現(xiàn)webView的代理方法
webView的代理實(shí)現(xiàn)，對(duì)接newsDetail.js橋鏈接商佛，
// webView的代理方法
func webView(webView: UIWebView, shouldStartLoadWithRequest request: NSURLRequest, navigationType: UIWebViewNavigationType) -> Bool {
// 1.取出請(qǐng)求字符串
let requestString: NSString = (request.URL?.absoluteString)!;
// print(requestString!);
// 2.判斷處理
let URLHeader = "xmg:///";
let range = requestString.rangeOfString(URLHeader);
let location = range.location;
if (location != NSNotFound) { // 包含了協(xié)議頭
// 取出要操作的方法名稱
let method = requestString.substringFromIndex(range.length);
// print(method);
// 包裝成SEL
let sel = NSSelectorFromString(method);
// 執(zhí)行
self.performSelector(sel);
}
return true;
}
訪問(wèn)系統(tǒng)相冊(cè)喉钢，
// 訪問(wèn)相冊(cè)
func openCamera() -> Void {
let photoVC = UIImagePickerController();
photoVC.sourceType = UIImagePickerControllerSourceType.PhotoLibrary;
// 模態(tài)出來(lái)
self.presentViewController(photoVC, animated: true, completion: nil);
}
運(yùn)行效果如下，即成功良姆。
2016-07-19 18_08_35.gif
