ios 跨域_如何在iOS和Android中建立跨域通信桥

ios 跨域

I was working on a certain project at work, in which I needed to connect several varying components via messages. Each had its own logic and code language. This made me want to understand all the ways different platforms enable communication.

我正在工作的某个项目上，需要通过消息连接几个不同的组件。每个都有自己的逻辑和代码语言。这使我想了解不同平台实现通信的所有方式。

This article’s aim is to explain these cross-origin communication bridges and present simple, yet informative, examples to achieve them.

本文的目的是解释这些跨域通信桥梁，并提供实现这些目标的简单但有用的示例。

There will also be plenty of bridge puns ?

还会有很多双关语吗？

YOU WERE WARNED.

您被警告。

If you just want to get your hands dirty with the code, there are links to the GitHub repositories at the bottom of this article.

如果您只是想弄清楚代码，可以在本文底部找到指向GitHub存储库的链接。

Typically, the JavaScript you write will run inside a browser. On iOS, it can either be a UIWebView or a WKWebView. On Android, a WebView.

通常，您编写JavaScript将在浏览器中运行。在iOS上 ，它可以是UIWebView或WKWebView。在Android上 ，是WebView。

Since iOS can be the more exasperating of the platforms, I’ll describe the communication bridge there first.

由于iOS可能会使平台更加恼人，因此我将首先在此描述通信桥。

伦敦桥倒塌(iOS) (London Bridge is Falling Down (iOS))

From iOS 8 onwards, Apple recommends using WKWebView instead of UIWebView, so the following will only address the bridge on a WKWebView.

从iOS 8开始，Apple建议使用WKWebView而不是UIWebView，因此以下内容仅解决WKWebView上的桥。

For a UIWebView reference, please go here.

有关UIWebView的参考，请转到此处。

To send messages from the WKWebView to JavaScript, you use the method below:

要将消息从WKWebView发送到JavaScript，请使用以下方法：

- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^)(id, NSError *error))completionHandler;

To receive messages from JavaScript inside your WKWebView, you must do the following:

要从WKWebView内部JavaScript接收消息，您必须执行以下操作：

Create an instance of WKWebViewConfiguration
创建WKWebViewConfiguration的实例
Create an instance of WKUserContentController
创建WKUserContentController的实例
Add a script message handler to your configuration (this part bridges the gap). This action also registers your message handler on the window object under the following path: window.webkit.messageHandlers.MSG_HANDLER_NAME
将脚本消息处理程序添加到您的配置中(这部分弥合了差距)。此操作还将您的消息处理程序注册到以下路径下的window对象上： window.webkit.messageHandlers.MSG_HANDLER_NAME
Make the class implement the message handler protocol by adding <WKScriptMessageHandler> at the top of the file
通过在文件顶部添加<WKScriptMessageHandler>，使类实现消息处理程序协议。
Implement userContentController:didReceiveScriptMessage (this method handles receiving the messages from JavaScript)
实现userContentController：didReceiveScriptMessage (此方法处理从JavaScript接收消息)

建筑桥梁 (Building Bridges)

Let’s say we have the following HTML page set up:

假设我们设置了以下HTML页面：

<html><head><title>Javascript-iOS Communication</title></head><body><script>window.webkit.messageHandlers.myOwnJSHandler.postMessage("Hello World!");</script></body></html>

And in our native code we implement the steps described above:

在我们的本机代码中，我们实现了上述步骤：

#import <UIKit/UIKit.h>
#import <WebKit/WebKit.h>// 4
@interface ViewController : UIViewController <WKScriptMessageHandler>@property(nonatomic, strong) WKWebView *webview;

And violà! Now you have full JavaScript - iOS Communication!

和提琴！现在，您已经拥有完整JavaScript-iOS通信！

过桥(Android) (Crossing The Bridge (Android))

Things are much simpler and more friendly here. In order to set up our communication bridge, there are only a few steps:

这里的事情更加简单和友好。为了建立我们的沟通桥梁，只有几个步骤：

Create an instance of a WebView object
创建一个WebView对象的实例
Enable JavaScript inside this WebView (setJavaScriptEnabled)
在此WebView中启用JavaScript( setJavaScriptEnabled )
Set your own JavaScript Interface (which will hold methods that are visible to your JavaScript)
设置自己JavaScript接口(将包含对JavaScript可见的方法)
Any method that you want exposed to your JavaScript must have the @JavascriptInterface annotation before its declaration
您想要公开给JavaScript的任何方法都必须具有@JavascriptInterface 注解在宣布之前

Like before, let’s assume we have created this HTML file:

像以前一样，假设我们已经创建了这个HTML文件：

And we have created the following simple Android Application:

我们创建了以下简单的Android应用程序：

And there you go!

然后你去了！

You can now consider yourself a Native Communication Ninja!

您现在可以认为自己是本地交流忍者！

Here are the links to the repositories:

以下是存储库的链接：

AndroidtoJS RepositoryAndroidtoJS存储库 iOStoJS RepositoryiOStoJS存储库

iOS关于iOS的重要说明⚠️ (⚠️ Important Note Regarding iOS ⚠️)

When you get to the point that you want to destroy your WKWebView, it is imperative that you remove your script message handler. If you do not do so, the script message handler will still hold a reference to your WKWebView and memory leaks will ensue upon creating new WKWebViews.

当您到达要销毁WKWebView的地步时，它就是 势在必行 您删除脚本消息处理程序。如果不这样做，脚本消息处理程序将仍然保留对WKWebView的引用，并且在创建新的WKWebViews时将发生内存泄漏。