I want to integrate Form-IO in iOS App WkWebView. I used JavaScript to show the ui in web view. but I’m not able to see web view in screen. I tried in delegate method too but failed to load the web view.
I added webpagePreferences.allowsContentJavaScript = true to enable the Javascript still no webpage loaded in simulator.
I printed web view’s frame as well. it’s printing based on device I chose. I don’t know what wrong I’m doing here. Please correct the wrong here.
class ViewController: UIViewController, WKUIDelegate, UIScrollViewDelegate {
var webView: WKWebView!
override func viewDidLoad() {
super.viewDidLoad()
let config = WKWebViewConfiguration()
let webpagePreferences = WKWebpagePreferences()
webpagePreferences.allowsContentJavaScript = true
config.defaultWebpagePreferences = webpagePreferences
let contentController = WKUserContentController()
contentController.add(self, name: "log")
config.userContentController = contentController
webView = WKWebView(frame: self.view.bounds, configuration: config)
self.view.addSubview(webView)
webView.frame = self.view.bounds
webView.navigationDelegate = self
let htmlContent = """
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form.io</title>
<script src="https://cdn.form.io/formio.js"></script>
</head>
<body>
<div id="formio"></div>
<script type="text/javascript">
window.onload = function() {
window.webkit.messageHandlers.log.postMessage('Before form render');
Formio.createForm(document.getElementById('formio'), {
components: [
{
type: 'textfield',
key: 'firstName',
label: 'First Name',
placeholder: 'Enter your first name.',
input: true
},
{
type: 'textfield',
key: 'lastName',
label: 'Last Name',
placeholder: 'Enter your last name',
input: true
},
{
type: 'button',
action: 'submit',
label: 'Submit',
theme: 'primary'
}
]
}
);
};
</script>
</body>
</html>
"""
print("Before loading the HTML content")
webView.loadHTMLString(htmlContent, baseURL: nil)
print("After loading the HTML content")
}
}
// WKWebView delegate method to catch console logs
extension ViewController: WKScriptMessageHandler {
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
if let messageBody = message.body as? String {
print("JavaScript log: (messageBody)")
}
}
}
// WK navigation Delegate
extension ViewController: WKNavigationDelegate {
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
print("delegate called....")
let stringValue = """
<script type="text/javascript">
window.onload = function() {
window.webkit.messageHandlers.log.postMessage('Before form render');
Formio.createForm(document.getElementById('formio'), {
components: [
{
type: 'textfield',
key: 'firstName',
label: 'First Name',
placeholder: 'Enter your first name.',
input: true
},
{
type: 'textfield',
key: 'lastName',
label: 'Last Name',
placeholder: 'Enter your last name',
input: true
},
{
type: 'button',
action: 'submit',
label: 'Submit',
theme: 'primary'
}
]
}.then(function(form) {
window.webkit.messageHandlers.log.postMessage('Form rendered');
}).catch(function(err) {
window.webkit.messageHandlers.log.postMessage('Error loading form: ' + err);
});
};
</script>
"""
webView.evaluateJavaScript(stringValue)
}
}