iOS原生代码通过webView与js脚本交互

  前段时间公司的一个项目需要使用的到OC代码与js脚本的交互。对于入行不久的我，当时也是在博客里面爬文来解决。做下来之后把我自己通过实践和学习得来的东西整理一下，以便在这方面接触不多的人能够快速的掌握OC与js的交互。新手教程，大神勿喷，如有错误，多多指教。  

 好了前言已足，直接来干货。

  开始。首先我们需要用到JavaScriptCore.framework库，所以我们需要在工程里面链接JavaScriptCore.framework库，这个我就不再赘述。

  一、js脚本调OC的方法，可以将js代码的值传入OC，或者OC响应js代码的交互事件等等。

         1.首先我们需要创建一份OC与js交互的协议。

      #import <JavaScriptCore/JavaScriptCore.h>//首先导入头文件

      /**

       *  创建一个遵守了JSExport协议的协议

       */

      @protocolTestJSObjectProtocol<JSExport>

      /**

       * 通过js代码调用本方法，并且传入页面标题值，来修改当前页面的title

       *

       *  @param pageTitle  js需要传入的页面标题

       */

      -(void)setPageTitle:(NSString*)pageTitle;

      @end

         2.通过以上代码，我们拟定了一份交互协议，并且申明了一个方法，方法作用为通过js脚本来修改我们的页面标题。然后我们需要创建一个类来准守这份协议，并且实现它的方法。

      @interfaceWebViewBridgeTool :NSObject<TestJSObjectProtocol>

      @end

      @implementation WebViewBridgeTool

      //实现我们拟定的协议的方法

       #pragma mark - <TestJSObjectProtocol>

      /**

       * 我们在这里实现协议里面的方法

       *

       *  @param pageTitle pageTitle是js脚本调用这个方法的时候传入的值，我们拿到这个值之后，就可以想做什么就做什么了

       */   

      -(void)setPageTitle:(NSString *)pageTitle{

          NSLog(@"我们想要设置的页面标题为:%@",pageTitle);

      }

      @end

        3.到这一步，我们需要的东西已经具备了，剩下的就是如何在js代码里面去调用setPageTitle这个方法了。接下来我们创建一个ViewController添加一个WebView来实现。

      #import "WebViewBridgeTool.h"//导入头文件

       @interfacePublicWebViewController :UIViewController

      @property(nonatomic,strong)WebViewBridgeTool * app;// 我们需要将这个对象传入我们的js代码中

      @property(nonatomic,strong)UIWebView * webView;//

       @end

       @implementationPublicWebViewController

      -(void)viewDidLoad{

           [superviewDidLoad];

         //初始化需要写入js代码的对象

           _app=[[WebViewBridgeToolalloc]init];

                   //假设我们已经初始化好了webview，并且将webview的delegate设置为self

          [self.viewaddSubview:self.webView];

      }

      #pragma mark - <UIWebViewDelegate,UIScrollViewDelegate>

      /**

       * 这个方式是webview的代理方式，根据名字我们知道这个方法在webview开始加载界面的时候调用，我们在网页开始加载的时候将我们的              * 交互对象通过JSContext写入到我们的js脚本里面去

       *

       *  @param webView

       */

      -(void)webViewDidStartLoad:(UIWebView*)webView{

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

          context[@"app"]=self.app;

      }

//我在网页加载完成的时候又写入了一次

-(void)webViewDidFinishLoad:(UIWebView*)webView{

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

    context[@"app"]=self.app;

}

       4.通过以上操作，我们在webview加载网页的时候，把app这个对象写入了js脚本中，我们的webview里面加载的网页上的js脚本里面就会有我们的app对象。在js脚本里面就可以通过app这个对象来调用我们oc的方法了。

         app.setPageTitle("新标题");//js里面的代码

       值得注意的是：我们协议里面的方法如果有多个参数，除了第一个参数，后面的参数不能有参数名字,需要省略参数名字，只有一个':'，否则，js无法调用。因为参数的名字也是方法名字的一部分。

      -(void)showImageWithImageKeys:(NSString *)keyArrayJson :(NSInteger)index;//显示一组图片

      -(void)showImageWithImageKeys:(NSString *)keyArrayJson index:(NSInteger)index;//不能这样写，第二个参数不应该有名字

二、OC调用js的方法，这个就相对简单。例如js里面有一个commit方法，我们可以通过名字来匹配到这个方法。

      [self.webViewstringByEvaluatingJavaScriptFromString:[NSStringstringWithFormat:@"commit()"]];

          如果需要传入参数，例如js里面有一个求和函数sum(a,b),我们只需要通过字符串拼接的方式将参数传入即可。
      [self.webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"sum(%d,%d)",10,5]];
     以上就是简单的OC与js交互的代码，虽然有成熟框架如WebViewJavascriptBridge，但是如果你只需要最简单的交互，这种方式，也许会来的更快。