美文网首页
WebView 与 JS交互

WebView 与 JS交互

作者: 学而不思则罔思而不学则殆 | 来源:发表于2016-07-30 20:51 被阅读28次

    一、简介

    iOS 在开发中用到了网页, 网页方法和OC 方法相互调用.

    二、目的以及注意事项(优缺点)

    目的(优点):

    iOS 加入 H5 可以实现嵌入别的功能入口, 可以使随时更改, 不用更新版本就可以上线,这是最大的优点.

    注意事项(缺点):

    iOS 加入 H5 响应比原生的要慢很多, 体验不是很好.

    步骤

    • 导入 JavaScriptCore 的头文件
    #import <JavaScriptCore/JavaScriptCore.h>
    @property (nonatomic, strong) JSContext *context;
    
    • 用 webView 加载 HTML 文件, 这里用的是本地 HTML
    - (void)viewDidLoad {
        [super viewDidLoad];
        // Do any additional setup after loading the view from its nib.
        NSString *path = [[[NSBundle mainBundle] bundlePath]  stringByAppendingPathComponent:@"JSCallOC.html"];
    NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL requestWithURL:网址]];
        [self.webView loadRequest:request];
    }
    
    • 在 JS 交互中, 很多事情都是在 webView 的 delegate 方法中完成的, 通过 JS Content 创建的一个使用 JS 的环境, 所以这里, 我们先将 self.content 在这里面初始化
    - (void)webViewDidFinishLoad:(UIWebView *)webView {
    
         //初始化content
         self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    
        // 打印异常,由于JS的异常信息是不会在OC中被直接打印的,所以我们在这里添加打印异常信息,
        self.context.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) {
            context.exception = exceptionValue;
            NSLog(@"%@", exceptionValue);
        };
    }
    

    通过block的形式关联 javaScript function 调用 JS 方法

    context[@"callback"] = ^ {
            dispatch_async(dispatch_get_main_queue(), ^{
                [self.navigationController pushViewController:homeBanner animated:YES];
            });
        };
    

    相关文章

      网友评论

          本文标题:WebView 与 JS交互

          本文链接:https://www.haomeiwen.com/subject/qtetsttx.html