iOS解析---WebView和js交互原理

       目前在网上看到很多介绍IOS里面WebView和JavaScript交互的文章。如果你想用网页去写一个app，那么我推荐 你去用PhoneGap (它是一个用基于HTML，CSS和JavaScript的，创建移动跨平台移动应用程序的快速开发平台)。如果你网页只是你app的一部分那么还是要去了解一下它们之间交互的原理。

       目前github上已经有相对成熟的开源项目，例如 WebViewJavascriptBridge ，你可以直接利用现成的框架快速实现js交互。介绍bridge的文章挺多，这里分析一个介绍的比较全面的博客：My_Lord 。有兴趣的同学可以去转转~

       现在，我来为大家分析一下其中的原理。其实很简单，在IOS中，WebView和JavaScript直接的调用就是一个实例方法、一个回调代理：

       首先来看WebView调用js的方法：

    //调用特定的js方法
    [_myWebView stringByEvaluatingJavaScriptFromString:@"myFunction('Hello，js！');"];

      其中myFunction()为你的html页面里边早已写好的js函数。至于穿不穿参数，看你的选择。

      接下来是js调用WebView的方法，原理就是利用WebView的代理方法：

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

}

      这个代理将会在js调用document.location的时候相应。接下来我们要定义好它们之间的暗号。

        function sendCommand(cmd,param){
            var url="testapp:"+cmd+":"+param;
            document.location = url;
        }

      我们定义以testapp：开头的url为我们的暗号。接下来是在代理里边识别该暗号：

#pragma mark - UIWebViewDelegate

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
    static int count = 1;
    
    NSString *requestString = [[request.URL absoluteString]stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];;
    
    NSArray *components = [requestString componentsSeparatedByString:@":"];
    
    if ([components count] > 1 && [(NSString *)[components objectAtIndex:0] isEqualToString:@"testapp"]) {
        
        //解析约定的指令
        if([(NSString *)[components objectAtIndex:1] isEqualToString:@"alert"])
        {
            UIAlertView *alert = [[UIAlertView alloc]
                                  initWithTitle:[NSString stringWithFormat:@"消息%d",count++] message:[components objectAtIndex:2]
                                  delegate:self cancelButtonTitle:nil
                                  otherButtonTitles:@"OK", nil];
            [alert show];
        }
        return NO;
    }
    return YES;
}

        大功告成！是不是很简单~   只要我们定义好了传递的暗号，我们就可以让双方相互“通信”了！

       下面列出我写的两个demo：第一个是修改的WebViewJavascriptBridge的代码，地址。第二个demo是我根据交互原理自己实现的代码，地址。希望这两个demo能够帮到你。