CODEWITHSUNDEEP
iosuiwebviewinterface-builderwkwebview
Matt.M
Matt.M

Reputation: 1148

Set WKWebViewConfiguration on WKWebView from Nib or Storyboard

With iOS 11 Apple has added the ability set add WKWebViews outlets on your nibs and storyboards. It seems to work fine when using the default WKWebViewConfiguration that get set automatically.

However, I'd like to be able to use a custom WKWebViewConfiguration. Is there anyway I can set this before, or after the WKWebView gets initialized from the nib?

Upvotes: 29

Views: 40257

Answers (6)

Angolao
Angolao

Reputation: 992

You can create WKWebView in Storyboard and then use WKUIDelegate:createWebViewWith for creating a new WKWebView with configuration alone.

class WindowViewController: UIViewController {
    
    // The WKWebView created from storyboard
    @IBOutlet var webView: WKWebView!
    
    override func viewDidLoad() {

        // Delegate the webview's uiDelegate
        self.webView.uiDelegate = self
    }
}

extension WindowViewController: WKUIDelegate {
    
    func webView(_ webView: WKWebView, createWebViewWith configuration: WKWebViewConfiguration, for navigationAction: WKNavigationAction, windowFeatures: WKWindowFeatures) -> WKWebView? {

        // Create new WKWebView with custom configuration here
        let configuration = WKWebViewConfiguration()
        
        return WKWebView(frame: webView.frame, configuration: configuration)
    }
}

Upvotes: 12

Shrdi
Shrdi

Reputation: 465

for Objective C:

WKWebViewConfiguration *config = _webView.configuration;
WKUserContentController* ctrl = [[WKUserContentController alloc] init];
[ctrl addScriptMessageHandler:self name:@"method1"];
[ctrl addScriptMessageHandler:self name:@"method2"];
// others ... 
config.userContentController = ctrl;

And add the implement for WKScriptMessageHandler:

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
NSLog(@"userContentController:didReceiveScriptMessage: message=%@", message);
if ([message.name isEqualToString:@"method1"] && message.body
//        &&[message.body isKindOfClass:[NSString class]]
    ) {
        // do something
    } else if ([message.name isEqualToString:@"method2"] && message.body
        ) {
        // do something
    }
}

Upvotes: 1

iOS_Mouse
iOS_Mouse

Reputation: 844

My answer won't solve the problem for everyone, but be sure to check the WKWebView's Attributes Inspector in the Storyboard to see if the changes you want to make to the configuration can be set there.

I just spent an hour trying to figure this out in code, when all I had to do was check 2 boxes in the Attributes Inspector.

Upvotes: 5

Ramprasad A
Ramprasad A

Reputation: 231

It is not possible to set the configuration of the WKWebView through the outlet of WKWebView form the storyboard because the configuration property of the WKWebView is read only, instead we need to programmatically configure as given below.

class ViewController: UIViewController, WKScriptMessageHandler {

    @IBOutlet weak var webContentView: UIView!
    var webView: WKWebView?

    let contentController = WKUserContentController()        
    contentController.add(self, name: "callbackHandler")

    let configuration = WKWebViewConfiguration()
    configuration.userContentController = contentController

    self.webView = WKWebView(frame: self.webContentView.bounds, configuration: configuration)
    self.webContentView.addSubview(self.webView!)
}

And implement the WKScriptMessageHandler delegate method

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
    if (message.name == "callbackHandler"){
        print("\(message.body)")
    }
}

Hope this helps...

Upvotes: 10

guru
guru

Reputation: 2817

Yes!!! We can set WKWebViewConfiguration on WKWebView from Nib or Storyboard I am using below code for that:

Here is my IBOutlet--

 @IBOutlet  var webViewChat: WKWebView!

//Using below code you can set configuration

 webViewChat.configuration.userContentController.add(self, name: "edit")
 webViewChat.configuration.userContentController.add(self, name: "remove")

Note : Make sure you load URL after setting up the configuration

Upvotes: 10

Ravi Kumar
Ravi Kumar

Reputation: 1366

Let's Example your customize configuration.

NSString *jScript = @"var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";

WKUserScript *wkUScript = [[WKUserScript alloc] initWithSource:jScript injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:YES];

//Here you can customize configuration
[self.webView.configuration.userContentController addUserScript:wkUScript];

// self.webView.navigationDelegate = self;
// self.webView.contentMode = UIViewContentModeScaleAspectFill;

Upvotes: 28

Related Questions