ios js互调

悠悠 2022-08-21 05:39 184阅读 0赞

http://blog.csdn.net/lwjok2007/article/details/47058795

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

下面我们就简单了解一下这个框架

首先我导入framework

方法如下

> ![Center][]
> 
>   
>

点击Linked Frameworks and Libraries 的添加后 选择 JavaScriptCore.framework

> ![Center 1][]
> 
>   
>

选中JavaScriptCore.framework后 点击右下角Add 添加完成

好 创建完成之后我们导入一下头文件

**\[objc\]**  [view plain][]  [copy][view plain]

1.  \#import <JavaScriptCore/JavaScriptCore.h>

点进去 会看到如下几个方法

\#import "JSContext.h"

\#import "JSValue.h"

\#import "JSManagedValue.h"

\#import "JSVirtualMachine.h"

\#import "JSExport.h"

这些方法我们等会再细讲

下来我们创建一个UIWebView  用来测试

创建UIWebView

**\[objc\]**  [view plain][]  [copy][view plain]

1.  **UIWebView** \*myWebView;

初始化，添加，打开网址

**\[objc\]**  [view plain][]  [copy][view plain]

1.  //初始化webview  
2.  myWebView=\[\[UIWebView alloc\]initWithFrame:CGRectMake(0, 22, \[UIScreen mainScreen\].bounds.size.width, \[UIScreen mainScreen\].bounds.size.height\-22)\];  
3.  myWebView.delegate=**self**;  
4.  //添加webview到当前viewcontroller的view上  
5.  \[**self**.view addSubview:myWebView\];  
6.    
7.  //网址  
8.  **NSString** \*httpStr=@"https://www.baidu.com";  
9.  **NSURL** \*httpUrl=\[NSURL URLWithString:httpStr\];  
10. **NSURLRequest** \*httpRequest=\[NSURLRequest requestWithURL:httpUrl\];  
11. \[myWebView loadRequest:httpRequest\];

运行效果如下

> ![Center 2][]
> 
>   
> 
> 
>   
>

下面我们来实现UIWebView的几个代理方法

首先我们看下它的代理方法

**\[objc\]**  [view plain][]  [copy][view plain]

1.  **@protocol** UIWebViewDelegate <NSObject>  
2.    
3.  **@optional**  
4.  \- (**BOOL**)webView:(**UIWebView** \*)webView shouldStartLoadWithRequest:(**NSURLRequest** \*)request navigationType:(UIWebViewNavigationType)navigationType;  
5.  \- (**void**)webViewDidStartLoad:(**UIWebView** \*)webView;  
6.  \- (**void**)webViewDidFinishLoad:(**UIWebView** \*)webView;  
7.  \- (**void**)webView:(**UIWebView** \*)webView didFailLoadWithError:(**NSError** \*)error;  
8.    
9.  **@end**

每个方法的作用等会在带里面做注释

首先我们添加协议

**\[objc\]**  [view plain][]  [copy][view plain]

1.  **@interface** ViewController ()<UIWebViewDelegate>

实现代理方法

**\[objc\]**  [view plain][]  [copy][view plain]

1.  \#pragma mark --webViewDelegate  
2.  \-(**BOOL**)webView:(**UIWebView** \*)webView shouldStartLoadWithRequest:(**NSURLRequest** \*)request navigationType:(UIWebViewNavigationType)navigationType  
3.  \{  
4.      //网页加载之前会调用此方法  
5.        
6.      //retrun YES 表示正常加载网页 返回NO 将停止网页加载  
7.      **return** **YES**;  
8.  \}  
9.    
10. \-(**void**)webViewDidStartLoad:(**UIWebView** \*)webView  
11. \{  
12.     //开始加载网页调用此方法  
13. \}  
14.   
15. \-(**void**)webViewDidFinishLoad:(**UIWebView** \*)webView  
16. \{  
17.     //网页加载完成调用此方法  
18. \}  
19.   
20. \-(**void**)webView:(**UIWebView** \*)webView didFailLoadWithError:(**NSError** \*)error  
21. \{  
22.     //网页加载失败 调用此方法  
23. \}

每个方法是什么时候调用都在注释里面

下来我们先尝试用oc调用一下js方法

**\[objc\]**  [view plain][]  [copy][view plain]

1.  \-(**void**)webViewDidFinishLoad:(**UIWebView** \*)webView  
2.  \{  
3.      //网页加载完成调用此方法  
4.        
5.      //首先创建JSContext 对象（此处通过当前webView的键获取到jscontext）  
6.      **JSContext** \*context=\[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"\];  
7.      **NSString** \*alertJS=@"alert('test js OC')"; //准备执行的js代码  
8.      \[context evaluateScript:alertJS\];//通过oc方法调用js的alert  
9.        
10. \}

执行效果如下：

> ![Center 3][]
> 
>   
> 
> 
>   
> 
> 
> 下来我们使用js调用iOS
> 
> js调用iOS分两种情况
> 
> 一，js里面直接调用方法
> 
> 二，js里面通过对象调用方法
> 
>   
> 
> 
> 首先我们看第一种，直接调用方法。
> 
> 其中用到了iOS的block
> 
>   
> 
> 
> 上代码
> 
>   
> 
> 
> **\[objc\]**  [view plain][view plain 1]  [copy][view plain 1]
> 
>   [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]
> 
> 1.  \-(**void**)webViewDidFinishLoad:(**UIWebView** \*)webView  
> 2.  \{  
> 3.      //网页加载完成调用此方法  
> 4.        
> 5.      //iOS调用js  
> 6.        
> 7.      //首先创建JSContext 对象（此处通过当前webView的键获取到jscontext）  
> 8.      **JSContext** \*context=\[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"\];  
> 9.      
> 10.     //js调用iOS  
> 11.     //第一种情况  
> 12.     //其中test1就是js的方法名称，赋给是一个block 里面是iOS代码  
> 13.     //此方法最终将打印出所有接收到的参数，js参数是不固定的 我们测试一下就知道  
> 14.     context\[@"test1"\] = ^() \{  
> 15.         **NSArray** \*args = \[JSContext currentArguments\];  
> 16.         **for** (**id** obj in args) \{  
> 17.             NSLog(@"%@",obj);  
> 18.         \}  
> 19.     \};  
> 20.     //此处我们没有写后台（但是前面我们已经知道iOS是可以调用js的，我们模拟一下）  
> 21.     //首先准备一下js代码，来调用js的函数test1 然后执行  
> 22.     //一个参数  
> 23.     **NSString** \*jsFunctStr=@"test1('参数1')";  
> 24.     \[context evaluateScript:jsFunctStr\];  
> 25.       
> 26.     //二个参数  
> 27.     **NSString** \*jsFunctStr1=@"test1('参数a','参数b')";  
> 28.     \[context evaluateScript:jsFunctStr1\];  
> 29.       
> 30. \}  
> 
>   
> 以上代码中 给test1赋值的block要是执行了那么结果就是对的，js调用了iOS
> 
> 我们看结果
> 
> > ![Center 4][]
> > 
> >   
> > 
> 
> 我们看到参数被打印出来了，而且一个参数和两个参数都可以，也符合js参数个数不限制
> 
>   
> 
> 
>   
> 
> 
> 下来我们看第二种情况 就是js 中是通过一个对象来调用方法的。
> 
> 此处稍微复杂一点我们需要使用到
> 
> JSExport
> 
> 凡事添加了JSExport协议的协议，所规定的方法，变量等 就会对js开放，我们可以通过js调用到
> 
>   
> 如果js是一个参数或者没有参数的话 就比较简单，我们的方法名和js的方法名保持一致即可
> 
> 比如： js方法为  
> 
> **\[objc\]**  [view plain][view plain 1]  [copy][view plain 1]
> 
>   [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]
> 
> 1.  testobject.TestOneParameter('参数1')  
> 
> 那么 我们在oc中添加的代理方法就为
> 
> **\[objc\]**  [view plain][view plain 1]  [copy][view plain 1]
> 
>   [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]
> 
> 1.  \-(**void**)TestOneParameter:(**NSString** \*)message;  
> 
>   
> 
> 
> 如果js是多个参数的话  我们代理方法的所有变量前的名字连起来要和js的方法名字一样
> 
> 比如： js方法为    
> 
> 
> **\[objc\]**  [view plain][view plain 1]  [copy][view plain 1]
> 
>   [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]
> 
> 1.  testobject.TestTowParameterSecondParameter('参数A','参数B')  
> 
> 他有两个参数 那么我们的代理方法 就是把js的方法名 TestTowParameterSecondParameter 任意拆分成两段作为代理方法名（此处我们拆分为 TestTowParameter 和 SecondParameter ） 那么我们的代理方法就是
> 
> **\[objc\]**  [view plain][view plain 1]  [copy][view plain 1]
> 
>   [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]
> 
> 1.  \-(**void**)TestTowParameter:(**NSString** \*)message1 SecondParameter:(**NSString** \*)message2;  
> 
> 我们看代理方法有两个变量别名
> 
> TestTowParameter 和 SecondParameter   
> 
> 
> 他两个拼接起来就刚好是我们js的方法名
> 
>   
> 
> 
>   
> 
> 
> 此处有点绕。我们直接看代码
> 
>   
> 
> 
> 首先创建一个类 继承NSObject 并且规定一个协议
> 
> **\[objc\]**  [view plain][view plain 1]  [copy][view plain 1]
> 
>   [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]
> 
> 1.  \#import <Foundation/Foundation.h>  
> 2.  \#import <JavaScriptCore/JavaScriptCore.h>  
> 3.    
> 4.  //首先创建一个实现了JSExport协议的协议  
> 5.  **@protocol** TestJSObjectProtocol <JSExport>  
> 6.    
> 7.  //此处我们测试几种参数的情况  
> 8.  \-(**void**)TestNOParameter;  
> 9.  \-(**void**)TestOneParameter:(**NSString** \*)message;  
> 10. \-(**void**)TestTowParameter:(**NSString** \*)message1 SecondParameter:(**NSString** \*)message2;  
> 11.   
> 12. **@end**  
> 13.   
> 14. //让我们创建的类实现上边的协议  
> 15. **@interface** TestJSObject : NSObject<TestJSObjectProtocol>  
> 16.   
> 17. **@end**  
> 
>   
> 类的实现
> 
> **\[objc\]**  [view plain][view plain 1]  [copy][view plain 1]
> 
>   [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]
> 
> 1.  \#import "TestJSObject.h"  
> 2.    
> 3.  **@implementation** TestJSObject  
> 4.    
> 5.  //一下方法都是只是打了个log 等会看log 以及参数能对上就说明js调用了此处的iOS 原生方法  
> 6.  \-(**void**)TestNOParameter  
> 7.  \{  
> 8.      NSLog(@"this is ios TestNOParameter");  
> 9.  \}  
> 10. \-(**void**)TestOneParameter:(**NSString** \*)message  
> 11. \{  
> 12.     NSLog(@"this is ios TestOneParameter=%@",message);  
> 13. \}  
> 14. \-(**void**)TestTowParameter:(**NSString** \*)message1 SecondParameter:(**NSString** \*)message2  
> 15. \{  
> 16.    NSLog(@"this is ios TestTowParameter=%@  Second=%@",message1,message2);  
> 17. \}  
> 18. **@end**  
> 
>   
>   
> 
> 
>   
> 
> 
> 下面我们在weibview加载完成之后调用测试一下
> 
>   
> 
> 
> 代码如下：
> 
> **\[objc\]**  [view plain][view plain 1]  [copy][view plain 1]
> 
>   [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]
> 
> 1.  \-(**void**)webViewDidFinishLoad:(**UIWebView** \*)webView  
> 2.  \{  
> 3.      //网页加载完成调用此方法  
> 4.        
> 5.      //首先创建JSContext 对象（此处通过当前webView的键获取到jscontext）  
> 6.      **JSContext** \*context=\[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"\];  
> 7.        
> 8.      //第二种情况，js是通过对象调用的，我们假设js里面有一个对象 testobject 在调用方法  
> 9.      //首先创建我们新建类的对象，将他赋值给js的对象  
> 10.       
> 11.     **TestJSObject** \*testJO=\[TestJSObject new\];  
> 12.     context\[@"testobject"\]=testJO;  
> 13.       
> 14.     //同样我们也用刚才的方式模拟一下js调用方法  
> 15.     **NSString** \*jsStr1=@"testobject.TestNOParameter()";  
> 16.     \[context evaluateScript:jsStr1\];  
> 17.     **NSString** \*jsStr2=@"testobject.TestOneParameter('参数1')";  
> 18.     \[context evaluateScript:jsStr2\];  
> 19.     **NSString** \*jsStr3=@"testobject.TestTowParameterSecondParameter('参数A','参数B')";  
> 20.     \[context evaluateScript:jsStr3\];  
> 21.       
> 22. \}  
> 
>   
>   
> 
> 
> 结果如下图
> 
> > ![Center 5][]
> > 
> >   
> > 
> 
> 好了 我们看到了结果 三个方法都调用了 
> 
> ok两种方式都完成了
> 
>   
> 
> 
>   
>

[Center]: /images/20220731/7e359e9589e841638bd37b1621c56a4b.png
[Center 1]: /images/20220731/d98997e4c1c0469c807d90484fe1958b.png
[view plain]: http://blog.csdn.net/lwjok2007/article/details/47058101#
[Center 2]: /images/20220731/9faf41625bcb40dea63b3f55ce6458c4.png
[Center 3]: /images/20220731/961c1dad25fc46bd9d77730bba34e3e3.png
[view plain 1]: http://blog.csdn.net/lwjok2007/article/details/47058795#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/1610385
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/1610385/fork
[Center 4]: /images/20220731/9f666a1983074aa68eda0c4e39c432db.png
[Center 5]: /images/20220731/a21159b012bd4f4a8fefc92e061dd2a6.png