美文网首页
OC与Webview交互

OC与Webview交互

作者: 疾风追马 | 来源:发表于2017-11-15 16:01 被阅读330次

在开发iOS应用中,经常会需要用到原生与web之间JS的交互,主要有下列3中情况:

1.与UIWebview交互
2.与WKWebview交互
3.利用JavaScriptCore来完成交互

一、在UIWebview中的交互

我们想在oc中修改网页中的代码,这种技术称为JS注入,可以利用webview中的代理方法

// 网页加载完成后会调用
- (void)webViewDidFinishLoad:(UIWebView *)webView {
    
    NSMutableString *string = [NSMutableString string];
    // 移除头部导航
    [string appendString:@"var header = document.getElementsByTagName('header')[0];header.parentElement.removeChild(header);"];
    // 移除底部导航
    [string appendString:@"var footer = document.getElementsByClassName('footer')[0];footer.parentNode.removeChild(footer);"];
    // 移除底部按钮
    [string appendString:@"var footBtn = document.getElementsByClassName('footer-btn-fix')[0];footBtn.parentNode.removeChild(footBtn);"];
    // 轮播图增加点击事件
    [string appendString:@"var image = document.getElementsByClassName('swipe-wrap')[0];image.onclick = function () {window.location.href='tz:newTab'}"];
    // 执行js代码
    [webView stringByEvaluatingJavaScriptFromString:string];
}

如果想在网页中调用原生的方法,也可以在webview中的代理方法中实现

// 网页将要加载的时候调用
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    
    // 请求的地址
    NSString *url = request.URL.absoluteString;
    NSLog(@"url--->%@",url);
    // 判断url是否是我们在webViewDidFinishLoad中给轮播图增加的自定义方法
    // 如果是,在判断中增加自己的跳转操作
    if ([url isEqualToString:@"tz:newTab"]) {
        NSLog(@"跳转到新tab页面");
        NewTabVC *newTabvc = [[NewTabVC alloc] init];
        [self.navigationController pushViewController:newTabvc animated:YES];
    }
    return YES;
}

二、在WKWebview中的交互

WKWebview是iOS8以后用来替代UIWebview的组件,在内存占用方面有很大的优化,使用时需要导入
#import <WebKit/WebKit.h>
WKWebview的JS注入与UIWebview类似,需要用到navigationDelegate中的方法

// 网页已经加载完的时候调用
- (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigation *)navigation
{
    NSMutableString *string = [NSMutableString string];
    // 移除头部导航
    [string appendString:@"var header = document.getElementsByTagName('header')[0];header.parentElement.removeChild(header);"];
    // 移除底部导航
    [string appendString:@"var footer = document.getElementsByClassName('footer')[0];footer.parentNode.removeChild(footer);"];
    // 移除底部按钮
    [string appendString:@"var footBtn = document.getElementsByClassName('footer-btn-fix')[0];footBtn.parentNode.removeChild(footBtn);"];
    // 轮播图增加点击事件
    [string appendString:@"var image = document.getElementsByClassName('swipe-wrap')[0];image.onclick = function () {window.location.href='tz:newTab'}"];
    // 执行JS代码
    [webView evaluateJavaScript:string completionHandler:nil];
}

网页中调用原生的方法也与UIWebview类似

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    
    NSString *url = navigationAction.request.URL.absoluteString;
    if ([url isEqualToString:@"tz:newTab"]) {
        NSLog(@"跳转到新tab页面");
        NewTabVC *newTabvc = [[NewTabVC alloc] init];
        [self.navigationController pushViewController:newTabvc animated:YES];
    }
    
    // 回调必须调用,不可省略
    decisionHandler(WKNavigationActionPolicyAllow);
}

三、利用JavaScriptCore完成交互

JavaScriptCore是苹果在iOS7后推出的,使用时需要导入框架

链接JavaScriptCore框架
在文件头部也需要导入
#import <JavaScriptCore/JavaScriptCore.h>

JS注入

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    
    NSMutableString *string = [NSMutableString string];
    // 移除头部导航
    [string appendString:@"var header = document.getElementsByTagName('header')[0];header.parentElement.removeChild(header);"];
    // 移除底部导航
    [string appendString:@"var footer = document.getElementsByClassName('footer')[0];footer.parentNode.removeChild(footer);"];
    // 移除底部按钮
    [string appendString:@"var footBtn = document.getElementsByClassName('footer-btn-fix')[0];footBtn.parentNode.removeChild(footBtn);"];
    // 轮播图增加点击事件
    [string appendString:@"var image = document.getElementsByClassName('swipe-wrap')[0];image.onclick = function () {pushNewTab()}"];
    // 执行js代码
    JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    [context evaluateScript:string];
}

JS调用原生代码

    // 执行js代码
    JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    context[@"pushNewTab"] = ^() {
        
        dispatch_async(dispatch_get_main_queue(), ^{
            NSLog(@"%@",[NSThread currentThread]);
            NewTabVC *newTabvc = [[NewTabVC alloc] init];
            [self.navigationController pushViewController:newTabvc animated:YES];
        });
    };

github传送门:https://github.com/slkk/OCWebview

相关文章

  • WKWebView和WebView与JS的交互方式

    WKWebView和WebView与JS的交互方式 UIWebView与JS的交互方式 一、 OC调用JS 直接调...

  • webView与OC交互

    首先UIWebView会加载html页面,和javaScript到WebView容器的上下文中。 OC调用JS代码...

  • OC与Webview交互

    在开发iOS应用中,经常会需要用到原生与web之间JS的交互,主要有下列3中情况: 1.与UIWebview交互2...

  • 可能碰到的iOS笔试面试题(17)--WebView与JS交互

    WebView与JS交互 iOS中调用HTML 在HTML中调用OC JavaScriptCore 使用 Java...

  • 2018-02-07

    OC与H5交互 交互的四种方式 有很多的app直接使用在webview的代理中通过拦截的方式与native进行交互...

  • OC WebView 与JavaScript 交互

    Native 开发 和 H5 谁优谁劣,不在这边展开讨论。目前的开发过程中经常会遇到 原生应用 和web 交互的 ...

  • iOS web交互

    iOS极简模式实现Webview网页图片原生预览 IOS中 使用JavaScriptCore 实现OC与JS的交互...

  • Native(原生)和H5交互收录

    1. WebView与JS的几种交互 2. iOS下JS与OC互相调用(二)--WKWebView 拦截URL 3...

  • JS 和 OC 的交互的两种方案

    一、webView 的两个方法实现 OC 与 JS 的交互 在 iOS7之前主要使用这种方案 1、OC 调用 JS...

  • OC与JS交互

    OC与JS交互前言 OC与JS交互之UIWebView OC与JS交互之WebViewJavascriptBrid...

网友评论

      本文标题:OC与Webview交互

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