WKWebView expects DOM rendering before running native code

Question

I have a hybrid iOS application that contains WKWebView , and I have a JavaScript callNative function that can call native Objective-C code in the main thread.

In my JavaScript I have the following structure

 modifyDOM(); // eg .show(), and .hide() stuff callNative('animateWKWebViewFrame'); 

For some reason, animateWKWebViewFrame (native code) is called before modifyDOM completed and is fully displayed. (This causes a visual glitch.)

How can I force a full rendering of DOM changes before invoking my own code?

Answer 1

I assume you are using jQuery because of your comment saying modifyDOM calls show() and hide() . If so, then you should rely on the complete parameter to provide a function that, in turn, will call your own code.

The relevant documentation is here:
http://api.jquery.com/hide/#hide-duration-complete
http://api.jquery.com/show/#show-duration-complete

And finally, here is a sample code:

 function modifyDOM() { someElement.show(400, function() {callNative('animateWKWebViewFrame');}); } 

Answer 2

How to make another callback to detect modifyDOM () function?

 // alloc webview WKWebViewConfiguration *theConfiguration = [[WKWebViewConfiguration alloc] init]; [theConfiguration.userContentController addScriptMessageHandler:self name:@"interOp"]; self.webView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, 0, 0) configuration:theConfiguration]; 

After the modifyDOM () function completes, you call the "interOp" call, and then you can initiate the callback () with any desire and call animateWKWebViewFrame

 - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message { NSDictionary *sentData = (NSDictionary*)message.body; NSString* command = sentData[@"command"]; LOG(@"[userContentController] command(%@)", command); if ( [command isEqualToString:@"DOMReady"] ) { // defining a JavaScript function NSString *jsFunctionText = @"Initiate({" "command:animateWKWebViewFrame" "});"; [self.webView evaluateJavaScript:jsFunctionText completionHandler:^(id object, NSError * err) { if ( err ) { LOG(@"[evaluateJavaScript] error(%@)", err); } }]; }