Geek Answers Handbook

How can I send data from swift to javascript and display it in my web view?

I am making an iOS hybrid application using swift 2 and HTML / Javascript. I have a native shell that gets some information from the calendar and GPS. I would like to display this information in my WKWebView and update them every second. I work with local HTML.

I found some examples showing how to communicate between native code and JS, but nothing about how to transfer my "native" data and display it in a web view. Thanks.

+6
source share
1 answer

You should ask the location manager to update the location for you, rather than NSTimer up a 1 second NSTimer to do it yourself. And to transfer data to Javascript, you can use the evaluateJavaScript WKWebView method:

 import UIKit import WebKit import CoreLocation class ViewController: UIViewController, CLLocationManagerDelegate { weak var webView: WKWebView! let locationManager = CLLocationManager() override func viewDidLoad() { super.viewDidLoad() createWebView() locationManager.delegate = self locationManager.startUpdatingLocation() locationManager.requestWhenInUseAuthorization() } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } func createWebView() { let url = NSBundle.mainBundle().URLForResource("my_page", withExtension: "html")! let webView = WKWebView() webView.loadFileURL(url, allowingReadAccessToURL: url) webView.translatesAutoresizingMaskIntoConstraints = false self.view.addSubview(webView) // Auto Layout let views = ["webView": webView] let c1 = NSLayoutConstraint.constraintsWithVisualFormat("H:|[webView]|", options: [], metrics: nil, views: views) let c2 = NSLayoutConstraint.constraintsWithVisualFormat("V:[webView]|", options: [], metrics: nil, views: views) let c3 = NSLayoutConstraint(item: webView, attribute: .Top, relatedBy: .Equal, toItem: self.topLayoutGuide , attribute: .Bottom, multiplier: 1, constant: 0) NSLayoutConstraint.activateConstraints(c1 + c2 + [c3]) // Pass the reference to the View Controller self.webView = webView } func locationManager(manager: CLLocationManager, didUpdateLocations locations: [CLLocation]) { let lastLocation = locations.last! let dict = [ "lat": lastLocation.coordinate.latitude, "long": lastLocation.coordinate.longitude ] let jsonData = try! NSJSONSerialization.dataWithJSONObject(dict, options: []) let jsonString = String(data: jsonData, encoding: NSUTF8StringEncoding)! // Send the location update to the page self.webView.evaluateJavaScript("updateLocation(\(jsonString))") { result, error in guard error == nil else { print(error) return } } } }

And my_page.html :

 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <title>This is a test page</title> <script type="text/javascript"> function updateLocation(data) { var ele = document.getElementById('location'); ele.innerHTML = 'Last location: lat = ' + data['lat'] + ', long = ' + data['long']; } </script> </head> <body> <p id="location">Last location:</p> </body> </html>

If you are testing this in the Simulator, choose Debug> Location> City Launch to see it update continuously (as if you were going through a park).

+6
source

More articles:


All Articles