CODEWITHSUNDEEP
iosswiftuiwebview
Phocs
Phocs

Reputation: 2510

UIWebView and JavaScriptInterface in Swift

How can I to create the JavascriptInterface channel from my web site to my UIWebView?

Example in Android:

webView.addJavascriptInterface(new WebAppInterface(this), "Android");

And from this JavascriptInterface I would like to draw the methods, as for example:

func webViewDidStartLoad(webView: UIWebView)

or

myActivityIndicator.startAnimating()

How can I do?

Upvotes: 18

Views: 30308

Answers (2)

Phocs
Phocs

Reputation: 2510

For WKWebView: source here

JavaScript

function callNativeApp () {
    try {
            webkit.messageHandlers.callbackHandler.postMessage("Hello from JavaScript");
    } catch(err) {
            console.log('The native context does not exist yet');
    }
}

Swift

import WebKit
class ViewController: UIViewController, WKScriptMessageHandler {

    @IBOutlet var containerView: UIView? = nil

    var webView: WKWebView?

    override func loadView() {
        super.loadView()

        let contentController = WKUserContentController()
        contentController.addScriptMessageHandler(self, name: "callbackHandler")
        let config = WKWebViewConfiguration()
        config.userContentController = contentController

        self.webView = WKWebView( frame: self.containerView!.bounds, configuration: config)
        self.view = self.webView

    }

    override func viewDidLoad() {
        super.viewDidLoad()

        //I use the file html in local
        let path = NSBundle.mainBundle().pathForResource("index", ofType: "html") 
        let url = NSURL(fileURLWithPath: path!)
        let req = NSURLRequest(URL: url)
        self.webView!.loadRequest(req)

    }

    func userContentController(userContentController: WKUserContentController, didReceiveScriptMessage message: WKScriptMessage) {// edit: changed fun to func
        if (message.name == "callbackHandler"){
            print("\(message.body)")
        }
    }

}

For UIWebView: source here

JavaScript in HTML

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
        (function(){
            $(window).load(function(){

               $('.clickMe').on('click', function(){
                   window.location = "foobar://fizz?Hello_from_javaScript";
               });
            });
         })(jQuery);
    </script>

Swift

import UIKit
class ViewController: UIViewController, UIWebViewDelegate {

    @IBOutlet weak var Web: UIWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

    let path = NSBundle.mainBundle().pathForResource("index", ofType: "html")
        let url = NSURL(fileURLWithPath: path!)
        let req = NSURLRequest(URL: url)
        Web.delegate = self
        Web.loadRequest(req)
    }

    func webView(webView: UIWebView, shouldStartLoadWithRequest request: NSURLRequest, navigationType: UIWebViewNavigationType) -> Bool {
        if request.URL?.query != nil {
            print("\(request.URL!.query!)")
        }
        return true
    }

}

Upvotes: 28

paulvs
paulvs

Reputation: 12053

Here's a quick example:

  1. Register a URL Scheme such as foobar in Xcode

  2. Handle this URL Scheme in your web view

    func webView(webView: UIWebView, shouldStartLoadWithRequest request: NSURLRequest, navigationType: UIWebViewNavigationType) -> Bool {
    if request.URL?.query?.containsString("show_activity_indicator=true") {
        myActivityIndicator.startAnimating()
    }
}

  3. Finally, call this from your JavaScript

    // Show your activity indicator from JavaScript.
window.location = "foobar://fizz?show_activity_indicator=true"

Note: See my question here for more information on web view communication in iOS.

Upvotes: 5

Related Questions