OC与js交互一（UIWebView与js交互）

效果

UIWebView与js交互.gif

html内容

        
            
            
            
            
        
        
            


            

                html文本信息
            
            



            

                js调用OC并传递内容
            
            


            

                js调用OC
            
        
    

OC主要代码

    #import "LFUIWebViewController.h"
    #import 

    @interface LFUIWebViewController ()
    @property (strong, nonatomic) UIWebView *webView;
    @end

    @implementation LFUIWebViewController

    - (void)viewDidLoad {
        [super viewDidLoad];
        [self configWebView];
        
        UIButton *rightBtn1 = [UIButton buttonWithType:UIButtonTypeCustom];
        [rightBtn1 setTitle:@"传参给js展示" forState:UIControlStateNormal];
        [rightBtn1 setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
        rightBtn1.frame = CGRectMake(0, 0, 80, 30);
        [rightBtn1 addTarget:self action:@selector(clickBtn) forControlEvents:UIControlEventTouchUpInside];
        
        UIButton *rightBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        [rightBtn setTitle:@"获取js内容" forState:UIControlStateNormal];
        [rightBtn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
        rightBtn.frame = CGRectMake(0, 0, 80, 30);
        [rightBtn addTarget:self action:@selector(clickRightBtn) forControlEvents:UIControlEventTouchUpInside];
        
        self.navigationItem.rightBarButtonItems = @[[[UIBarButtonItem alloc] initWithCustomView:rightBtn],[[UIBarButtonItem alloc] initWithCustomView:rightBtn1]];
    }
    - (void )clickRightBtn{
        // 还可以直接调用js定义的方法
        // 比如getShareUrl()为js端定义好的方法，返回值为分享的内容
        // 我们就可以通过调用这个方法在returnStr中拿到js返回的分享内容
        NSString *returnStr = [self.webView stringByEvaluatingJavaScriptFromString:@"getShareUrl()"];
        NSLog(@"%@",returnStr);
        UIAlertView *alert = [[UIAlertView alloc]initWithTitle:@"" message:returnStr delegate:nil cancelButtonTitle:@"取消" otherButtonTitles:nil, nil];
        [alert show];
    }
    - (void )clickBtn{
        [self.webView stringByEvaluatingJavaScriptFromString:@"alertMessage('+OC传递的内容')"];
    }

    - (void )configWebView{
        self.webView = [[UIWebView alloc] initWithFrame:self.view.frame];
        self.webView.delegate = self;
        NSString *filePath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
        NSURL *baseURL = [[NSBundle mainBundle] bundleURL];
        [self.webView loadHTMLString:[NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil] baseURL:baseURL];
        // 如果不想要webView 的回弹效果
        self.webView.scrollView.bounces = NO;
        // UIWebView 滚动的比较慢，这里设置为正常速度
        self.webView.scrollView.decelerationRate = UIScrollViewDecelerationRateNormal;
        [self.view addSubview:self.webView];
    }

    - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
    {
        
        return YES;
    }
    - (void)webViewDidFinishLoad:(UIWebView *)webView
    {
        //获取页面title：
        NSString *title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
        NSLog(@"webViewTitle --- %@",title);
        
        
        //获取js上下文
        JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
        //js中调用 testMethod 方法 通过block调用OC的方法
        context[@"testMethod"] = ^() {
            dispatch_async(dispatch_get_main_queue(), ^{
                UIAlertView *alert = [[UIAlertView alloc]initWithTitle:@"" message:@"js调用OC方法" delegate:nil cancelButtonTitle:@"取消" otherButtonTitles:nil, nil];
                [alert show];
            });
        };
        
        
        context[@"getMessage"] = ^() {
            NSArray *arguments = [JSContext currentArguments];
            NSString *content = @"";
            for (JSValue *jsValue in arguments) {
                NSLog(@"=======%@",jsValue);
                content = [NSString stringWithFormat:@"%@%@",content,jsValue];
            }
            dispatch_async(dispatch_get_main_queue(), ^{
                UIAlertView *alert = [[UIAlertView alloc]initWithTitle:@"js传递出来的内容" message:content delegate:nil cancelButtonTitle:@"取消" otherButtonTitles:nil, nil];
                [alert show];
            });
        };
        
    }



    @end

简单说明下每个地方的意思

1.1.OC调用js

OC与js交互，需要和web端协商好交互的方法。

image.png

image.png

譬如上面这段代码，OC调用js，从html中获取分享的内容，在html中声明一个方法,将分享的内容，直接以字符串的形式return出来。

function getShareUrl() {
            return "js中传递出来的分享内容";
        }

OC通过 stringByEvaluatingJavaScriptFromString 这个方法我们可以在iOS中与UIWebView中的网页元素交互，需要注意的是这个方法需要放在UIWebView中的页面加载完成之后去调用

// 还可以直接调用js定义的方法
// 比如getShareUrl()为js端定义好的方法，返回值为分享的内容
// 我们就可以通过调用这个方法在returnStr中拿到js返回的分享内容
NSString *returnStr = [self.webView stringByEvaluatingJavaScriptFromString:@"getShareUrl()"];
NSLog(@"%@",returnStr);

有些时候，我们需要通过OC调用js的方法，并传递参数给html进行处理。譬如下面这个用例，OC调用js的弹框，并传递需要展示的内容，我们在html中定一个方法，供OC调用

function alertMessage(msg) {
            alert('OC调用JS ' + msg )
        }

OC可以通过

[self.webView stringByEvaluatingJavaScriptFromString:@"alertMessage('+OC传递的内容')"];

直接将内容传递给html展示。

有时候我们单纯的想获取html中的一些标签内容，也可以通过stringByEvaluatingJavaScriptFromString 这个方法去获取

//获取页面title：
NSString *title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
NSLog(@"webViewTitle --- %@",title);

还可以获取其他的一些内容

    document：属性
    document.title                 //设置文档标题等价于HTML的