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>
