11

I am using Web View both in Iphone and Android. In Android, I use create a variable to call native Andriod functions/methods. But I have not able to find something similar in Iphone. So, how to call a native Iphone function from JavaScript.

Imran Qadir Baksh - Baloch
  • 32,612
  • 68
  • 179
  • 322

2 Answers2

21

iOS

In iOS you could use a custom url scheme by implementing shouldStartLoadWithRequest. If I would by example want to change the toolbar's tint color:

ViewController.h

@property (strong, nonatomic) IBOutlet UIToolbar *toolbar;

ViewController.m

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    NSURL *url = request.URL;
    NSString *scheme = [url scheme];

    if ([scheme isEqualToString:@"color"]) {
        self.toolbar.tintColor = [self colorWithHexString:url.host];
    }

    return YES;
}

Javascript

In javascript you just change window.location, which will launch a fire and forget:

window.location = 'color://' + color;

Just chain your parameters like:

window.location = 'myscheme://param1/' + value1 + '/param2/' + value2;

Just make sure you use encodeURIComponent to encode your parameters (to create a valid url).

More info

Android

In Android you add a javascript interface:

    WebView webView = getWebView();
    webView.loadUrl("http://localhost:8080");
    // must be after loadUrl on lower apis
    webView.addJavascriptInterface(new AndroidBridge(this), "AndroidBridge");

...

public class AndroidBridge {

    private MainActivity activity;

    public AndroidBridge(MainActivity activity) {
        this.activity = activity;
    }

    @JavascriptInterface
    public void changeNavbarBackground(String color) throws NoSuchFieldException, IllegalArgumentException, IllegalAccessException {
        Log.i(getClass().getSimpleName(), "changeNavbarBackground " + color);

        Field f = R.color.class.getField(color);
        final int col = (Integer) f.get(null);

        activity.changeNavbarBackground(col);
    }
}

Javascript

In javascript you use the javascript interface:

if (window.AndroidBridge) {
            window.AndroidBridge.changeNavbarBackground(color);
}
Oded Regev
  • 4,065
  • 2
  • 38
  • 50
asgoth
  • 35,552
  • 12
  • 89
  • 98
  • 1
    But how can I call XXXX function in javscript? – Imran Qadir Baksh - Baloch Jan 06 '13 at 12:29
  • 1
    By using window.location. It's in the answer, maybe a bit hidden. – asgoth Jan 06 '13 at 12:30
  • Sorry I am new. Can you put a some detail in window.location where should I put, functionName, parameter1,parameter2, parameter3, ... and how can I get the return value – Imran Qadir Baksh - Baloch Jan 06 '13 at 12:33
  • Thank you very much for your help and patient. Lastly, it will be great for me(and for other users) if you put an IOS function with 1 or paramters as an example and then call this function from javscript similarly that you have done with Andriod – Imran Qadir Baksh - Baloch Jan 06 '13 at 12:41
  • Thanks, But I have questions. First, I wonder why only use URL shceme on iOS? Is this essential? There isn't another solution without URL scheme? Second, As far as I know, Android could use URL scheme. why don't use URL scheme on Android? – illusionJJ Aug 23 '16 at 01:16
0

Firebase analytics sample for webview will give more insights to implement this feature. Please check on this sample

For testing you can host the sample webpart on some server and load that url on webview.

Nidhin
  • 1,818
  • 22
  • 23