iOS開發過程中會經常和UIWebView打交道,這其中不可避免的涉及到JS和OC的數據交互,今天在此總結下這其中的幾種方法.
OC調用JS的方法
-
UIWebView的
stringByEvaluatingJavaScriptFromString方法====OC中的代碼==== - (IBAction)didClickButton:(id)sender { NSString *name = @"lisi"; NSString *jsStr = [NSString stringWithFormat:@"changeName(\"%@\")",name]; [self.webview stringByEvaluatingJavaScriptFromString:jsStr]; } ====Html文件中代碼==== <script> function changeName(name){ var div = document.getElementById("mydiv"); div.innerHTML = name; } </script> <body> <div>name:</div> <div onclick="test()" id="mydiv">zhangsan</div> </body>
但是這個方法是一個同步的方法,使用它執行JS方法時,如果JS 方法比較耗的時候,會造成界面卡頓.此時,將耗時較長的js方法放到setTimeout中即可.當然,如果嘗試在子線程中調用stringByEvaluatingJavaScriptFromString顯然是不正確的.報錯信息如下:
Tried to obtain the web lock from a thread other than the main thread or the web thread. This may be a result of calling to UIKit from a secondary thread. Crashing now...
-
運用
JavaScriptCore來實現
在iOS 7之后，apple添加了一個新的庫JavaScriptCore,他是webkit的一個重要組成部分,主要是對JS進行解析和提供執行環境,極大的方便了我們對js的操作.
在這里,我建立了一個UIWebView的分類,主要作用是獲取webView的上下文,便于對js的操作:
/**
* 黑魔法橋接js
*/
@interface UIWebView (JSContext)
- (nullable JSContext *)context;
@end#import "UIWebView+JSContext.h" @implementation UIWebView (JSContext) - (JSContext *)context { return [self valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]; } @end點擊iOS原生按鈕執行js代碼:
- (IBAction)didClickButton:(id)sender {
NSString *name = @"lisi";
NSString *jsStr = [NSString stringWithFormat:@"changeName("%@")",name];
JSContext *context = self.webview.context;
[context evaluateScript:jsStr];
}
JS調用OC的方法
-
JS發送一個假的url請求,然后在webView的代理方法中攔截該請求,并做相應的處理
====OC中的代碼==== - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{ //調用OC原生方法 if ([request.URL.scheme isEqualToString:@"bridge"]) { //調用OC原生方法 如打開攝像頭之類的方法 // ....... return NO; } return YES; } ====Html文件中代碼==== <script> function test() { var mydiv = document.getElementById("mydiv"); window.location.href="bridge://" + mydiv.innerHTML; } </script> <body> <div>name:</div> <div onclick="test()" id="mydiv">zhangsan</div> </body>
但是html文件中的test()采用的window.location方式在多次請求時會存在被替換覆蓋的問題,故采用下面這種方式:
<script>
function loadURL(url) {
var tempElement;
tempElement = document.createElement("tempElement");
tempElement.setAttribute("src", url);
tempElement.setAttribute("style", "display:none;");
tempElement.setAttribute("height", "0px");
tempElement.setAttribute("width", "0px");
tempElement.setAttribute("frameborder", "0");
document.body.appendChild(tempElement);
// 發起請求后這個 tempElement 就沒用了，所以把它從 dom 上移除掉
tempElement.parentNode.removeChild(tempElement);
tempElement = null;
}
function test() {
var mydiv = document.getElementById("mydiv");
loadURL("bridge://" + mydiv.innerHTML);
}
</script>
-
使用JavaScriptCore
- (void)webViewDidFinishLoad:(UIWebView *)webView{JSContext *context = webView.context; // 給JS變量賦值 context[@"myName"] = @"sunsb"; // 給JS方法賦值 context[@"test3"] = ^(){ // 可以執行具體的OC代碼...... // ##注意:這里是子線程 NSLog(@"點擊js執行了OC的方法了\n線程:%@\n",[NSThread currentThread]); NSArray *args = [JSContext currentArguments]; for (JSValue *value in args) { NSLog(@"%@",value.toString); } }; } ====Html文件中代碼==== <script> function test() { // myName的值是OC中代碼賦值的 alert(myName); // test3的具體實現在OC代碼中 test3("one","two","three"); } </script> <body> <div>name:</div> <div onclick="test()" id="mydiv">zhangsan</div> </body>
