hi I'm implementing simple WKWebView appplication and I want to be able to ask user for input via prompt dialogue, I tried to use solution mentioned here
but I'm not sure how should it work when implemented - should this just add extension to WKWebView for triggering eg regular alert()
from javascript or I should pass some different instructions in js to trigger this native alert?
so my question is: 1) how this should work when implemented 2) what am I missing in implementation
here's my controller code (giving whole controller, as I dont know what could be important here)
thanks in advance!
import UIKit
import WebKit
class ViewController:
UIViewController
, WKNavigationDelegate
, UIScrollViewDelegate
, WKUIDelegate
{
@IBOutlet var webView: WKWebView!
let getUrlAtDocumentStartScript = "GetUrlAtDocumentStart"
let getUrlAtDocumentEndScript = "GetUrlAtDocumentEnd"
override func loadView() {
self.webView = WKWebView()
self.webView.navigationDelegate = self
//for prompt
self.webView?.uiDelegate = self
view = webView
}
override func viewWillAppear(_ animated: Bool) {//white status bar
super.viewWillAppear(animated)
webView.isOpaque = false //removes white flash on WKWebView load
webView.backgroundColor = UIColor(red: 41/255, green: 45/255, blue: 91/255, alpha: 1)
UIApplication.shared.statusBarStyle = .lightContent
do {
let paid = Bundle.main.infoDictionary?["paid"] as? Bool;
var fileName = "none"
if(paid!){
fileName = "index-ios-wvd-inlined--paid"
} else {
fileName = "index-ios-wvd-inlined"
}
guard let filePath = Bundle.main.path(forResource: fileName, ofType: "html")
else {
print ("File reading error")
return
}
let contents = try String(contentsOfFile: filePath, encoding: .utf8)
let baseUrl = URL(fileURLWithPath: filePath)
webView.loadHTMLString(contents as String, baseURL: baseUrl)
}
catch {
print ("File HTML error")
}
}
override var preferredStatusBarStyle : UIStatusBarStyle {//white status bar
return .lightContent
}
override func viewDidLoad() {
webView.scrollView.bounces = false;
super.viewDidLoad()
webView.scrollView.delegate = self //disable zoom
//for haptics
let config = WKWebViewConfiguration()
config.addScript(script: WKUserScript.getUrlScript(scriptName: getUrlAtDocumentStartScript), scriptHandlerName:getUrlAtDocumentStartScript, scriptMessageHandler: self, injectionTime: .atDocumentStart)
config.addScript(script: WKUserScript.getUrlScript(scriptName: getUrlAtDocumentEndScript), scriptHandlerName:getUrlAtDocumentEndScript, scriptMessageHandler: self, injectionTime: .atDocumentEnd)
webView = WKWebView(frame: UIScreen.main.bounds, configuration: config)
webView.navigationDelegate = self
view.addSubview(webView)
}
//disable zoom
func viewForZooming(in: UIScrollView) -> UIView? {
return nil;
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
func tapped(i:Int) {
print("Triggering haptic #\(i)")
switch i {
case 1:
let generator = UINotificationFeedbackGenerator()
generator.notificationOccurred(.error)
case 2:
let generator = UINotificationFeedbackGenerator()
generator.notificationOccurred(.success)
case 3:
let generator = UINotificationFeedbackGenerator()
generator.notificationOccurred(.warning)
case 4:
let generator = UIImpactFeedbackGenerator(style: .light)
generator.impactOccurred()
case 5:
let generator = UIImpactFeedbackGenerator(style: .medium)
generator.impactOccurred()
case 6:
let generator = UIImpactFeedbackGenerator(style: .heavy)
generator.impactOccurred()
default:
let generator = UISelectionFeedbackGenerator()
generator.selectionChanged()
}
}
//alert/prompt/confirm dialogs
func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo,
completionHandler: @escaping () -> Void) {
let alertController = UIAlertController(title: nil, message: message, preferredStyle: .actionSheet)
alertController.addAction(UIAlertAction(title: "OK", style: .default, handler: { (action) in
completionHandler()
}))
present(alertController, animated: true, completion: nil)
}
func webView(_ webView: WKWebView, runJavaScriptConfirmPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo,
completionHandler: @escaping (Bool) -> Void) {
let alertController = UIAlertController(title: nil, message: message, preferredStyle: .actionSheet)
alertController.addAction(UIAlertAction(title: "OK", style: .default, handler: { (action) in
completionHandler(true)
}))
alertController.addAction(UIAlertAction(title: "Cancel", style: .default, handler: { (action) in
completionHandler(false)
}))
present(alertController, animated: true, completion: nil)
}
func webView(_ webView: WKWebView, runJavaScriptTextInputPanelWithPrompt prompt: String, defaultText: String?, initiatedByFrame frame: WKFrameInfo,
completionHandler: @escaping (String?) -> Void) {
let alertController = UIAlertController(title: nil, message: prompt, preferredStyle: .actionSheet)
alertController.addTextField { (textField) in
textField.text = defaultText
}
alertController.addAction(UIAlertAction(title: "OK", style: .default, handler: { (action) in
if let text = alertController.textFields?.first?.text {
completionHandler(text)
} else {
completionHandler(defaultText)
}
}))
alertController.addAction(UIAlertAction(title: "Cancel", style: .default, handler: { (action) in
completionHandler(nil)
}))
present(alertController, animated: true, completion: nil)
}
}
//sending scripts commands to JS and back
extension ViewController: WKScriptMessageHandler {
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
switch message.name {
case getUrlAtDocumentStartScript:
tapped(i: message.body as! Int)
//print("start: \(message.body)")
case getUrlAtDocumentEndScript:
tapped(i: message.body as! Int)
//print("tapped: \(message.body)")
default:
break;
}
}
}
extension WKUserScript {
class func getUrlScript(scriptName: String) -> String {
return "webkit.messageHandlers.\(scriptName).postMessage(1)"
}
}
extension WKWebView {
func loadUrl(string: String) {
if let url = URL(string: string) {
load(URLRequest(url: url))
}
}
}
extension WKWebViewConfiguration {
func addScript(script: String, scriptHandlerName:String, scriptMessageHandler: WKScriptMessageHandler, injectionTime:WKUserScriptInjectionTime) {
let userScript = WKUserScript(source: script, injectionTime: injectionTime, forMainFrameOnly: false)
userContentController.addUserScript(userScript)
userContentController.add(scriptMessageHandler, name: scriptHandlerName)
}
}
okay, so I found answers and solution,
1) this will add support for native JS methods. alert()
, prompt()
and confirm()
could be called from JS or via
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
webView.evaluateJavaScript("confirm('Hello from evaluateJavascript()')", completionHandler: nil)
}
2) here's the implementation of methods I'm using right now (I insert this in the bottom of ViewController
class:
func webView(_ webView: WKWebView,
runJavaScriptAlertPanelWithMessage message: String,
initiatedByFrame frame: WKFrameInfo,
completionHandler: @escaping () -> Void) {
let alert = UIAlertController(title: nil, message: message, preferredStyle: .alert)
let title = NSLocalizedString("OK", comment: "OK Button")
let ok = UIAlertAction(title: title, style: .default) { (action: UIAlertAction) -> Void in
alert.dismiss(animated: true, completion: nil)
}
alert.addAction(ok)
present(alert, animated: true)
completionHandler()
}
func webView(_ webView: WKWebView,
runJavaScriptTextInputPanelWithPrompt prompt: String,
defaultText: String?,
initiatedByFrame frame: WKFrameInfo,
completionHandler: @escaping (String?) -> Void) {
let alert = UIAlertController(title: nil, message: prompt, preferredStyle: .alert)
alert.addTextField { (textField) in
textField.text = defaultText
}
alert.addAction(UIAlertAction(title: "Ok", style: .default, handler: { (action) in
if let text = alert.textFields?.first?.text {
completionHandler(text)
} else {
completionHandler(defaultText)
}
}))
alert.addAction(UIAlertAction(title: "Cancel", style: .default, handler: { (action) in
completionHandler(nil)
}))
self.present(alert, animated: true, completion: nil)
// if ipad will crash on this do this (https://stackoverflow.com/questions/42772973/ios-wkwebview-javascript-alert-crashing-on-ipad?noredirect=1&lq=1):
// if let presenter = alertController.popoverPresentationController {
// presenter.sourceView = self.view
// }
//
// self.present(alertController, animated: true, completion: nil)
}
func webView(_ webView: WKWebView,
runJavaScriptConfirmPanelWithMessage message: String,
initiatedByFrame frame: WKFrameInfo,
completionHandler: @escaping (Bool) -> Void) {
let alertController = UIAlertController(title: nil, message: message, preferredStyle: .actionSheet)
alertController.addAction(UIAlertAction(title: "Ok", style: .default, handler: { (action) in
completionHandler(true)
}))
alertController.addAction(UIAlertAction(title: "Cancel", style: .default, handler: { (action) in
completionHandler(false)
}))
self.present(alertController, animated: true, completion: nil)
}
also to the bottom of viewDidLoad()
I added this code:
webView.uiDelegate = self
webView.navigationDelegate = self
view.addSubview(webView!)
Adding full code into collapsed snippet - in case someone will be confused how exactly this should be used:
import UIKit import WebKit class ViewController: UIViewController , WKNavigationDelegate , UIScrollViewDelegate , WKUIDelegate { //wk webvew set @IBOutlet var webView: WKWebView! let getUrlAtDocumentStartScript = "GetUrlAtDocumentStart" let getUrlAtDocumentEndScript = "GetUrlAtDocumentEnd" //webkit.messageHandlers.GetUrlAtDocumentEnd.postMessage('1') override func loadView() { self.webView = WKWebView() self.webView.navigationDelegate = self //for prompt ?? self.webView?.uiDelegate = self view = webView } override func viewWillAppear(_ animated: Bool) {//white status bar super.viewWillAppear(animated) webView.isOpaque = false //removes white flash on WKWebView load webView.backgroundColor = UIColor(red: 41/255, green: 45/255, blue: 91/255, alpha: 1) UIApplication.shared.statusBarStyle = .lightContent do { let paid = Bundle.main.infoDictionary?["paid"] as? Bool; var fileName = "none" if(paid!){ fileName = "index-ios-wvd-inlined--paid" } else { fileName = "index-ios-wvd-inlined" } guard let filePath = Bundle.main.path(forResource: fileName, ofType: "html") else { // File Error print ("File reading error") return } let contents = try String(contentsOfFile: filePath, encoding: .utf8) let baseUrl = URL(fileURLWithPath: filePath) webView.loadHTMLString(contents as String, baseURL: baseUrl) } catch { print ("File HTML error") } } override var preferredStatusBarStyle : UIStatusBarStyle {//white status bar return .lightContent } override func viewDidLoad() { webView.scrollView.bounces = false; super.viewDidLoad() //disable zoom webView.scrollView.delegate = self let config = WKWebViewConfiguration() config.addScript(script: WKUserScript.getUrlScript(scriptName: getUrlAtDocumentStartScript), scriptHandlerName:getUrlAtDocumentStartScript, scriptMessageHandler: self, injectionTime: .atDocumentStart) config.addScript(script: WKUserScript.getUrlScript(scriptName: getUrlAtDocumentEndScript), scriptHandlerName:getUrlAtDocumentEndScript, scriptMessageHandler: self, injectionTime: .atDocumentEnd) webView = WKWebView(frame: UIScreen.main.bounds, configuration: config) webView.navigationDelegate = self view.addSubview(webView) webView.uiDelegate = self webView.navigationDelegate = self view.addSubview(webView!) // Do any additional setup after loading the view, typically from a nib. } func viewForZooming(in: UIScrollView) -> UIView? { return nil; } //disable zoom override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } func tapped(i:Int) { print("Running \\(i)") switch i { case 1: let generator = UINotificationFeedbackGenerator() generator.notificationOccurred(.error) case 2: let generator = UINotificationFeedbackGenerator() generator.notificationOccurred(.success) case 3: let generator = UINotificationFeedbackGenerator() generator.notificationOccurred(.warning) case 4: let generator = UIImpactFeedbackGenerator(style: .light) generator.impactOccurred() case 5: let generator = UIImpactFeedbackGenerator(style: .medium) generator.impactOccurred() case 6: let generator = UIImpactFeedbackGenerator(style: .heavy) generator.impactOccurred() default: let generator = UISelectionFeedbackGenerator() generator.selectionChanged() } } //default alert/confirm/prompt dialogs func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> Void) { let alert = UIAlertController(title: nil, message: message, preferredStyle: .alert) let title = NSLocalizedString("OK", comment: "OK Button") let ok = UIAlertAction(title: title, style: .default) { (action: UIAlertAction) -> Void in alert.dismiss(animated: true, completion: nil) } alert.addAction(ok) present(alert, animated: true) completionHandler() } func webView(_ webView: WKWebView, runJavaScriptTextInputPanelWithPrompt prompt: String, defaultText: String?, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (String?) -> Void) { let alert = UIAlertController(title: nil, message: prompt, preferredStyle: .alert) alert.addTextField { (textField) in textField.text = defaultText } alert.addAction(UIAlertAction(title: "Ok", style: .default, handler: { (action) in if let text = alert.textFields?.first?.text { completionHandler(text) } else { completionHandler(defaultText) } })) alert.addAction(UIAlertAction(title: "Cancel", style: .default, handler: { (action) in completionHandler(nil) })) self.present(alert, animated: true, completion: nil) // if ipad will crash on this try to uncomment (based on https://stackoverflow.com/questions/42772973/ios-wkwebview-javascript-alert-crashing-on-ipad?noredirect=1&lq=1): // if let presenter = alertController.popoverPresentationController { // presenter.sourceView = self.view // } // // self.present(alertController, animated: true, completion: nil) } func webView(_ webView: WKWebView, runJavaScriptConfirmPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (Bool) -> Void) { let alertController = UIAlertController(title: nil, message: message, preferredStyle: .actionSheet) alertController.addAction(UIAlertAction(title: "Ok", style: .default, handler: { (action) in completionHandler(true) })) alertController.addAction(UIAlertAction(title: "Cancel", style: .default, handler: { (action) in completionHandler(false) })) self.present(alertController, animated: true, completion: nil) } func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) { webView.evaluateJavaScript("confirm('Hello from evaluateJavascript()')", completionHandler: nil) } } extension ViewController: WKScriptMessageHandler { func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) { switch message.name { case getUrlAtDocumentStartScript: tapped(i: message.body as! Int) //print("start: \\(message.body)") case getUrlAtDocumentEndScript: tapped(i: message.body as! Int) //print("tapped: \\(message.body)") default: break; } } } extension WKUserScript { class func getUrlScript(scriptName: String) -> String { return "webkit.messageHandlers.\\(scriptName).postMessage(1)" } } extension WKWebView { func loadUrl(string: String) { if let url = URL(string: string) { load(URLRequest(url: url)) } } } extension WKWebViewConfiguration { func addScript(script: String, scriptHandlerName:String, scriptMessageHandler: WKScriptMessageHandler, injectionTime:WKUserScriptInjectionTime) { let userScript = WKUserScript(source: script, injectionTime: injectionTime, forMainFrameOnly: false) userContentController.addUserScript(userScript) userContentController.add(scriptMessageHandler, name: scriptHandlerName) } }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.