javascript bridge in WKWebView doesn't work

Question

I try to get javascript message from my Web View with WKWebView. But nothing appear inside IOS console...

I implement this code:

- (void) webView:(WKWebView *)webView didFailLoadWithError:(NSError *)error {
    self.webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 20, self.view.frame.size.width, self.view.frame.size.height-20)];
    self.webView.backgroundColor = [UIColor whiteColor];

    self.webView.autoresizingMask = (UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight);

    self.webView.scrollView.delegate = self;
    [self.view addSubview:self.webView];

    // Setup WKUserContentController instance for injecting user script

    WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc]
         init];

    WKUserContentController* userController = [[WKUserContentController alloc]init];

    [userController addScriptMessageHandler: self name:@"notification"];
    configuration.userContentController = userController;

    [self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://example.com/test.php"]]];
}

- (void)userContentController:(WKUserContentController*)userContentController
      didReceiveScriptMessage:(WKScriptMessage*)message {
    NSLog(@"%@", message.body);
}

And HTML/JS :

<div id="test" onclick="test();">test</div>

<script type="text/javascript" src="jquery.js"></script>
<script>
function test (){
  alert('click');
  $('#test').text('hello');
  window.webkit.messageHandlers.notification.postMessage("click");
}
</script>

I don't get any log from my page when I click on the div (the alert doesn't work too but the test -> hello works)

Thanks for support

Answer 1

First issue - you placed your WKWebView setup code into webView:didFailLoadWithError: method for some reason. So, you are supposed to create WKWebView only after receiving error. Looks very strange. I've moved this code into viewDidLoad.

Second issue - you need to pass your WKWebViewConfiguration instance to -[WKWebView initWithFrame:configuration:]. In your code configuration is completely useless.

Third issue - your HTML code worked for me only after removing next line:

$('#test').text('hello');

I'm not an expert in HTML/JS. But I suppose that you're trying to use JQuery without referencing it in your HTML.

Resulting code looks like following:

- (void)viewDidLoad
{
    [super viewDidLoad];

    WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
    WKUserContentController* userController = [[WKUserContentController alloc] init];

    [userController addScriptMessageHandler:self name:@"notification"];
    configuration.userContentController = userController;

    self.webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:configuration];
    [self.view addSubview:self.webView];

    self.webView.backgroundColor = [UIColor whiteColor];
    self.webView.autoresizingMask = (UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight);
    [self.view addSubview:self.webView];

    NSString *string = @"<div id=\"test\" onclick=\"test();\">test</div>\n" \
    "<script type=\"text/javascript\" src=\"jquery.js\"></script>\n" \
    "<script>\n" \
    "function test (){\n" \
    "    alert('click');\n" \
    "    window.webkit.messageHandlers.notification.postMessage(\"click\");\n" \
    "}\n" \
    "</script>";

    [self.webView loadHTMLString:string baseURL:nil];
}

- (void)userContentController:(WKUserContentController*)userContentController didReceiveScriptMessage:(WKScriptMessage*)message
{
    NSLog(@"%@", message.body);
}