javascript embedded in html not running in wkwebview

Question

I am implementing wkwebview in an app that was using UIWebView. I am unable to get javascript to execute when pointing to a local html file that has the javascript embedded within it. The javascript is stripped to do a simple alert and load a basic google map. None of that is getting executed. Do I need to run a local server? GCDWebserver..

I should add, the html/javascript works in safari, google browser no problem.

Solutions attempted include: 1. AppTransportSecuritySettings AllowArbitrary loads. 2. ViewController.swift webview.configuration.preferences.javaScriptEnabled = true 3. This question addresses the issue and says is was fixed in iOS 10.3 Load Javascript files through HTML file on WKWebView in iOS The simulator is running 12.1 4. This question also addresses the issue with an answer of requiring GCDWebserver to be able to execute javascript using wkwebview. WKWebView not executing any js code This however was also solved in a laster version of iOS. Here is some code:

import UIKit
import WebKit
class ViewController: UIViewController, WKNavigationDelegate {
    //@IBOutlet var googleMap: WKWebView!
    var webview: WKWebView!

     override func loadView() {
         webview = WKWebView()
         webview.navigationDelegate = self
         view = webview
     }
    override func viewDidLoad() {
        super.viewDidLoad()
        //let url = URL(string: "https://schallerf1.com")!
        let url = Bundle.main.url(forResource: "index", withExtension: "html", subdirectory: "www")!
        webview.load(URLRequest(url: url))
        webview.allowsBackForwardNavigationGestures = true
        let request = URLRequest(url: url)
        webview.configuration.preferences.javaScriptEnabled = true
        webview.load(request)
    }
}

<!DOCTYPE html>
<html>
    <head>
        <title>Simple Map</title>
        <meta name="viewport" content="initial-scale=1.0">
            <meta charset="utf-8">
                <style>
                    /* Always set the map height explicitly to define the size of the div
                     * element that contains the map. */
                #map {
                    height: 100%;
                }
                /* Optional: Makes the sample page fill the window. */
                html, body {
                    height: 100%;
                    margin: 0;
                    padding: 0;
                }
                </style>
                </head>
    <body>
        <b>WHYYYYYYYYYY!!!!</b>
        <div style="height:100%;width:100%;" id="map"></div>
        <script type="text/javascript">
            var name = "TESTTESTTEST";
            alert('code: '    + name + '\n');
            var map;
            function initMap() {
                map = new google.maps.Map(document.getElementById('map'), {
                                          center: {lat: 39.976068, lng: -83.003297},
                                          zoom: 8
                                          });
            }
        </script>
        <script async defer src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxx&callback=initMap"></script>
    </body>
</html>

None of the javascript works, I should get an alert and a simple google map should display. Do I need to look into the local web server GCDWebserver?

Answer 1

You should be calling your javascript in this WKNavigationDelegate method, which is called when the webview finishes loading.

public func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    webView.evaluateJavaScript("initMap()", completionHandler: { (value, err) in
        // Handle response here.
    })
}

Also, I'm not sure why you're calling two different webview.load() requests - maybe don't do that?

javascript embedded in html not running in wkwebview

Question

1 answers

solution1
0 ACCPTED 2019-06-14 01:29:23

javascript embedded in html not running in wkwebview

Question

1 answers

solution1 0 ACCPTED 2019-06-14 01:29:23

solution1
0 ACCPTED 2019-06-14 01:29:23