How to disable user selection in a WKWebView in Swift?

Question

I have developed an app which shows a web page using WKWebView in Swift. I need to disable the user selection and the callout (because the web loads a graph) and I don't find any way to do this with WKWebView.

This is my code:

import UIKit
import WebKit

class ViewController: UIViewController, WKNavigationDelegate, WKUIDelegate {

    @IBOutlet weak var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

        let url = URL(string: "https://danfg95glucose.azurewebsites.net")
        let request = URLRequest(url: url!)
        webView.navigationDelegate = self
        webView.load(request)

    }
}

I want to do something similar with this but in Swift with WKWebView:

// Disable user selection
[webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.style.webkitUserSelect='none';"];
// Disable callout
[webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.style.webkitTouchCallout='none';"];

Is it possible?

This is a image showing the problem:

Thank you so much for your responses. And sorry for my level, I am new and I am learning programming.

Answer 1

What you're looking for is adding this css to your WKWebView programmatically.

First, on your view controller, add the WKWebView:

let webViewConfiguration = WKWebViewConfiguration()
let webView = WKWebView(frame: .zero, configuration: webViewConfiguration)
view.addSubview(webView)
webView.snp.updateConstraints { make in
    make.edges.equalTo(view)
}

webView.navigationDelegate = self
webView.load(URLRequest(url: URL(string: "https://www.google.com")!))

Then, implement the navigation delegate method

optional public func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!)

And inside it add this:

extension ExampleViewController: WKNavigationDelegate {
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        let javascriptStyle = "var css = '*{-webkit-touch-callout:none;-webkit-user-select:none}'; var head = document.head || document.getElementsByTagName('head')[0]; var style = document.createElement('style'); style.type = 'text/css'; style.appendChild(document.createTextNode(css)); head.appendChild(style);"
        webView.evaluateJavaScript(javascriptStyle, completionHandler: nil)
    }
}

With that, you'll add a style tag programmatically with the css that disables callouts.

Hope it helps!

Answer 2

The answer from Joel Marquez is correct, however I want to add that you can use the WKUserContentController instead of the delegate method:

    let selectionString = "var css = '*{-webkit-touch-callout:none;-webkit-user-select:none}';"
        + " var head = document.head || document.getElementsByTagName('head')[0];"
        + " var style = document.createElement('style'); style.type = 'text/css';" +
        " style.appendChild(document.createTextNode(css)); head.appendChild(style);"
    let selectionScript: WKUserScript = WKUserScript(source: selectionString, injectionTime: .atDocumentEnd, forMainFrameOnly: true)
    webView.configuration.userContentController.addUserScript(selectionScript)