如何从 Javascript 调用原生 Iphone/Android 函数？答案

【问题标题】：How to Call Native Iphone/Android function from Javascript?如何从 Javascript 调用原生 Iphone/Android 函数？
【发布时间】：2012-12-20 08:34:45
【问题描述】：

我在 Iphone 和 Android 中都使用 Web View。在 Android 中，我使用 create a variable 来调用原生的 Andriod 函数/方法。但我无法在 Iphone 中找到类似的东西。那么，如何从 JavaScript 调用原生 Iphone 函数。

【问题讨论】：

标签： javascript android iphone

【解决方案1】：

iOS

在 iOS 中，您可以通过实现 shouldStartLoadWithRequest 来使用自定义 url 方案。如果我想更改工具栏的色调颜色：

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

在 javascript 中，您只需更改 window.location，这将启动 一劳永逸：

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

只需链接您的参数，例如：

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

只需确保您使用 encodeURIComponent 对参数进行编码（以创建有效的 url）。

More info

安卓

在 Android 中添加一个 javascript 界面：

    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

在 javascript 中，您使用 javascript 接口：

if (window.AndroidBridge) {
            window.AndroidBridge.changeNavbarBackground(color);
}

【讨论】：

但是如何在 javscript 中调用 XXXX 函数呢？
通过使用 window.location。它在答案中，可能有点隐藏。
对不起，我是新人。你能在window.location中放一些细节吗？我应该在哪里放，functionName，parameter1，parameter2，parameter3，...我怎样才能得到返回值
非常感谢您的帮助和耐心。最后，如果您将带有 1 或参数的 IOS 函数作为示例，然后像使用 Andriod 所做的那样从 javscript 调用此函数，这对我（和其他用户）来说会很棒
谢谢，但我有问题。首先，我想知道为什么只在 iOS 上使用 URL shceme？这是必不可少的吗？没有 URL 方案就没有其他解决方案吗？其次，据我所知，Android 可以使用 URL 方案。为什么不在 Android 上使用 URL 方案？

【解决方案2】：

用于 webview 的 Firebase 分析示例将为实现此功能提供更多见解。请查看此sample

为了进行测试，您可以在某些服务器上托管示例 Web 部件并将该 URL 加载到 Web 视图上。

【讨论】：