美文网首页
WKWebView与js交互

WKWebView与js交互

作者: piggybear | 来源:发表于2020-01-12 19:25 被阅读0次

    js调用oc方法

    第一种

    html代码

    <!DOCTYPE html>
    <html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport">
    
    <body style="background-color: white;">
        <script type="text/javascript">
            function buttonClick1() {
                //window.webkit.messageHandlers.<方法名>.postMessage(<数据>)
                window.webkit.messageHandlers.jsCallNative1.postMessage(null);
            }
            function buttonClick2() {
                window.webkit.messageHandlers.jsCallNative2.postMessage(['参数1', '参数2']);
            }
            function buttonClick3() {
                window.webkit.messageHandlers.jsCallNative3.postMessage(['参数1', '参数2'])
                var result = window.prompt("buttonClick3");
                document.getElementById('result').innerText = "result: " + result;
            }
        </script>
        <button type="button1" onclick="buttonClick1()" style="width:100%; height:50px;" />调用OC代码 无参数 无返回值</button>
        <div style="width:100%; height:30px;"></div>
        <button type="button2" onclick="buttonClick2()" style="width:100%; height:50px;" />调用OC代码 有参数
        无返回值</button>
        <div style="width:100%; height:30px;"></div>
        <button type="button3" onclick="buttonClick3()" style="width:100%; height:50px;" />调用OC代码 有参数 有返回值</button>
        <br />
        <p id="result">返回值:</p>
    </body>
    
    </html>
    

    ios代码

    #import "ViewController.h"
    #import <WebKit/WebKit.h>
    
    @interface ViewController ()<WKScriptMessageHandler, WKUIDelegate, WKNavigationDelegate>
    @property(nonatomic, weak) WKWebView *webView;
    @end
    
    @implementation ViewController
    
    - (void)dealloc{
        [self.webView.configuration.userContentController removeAllUserScripts];
    }
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        
        // WKWebView的配置
        WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
        //是否支持JavaScript
        configuration.preferences.javaScriptEnabled = true;
        //不通过用户交互,是否可以打开窗口
        configuration.preferences.javaScriptCanOpenWindowsAutomatically = NO;
        
        WKUserContentController *userContentController = [[WKUserContentController alloc] init];
        [userContentController addScriptMessageHandler:self name:@"jsCallNative1"];
        [userContentController addScriptMessageHandler:self name:@"jsCallNative2"];
        [userContentController addScriptMessageHandler:self name:@"jsCallNative3"];
        configuration.userContentController = userContentController;
        
        WKWebView *webView = [[WKWebView alloc]initWithFrame: self.view.bounds configuration: configuration];
        [self.view addSubview:webView];
        self.webView = webView;
        webView.UIDelegate = self;
        webView.navigationDelegate = self;
        NSString *path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
        NSURL* url = [NSURL fileURLWithPath:path];
        NSURLRequest* request = [NSURLRequest requestWithURL:url];
        [webView loadRequest:request];
    }
    
    #pragma mark - WKScriptMessageHandler
    - (void)userContentController:(nonnull WKUserContentController *)userContentController didReceiveScriptMessage:(nonnull WKScriptMessage *)message {
        if ([message.name isEqualToString:@"jsCallNative1"]) {
            NSLog(@"调用成功");
        }
        if ([message.name isEqualToString:@"jsCallNative2"]) {
            NSArray *parameters = message.body;
            NSLog(@"参数 %@",parameters);
        }
        if ([message.name isEqualToString:@"jsCallNative3"]) {
            NSArray *parameters = message.body;
            NSLog(@"参数 %@",parameters);
        }
    }
    
    #pragma mark - WKUIDelegate delegate method
    - (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * _Nullable result))completionHandler {
        if ([prompt isEqualToString: @"buttonClick3"]) {
            completionHandler(@"将内容回调给js");
        }
    }
    @end
    

    oc调用js方法

    html代码

    <!DOCTYPE html>
    <html>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport">
    
    <body style="background-color: white;">
        <script type="text/javascript">
            function ocCallJs(result) {
                document.getElementById('result').innerText = "result: " + result;
            }
        </script>
        <br />
        <p id="result">返回值:</p>
    </body>
    
    </html>
    

    oc代码

    #import "ViewController.h"
    #import <WebKit/WebKit.h>
    
    @implementation ViewController
    
    - (void)viewDidLoad {
        [super viewDidLoad];
        
        // WKWebView的配置
        WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
        //是否支持JavaScript
        configuration.preferences.javaScriptEnabled = true;
        //不通过用户交互,是否可以打开窗口
        configuration.preferences.javaScriptCanOpenWindowsAutomatically = NO;
        WKWebView *webView = [[WKWebView alloc]initWithFrame: self.view.bounds configuration: configuration];
        [self.view addSubview:webView];
        webView.navigationDelegate = self;
        NSString *path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];
        NSURL* url = [NSURL fileURLWithPath:path];
        NSURLRequest* request = [NSURLRequest requestWithURL:url];
        [webView loadRequest:request];
    }
    
    #pragma mark - WKNavigationDelegate
    - (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigation *)navigation {
        [webView evaluateJavaScript:@"ocCallJs('Hello World')" completionHandler:^(id response, NSError * _Nullable error) {
            NSLog(@"response = %@", response);
        }];
    }
    @end
    

    相关文章

      网友评论

          本文标题:WKWebView与js交互

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