iOS 原生webview与 JS 交互

1. 加载webview:

self.webView = [[UIWebView alloc]init];

    [self.view addSubview:self.webView];

    self.webView.frame = CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height);

    // 自动对页面进行缩放以适应屏幕    

self.webView.scalesPageToFit = YES;

    // 需要在代理方法中与js进行交互    

self.webView.delegate = self;

    // 取消webView的弹簧效果  

  [(UIScrollView *)[[self.webView subviews] objectAtIndex:0] setBounces:NO];

    NSString *urlStr = @"http://www.baidu.com/";

    NSURLRequest *request = [[NSURLRequest alloc]initWithURL:[NSURL URLWithString:urlStr]];

2. webview的代理方法

// 当点击页面进行加载数据的时候调用

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

// 当页面开始加载的时候调用

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

// 当页面加载完成的时候调用

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

// 页面加载失败的时候调用

- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error;


3.  交互

 方法一:  拦截url

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

    // 获取点击页面加载的url    NSString *url = request.URL.absoluteString;

    if ([url rangeOfString:@"此处写想拦截的url字符串"].location != NSNotFound) {

        // 通过获取当前点击页面加载的url与指定url进行比较,拦截页面请求,进行自己的逻辑处理        

// 进行移动端的逻辑处理       

 UIAlertView *alert = [[UIAlertView alloc]initWithTitle:@"" message:@"拦截页面方法" delegate:nil cancelButtonTitle:@"取消" otherButtonTitles:nil, nil];

        [alert show];

        return NO;

    }

    return YES;

}

方法二:注册OC与js方法

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

    // 获取当前网页的标题    NSString *titleStr = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];

    NSLog(@"%@",titleStr);

    // 还可以直接调用js定义的方法    // 比如getShareUrl()为js端定义好的方法,返回值为分享的url    // 我们就可以通过调用这个方法在returnStr中拿到js返回的分享地址    

NSString *returnStr = [webView stringByEvaluatingJavaScriptFromString:@"getShareUrl()"];

    NSLog(@"%@",returnStr);

    // 还可以为js端提供完整的原生方法供其调用(记得导入#import )   

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

    // 可以定义供js调用的方法, testMethod为js调用的方法名    

context[@"testMethod"] = ^() {

        dispatch_async(dispatch_get_main_queue(), ^{

            UIAlertView *alert = [[UIAlertView alloc]initWithTitle:@"" message:@"js调用方法" delegate:nil cancelButtonTitle:@"取消" otherButtonTitles:nil, nil];

            [alert show];

        });

    };


方法三:桥接机制

OC和JS交互的桥接机制,主要包含3个类,JS端window.WebViewJavascriptBridge,OC端WebViewJavascriptBridge和WebViewJavascriptBridgeBase。

桥接类支持JS调用OC方法,OC调用JS方法。JS调用OC通过重定向url并取handlerName来调用,OC调用JS通过stringByEvaluatingJavaScriptFromString调用。

// jsBridge

    [WebViewJavascriptBridge enableLogging];


    // 给哪个webview建立JS与OjbC的沟通桥梁

    WebViewJavascriptBridge  *webViewJSBridge = [WebViewJavascriptBridge bridgeForWebView:webViewS];

    [webViewJSBridge setWebViewDelegate:self];


    /* JS主动调用OjbC的方法 -

     * 这是JS会调用saveUserAccountAndPassword方法,这是OC注册给JS调用的

     * JS需要回调,当然JS也可以传参数过来。data就是JS所传的参数,不一定需要传

     * OC端通过responseCallback回调JS端,JS就可以得到所需要的数据

     */

    [webViewJSBridge  registerHandler:@"saveUserAccountAndPassword"handler:^(id data,WVJBResponseCallback  responseCallback) {


        NSLog(@"js call saveUserAccountAndPassword, data from js is %@", data);

       NSDictionary*userDict = (NSDictionary*)data;

        [[FSDataShareManger shareDataManger] saveUserModelWithCache:userDict];

    }];


 /* OC主动调用JS的方法 

     */

[webViewJSBridge  callHandler:@"getUserInfos"   data:@{@"name":@"标哥"}   responseCallback:^(idresponseData){

NSLog(@"from js: %@",responseData);

}];

注意:

/*这段代码是固定的,必须要放到js中*/

functionsetupWebViewJavascriptBridge(callback){

if(window.WebViewJavascriptBridge){returncallback(WebViewJavascriptBridge);}

if(window.WVJBCallbacks){returnwindow.WVJBCallbacks.push(callback);}

window.WVJBCallbacks=[callback];

varWVJBIframe=document.createElement('iframe');

WVJBIframe.style.display='none';

WVJBIframe.src='wvjbscheme://__BRIDGE_LOADED__';        

document.documentElement.appendChild(WVJBIframe);

setTimeout(function(){document.documentElement.removeChild(WVJBIframe)},0)

}


注意:  找问题时候用

iOS中WebViewJavascriptBridgeBase中的和  WVJBIframe.src='wvjbscheme://__BRIDGE_LOADED__';  对比一下

#define kOldProtocolScheme @"wvjbscheme"

#define kNewProtocolScheme @"https"

#define kQueueHasMessage  @"__wvjb_queue_message__"

#define kBridgeLoaded      @"__bridge_loaded__"

你可能感兴趣的:(iOS 原生webview与 JS 交互)