js页面加载完成调用oc_js oc相互调用的三种方法

最新推荐文章于 2024-01-04 03:40:05 发布

原创最新推荐文章于 2024-01-04 03:40:05 发布 · 647 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#js页面加载完成调用oc

本文详细介绍了JS与Objective-C（OC）之间的三种调用方法：1) 利用URL调用，通过定义js方法和处理UIWebView代理；2) 直接使用JavaScriptCore框架进行调用；3) 利用JSExport协议创建对象调用。每种方法都有示例代码，第三种方法尤其适合处理大量交互的情况，可以避免ViewController过于庞大。

JS oc相互调用方法：

1.利用定义url调用

2.利用js直接调用

3.利用js里对象调用

首先先创建UIWebView对象，加载本地html文件

//加载本地html文件

NSString *htmlPath = [[NSBundle mainBundle] pathForResource:@"jsbridge" ofType:@"html"];

//NSString *htmlPath1 = [[NSBundle mainBundle] pathForResource:@"jsbridge" ofType:@"html"];

//NSString *htmlPath2 = [[NSBundle mainBundle] pathForResource:@"jsbridge" ofType:@"html"];

NSString *htmlString = [NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncoding error:nil];

_webView = [[UIWebView alloc] initWithFrame:self.view.bounds];

[_webView loadHTMLString:htmlString baseURL:nil];

_webView.delegate = self;

[self.view addSubview:_webView];

实现UIWebViewDelegate

//网页是否要加载

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType

//网页开始加载

- (void)webViewDidStartLoad:(UIWebView *)webView

//网页加载完成

- (void)webViewDidFinishLoad:(UIWebView *)webView

//网页加载失败

- (void)webView:(UIWebView *)webView didFailLoadWithError:(nullable NSError *)error

1.利用定义url调用

js 调用oc：

定义js方法，点击网页上的按钮触发js方法，重定向url，UIWebViewd的代理方法触发

屏幕快照 2016-05-03 下午3.14.25.png

判断定义好的scheme,获取url传过来的值

屏幕快照 2016-05-03 下午3.19.05.png

oc 调用js：

NSString *textJS = @"showAlert('这里是JS中alert弹出的message 第一种方式')";

[_webView stringByEvaluatingJavaScriptFromString:textJS];

2.利用js直接调用

使用第二种和第三种方式时需要加入JavaScriptCore.framework，如果项目要求支持ios7.0之前的需要做兼容

从iOS7开始苹果公布了JavaScriptCore.framework 它使得JS与OC的交互更加方便了。

首先导入JavaScriptCore.framework

20150725170931474.png

然后导入头文件

#import

更换加载的html文件

屏幕快照 2016-05-03 下午3.34.10.png

web中的js方法

屏幕快照 2016-05-03 下午3.37.36.png

点击web中按钮,通过JScontext直接调用share方法，从JSValue中取值

屏幕快照 2016-05-03 下午3.35.26.png

oc 调用js：

JSContext *context = [_webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

//oc 调用 js

NSString *textJS = @"showAlert('这里是JS中alert弹出的message')";

[context evaluateScript:textJS];

3.利用js里对象调用

此处稍微复杂一点我们需要使用到

JSExport

凡事添加了JSExport协议的协议，所规定的方法，变量等就会对js开放，我们可以通过js调用到

首先在html中创建对象，定义方法

屏幕快照 2016-05-03 下午3.44.27.png

无参方法

TestJSobject.TestNOParameter();

有一个参数的方法

TestJSobject.TestOneParameter(TestJSobject.name);

有两个参数的方法

TestJSobject.TestTwoParameterSecondParameter(TestJSobject.name,TestJSobject.age);

创建oc类，添加协议

屏幕快照 2016-05-03 下午3.47.46.png

实现协议方法

屏幕快照 2016-05-03 下午3.48.01.png

特别注意：

如果js中的参数超过两个，oc中方法名需要分开

js中的方法 TestJSobject.TestTwoParameterSecondParameter(TestJSobject.name,TestJSobject.age); oc中的方法 -(void)TestTwoParameter:(NSString *)message1 SecondParameter:(NSString *)message2

//js对象调用，创建对象

JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

TestJSobject *test = [TestJSobject new];

context[@"TestJSobject"] = test;

oc 调用js：

//同样我们也用刚才的方式模拟一下js调用方法

NSString *jsStr1=@"TestJSobject.TestNOParameter()";

[context evaluateScript:jsStr1];

点击web中的按钮，oc中的协议方法被触发

屏幕快照 2016-05-03 下午4.05.06.png

屏幕快照 2016-05-03 下午4.05.10.png

总结：根据以上几种方法，个人感觉第三种方法能更好的和oc相关联起来，而且还避免了viewController中过于庞大，如果方法多的时候。