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時將發生內存泄漏。
翻譯自: https://www.freecodecamp.org/news/how-to-build-cross-origin-communication-bridges-in-ios-and-andriod-7baef82b3f02/
ios 跨域