iOS中JavaScript和OC交互
在iOS開發(fā)中很多時(shí)候我們會(huì)和UIWebView打交道狡孔，目前國內(nèi)的很多應(yīng)用都采用了UIWebView的混合編程技術(shù)，最常見的是微信公眾號(hào)的內(nèi)容頁面。前段時(shí)間在做微信公眾平臺(tái)相關(guān)的開發(fā)他嚷，發(fā)現(xiàn)很多應(yīng)用場景都是利用HTML5和UIWebView來實(shí)現(xiàn)的坤溃。
機(jī)制
Objective-C語言調(diào)用JavaScript語言，是通過UIWebView的 - (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;的方法來實(shí)現(xiàn)的昧互。該方法向UIWebView傳遞一段需要執(zhí)行的JavaScript代碼最后獲取執(zhí)行結(jié)果挽铁。
JavaScript語言調(diào)用Objective-C語言，并沒有現(xiàn)成的API敞掘，但是有些方法可以達(dá)到相應(yīng)的效果叽掘。具體是利用UIWebView的特性：在UIWebView的內(nèi)發(fā)起的所有網(wǎng)絡(luò)請(qǐng)求，都可以通過delegate函數(shù)得到通知玖雁。
示例
下面提供一個(gè)簡單的例子介紹如何相互的調(diào)用更扁，實(shí)現(xiàn)的效果是在界面上點(diǎn)擊一個(gè)鏈接，然后彈出一個(gè)對(duì)話框判斷是否登錄成功赫冬。
uiwebview_js_demo.png
（1）示例的HTML的源碼如下：
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta content="always" name="referrer" />
<title>測試網(wǎng)頁</title>
</head>
<body>
<br />
<a href="devzeng://login?name=zengjing&password=123456">點(diǎn)擊鏈接</a>
</body>
</html>
（2）UIWebView Delegate回調(diào)方法為：
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
NSURL *url = [request URL];
if([[url scheme] isEqualToString:@"devzeng"]) {
//處理JavaScript和Objective-C交互
if([[url host] isEqualToString:@"login"])
{
//獲取URL上面的參數(shù)
NSDictionary *params = [self getParams:[url query]];
BOOL status = [self login:[params objectForKey:@"name"] password:[params objectForKey:@"password"]];
if(status)
{
//調(diào)用JS回調(diào)
[webView stringByEvaluatingJavaScriptFromString:@"alert('登錄成功!')"];
}
else
{
[webView stringByEvaluatingJavaScriptFromString:@"alert('登錄失敗!')"];
}
}
return NO;
}
return YES;
}
說明：
1浓镜、同步和異步的問題
（1）Objective-C調(diào)用JavaScript代碼的時(shí)候是同步的
- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;
（2）JavaScript調(diào)用Objective-C代碼的時(shí)候是異步的
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;
2、常見的JS調(diào)用
（1）獲取頁面title
NSString *title = [webview stringByEvaluatingJavaScriptFromString:@"document.title"];
（2）獲取當(dāng)前的URL
NSString *url = [webview stringByEvaluatingJavaScriptFromString:@"document.location.href"];
3劲厌、使用第三方庫
https://github.com/marcuswestin/WebViewJavascriptBridge
使用案例
1膛薛、動(dòng)態(tài)將網(wǎng)頁上的圖片全部縮放
JavaScript腳本如下：
function ResizeImages() {
var myImg, oldWidth;
var maxWidth = 320;
for(i = 0; i < document.images.length; i++) {
myImg = document.images[i];
if(myImg.width > maxWidth) {
oldWidth = myImg.width;
myImg.width = maxWidth;
myImg.heith = myImg.height*(maxWidth/oldWidth);
}
}
}
在iOS代碼中添加如下代碼：
[webView stringByEvaluatingJavaScriptFromString:
@"var script = document.createElement('script');"
"script.type = 'text/javascript';"
"script.text = "function ResizeImages() { "
"var myimg,oldwidth;"
"var maxwidth=380;" //縮放系數(shù)
"for(i=0;i <document.images.length;i++){"
"myimg = document.images[i];"
"if(myimg.width > maxwidth){"
"oldwidth = myimg.width;"
"myimg.width = maxwidth;"
"myimg.height = myimg.height * (maxwidth/oldwidth);"
"}"
"}"
"}";"
"document.getElementsByTagName('head')[0].appendChild(script);"];
[webView stringByEvaluatingJavaScriptFromString:@"ResizeImages();"];
參考資料
1、《關(guān)于UIWebView和PhoneGap的總結(jié)》
2补鼻、《iOS開發(fā)之Objective-C與JavaScript的交互 》
