Skip to content

Instantly share code, notes, and snippets.

@maxcampolo
Created July 28, 2016 13:58
Show Gist options
  • Save maxcampolo/bdcaa7cf3bd3425727d986cc5538acda to your computer and use it in GitHub Desktop.
Save maxcampolo/bdcaa7cf3bd3425727d986cc5538acda to your computer and use it in GitHub Desktop.
WKWebView setup to make a web page adopt native behavior.
import WebKit
class NativeWebViewController: UIViewController {
let viewportScriptString = "var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); meta.setAttribute('initial-scale', '1.0'); meta.setAttribute('maximum-scale', '1.0'); meta.setAttribute('minimum-scale', '1.0'); meta.setAttribute('user-scalable', 'no'); document.getElementsByTagName('head')[0].appendChild(meta);"
let disableSelectionScriptString = "document.documentElement.style.webkitUserSelect='none';"
let disableCalloutScriptString = "document.documentElement.style.webkitTouchCallout='none';"
override func viewDidLoad() {
// 1 - Make user scripts for injection
let viewportScript = WKUserScript(source: viewportScriptString, injectionTime: .AtDocumentEnd, forMainFrameOnly: true)
let disableSelectionScript = WKUserScript(source: disableSelectionScriptString, injectionTime: .AtDocumentEnd, forMainFrameOnly: true)
let disableCalloutScript = WKUserScript(source: disableCalloutScriptString, injectionTime: .AtDocumentEnd, forMainFrameOnly: true)
// 2 - Initialize a user content controller
// From docs: "provides a way for JavaScript to post messages and inject user scripts to a web view."
let controller = WKUserContentController()
// 3 - Add scripts
controller.addUserScript(viewportScript)
controller.addUserScript(disableSelectionScript)
controller.addUserScript(disableCalloutScript)
// 4 - Initialize a configuration and set controller
let config = WKWebViewConfiguration()
config.userContentController = controller
// 5 - Initialize webview with configuration
let nativeWebView = WKWebView(frame: CGRect.zero, configuration: config)
// 6 - Webview options
nativeWebView.scrollView.scrollEnabled = true // Make sure our view is interactable
nativeWebView.scrollView.bounces = false // Things like this should be handled in web code
nativeWebView.allowsBackForwardNavigationGestures = false // Disable swiping to navigate
nativeWebView.contentMode = .ScaleToFill // Scale the page to fill the web view
// 7 - Set the scroll view delegate
nativeWebView.scrollView.delegate = NativeWebViewScrollViewDelegate.shared
}
}
class NativeWebViewScrollViewDelegate: NSObject, UIScrollViewDelegate {
// MARK: - Shared delegate
static var shared = NativeWebViewScrollViewDelegate()
// MARK: - UIScrollViewDelegate
func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView? {
return nil
}
}
@kamalk2
Copy link

kamalk2 commented Dec 21, 2016

Hi Max,
Great article !! Worked like a charm. But there is just one concern which I have mentioned below.

ISSUE: If there are any text fields in the webView at the bottom of the page, the webView doesn't scroll up and make the text field visible as soon as it is focused. Instead the text field scrolls up and becomes visible only when we start typing something there.
Any help is highly appreciated.

Thank you.

@toka756
Copy link

toka756 commented Mar 3, 2017

Disable zooming will cause the text field scroll up being disabled ~

@SuguKumar91
Copy link

SuguKumar91 commented Mar 31, 2017

Hi Max,
Your nativewebviewswift really helpful to me. thanks dude.

@BhavinBhadani
Copy link

BhavinBhadani commented May 26, 2018

I got the problem with this script. It’s not fitted properly in my webview

https://www.dropbox.com/s/hhapjy40neyg0kz/script.html?dl=0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment