В WKWebView мы можем вызвать код ObjectiveC/swift с помощью обработчиков сообщений webkit
например: webkit.messageHandlers.<handler>.pushMessage(message)
Он хорошо работает для простых функций javascript без параметров. Но
К сожалению, я не смог найти собственное решение.
Но следующее обходное решение решило мою проблему
Используйте javascript promises, и вы можете вызвать функцию разрешения из вашего кода iOS.
UPDATE
Вот как вы можете использовать обещание
В JS
this.id = 1;
this.handlers = {};
window.onMessageReceive = (handle, error, data) => {
if (error){
this.handlers[handle].resolve(data);
}else{
this.handlers[handle].reject(data);
}
delete this.handlers[handle];
};
}
sendMessage(data) {
return new Promise((resolve, reject) => {
const handle = 'm'+ this.id++;
this.handlers[handle] = { resolve, reject};
window.webkit.messageHandlers.<yourHandler>.postMessage({data: data, id: handle});
});
}
в iOS
Вызвать функцию window.onMessageReceive с помощью соответствующего идентификатора обработчика
Существует способ вернуть возвращаемое значение JS из собственного кода с помощью WkWebView. Это немного взломать, но отлично работает для меня без проблем, и наше производственное приложение использует много JS/Native общения.
В WKUiDelegate, назначенной WKWebView, переопределите RunJavaScriptTextInputPanel. Это использует способ, которым делегат обрабатывает функцию запроса JS для выполнения этого:
public override void RunJavaScriptTextInputPanel (WebKit.WKWebView webView, string prompt, string defaultText, WebKit.WKFrameInfo frame, Action<string> completionHandler)
{
// this is used to pass synchronous messages to the ui (instead of the script handler). This is because the script
// handler cannot return a value...
if (prompt.StartsWith ("type=", StringComparison.CurrentCultureIgnoreCase)) {
string result = ToUiSynch (prompt);
completionHandler.Invoke ((result == null) ? "" : result);
} else {
// actually run an input panel
base.RunJavaScriptTextInputPanel (webView, prompt, defaultText, frame, completionHandler);
//MobApp.DisplayAlert ("EXCEPTION", "Input panel not implemented.");
}
}
В моем случае я передаю тип данных = xyz, name = xyz, data = xyz, чтобы передать аргументы. Мой код ToUiSynch() обрабатывает запрос и всегда возвращает строку, которая возвращается к JS как простое возвращаемое значение.
В JS я просто вызываю функцию prompt() с моей форматированной строкой args и получаю возвращаемое значение:
return prompt ("type=" + type + ";name=" + name + ";data=" + (typeof data === "object" ? JSON.stringify ( data ) : data ));
XWebView - лучший выбор в настоящее время. Он может автоматически выставлять собственные объекты в среду javascript.
Для вопроса 2 вам нужно передать функцию обратного вызова JS для native, чтобы получить результат, потому что синхронизированная связь с JS на native невозможна.
Подробнее см. sample.
Этот ответ использует идею ответа Натана Брауна выше.
Насколько мне известно, в настоящее время нет возможности вернуть данные обратно в javascript синхронно. Надеюсь, яблоко предоставит решение в будущем выпуске.
Так что взломать - перехватить вызовы из js. Apple предоставила эту функциональность, чтобы показать собственный всплывающий дизайн, когда js вызывает предупреждение, приглашение и т.д. Теперь, поскольку приглашение - это функция, в которой вы показываете данные пользователю (мы будем использовать это как параметр метода) и ответ от пользователя на этот prompt будет возвращен обратно в js (мы будем использовать это как данные возврата)
Может возвращаться только строка. Это происходит синхронно.
Мы можем реализовать вышеупомянутую идею следующим образом:
В конце javascript вызовите метод swift следующим образом:
function callNativeApp(){
console.log("callNativeApp called");
try {
//webkit.messageHandlers.callAppMethodOne.postMessage("Hello from JavaScript");
var type = "SJbridge";
var name = "functionOne";
var data = {name:"abc", role : "dev"}
var payload = {type: type, functionName: name, data: data};
var res = prompt(JSON.stringify (payload));
//{"type":"SJbridge","functionName":"functionOne","data":{"name":"abc","role":"dev"}}
//res is the response from swift method.
} catch(err) {
console.log('The native context does not exist yet');
}
}
На быстром /x-кодовом конце сделайте следующее:
Внедрите протокол WKUIDelegate а затем назначьте реализацию свойствам uiDelegate следующим образом:
self.webView.uiDelegate = self
Теперь напишите этот func webView чтобы переопределить (?)/Перехватить запрос prompt от javascript.
func webView(_ webView: WKWebView, runJavaScriptTextInputPanelWithPrompt prompt: String, defaultText: String?, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (String?) -> Void) {
if let dataFromString = prompt.data(using: .utf8, allowLossyConversion: false) {
let payload = JSON(data: dataFromString)
let type = payload["type"].string!
if (type == "SJbridge") {
let result = callSwiftMethod(prompt: payload)
completionHandler(result)
} else {
AppConstants.log("jsi_", "unhandled prompt")
completionHandler(defaultText)
}
}else {
AppConstants.log("jsi_", "unhandled prompt")
completionHandler(defaultText)
}}
Если вы не назовёте completionHandler() то выполнение js не будет продолжено. Теперь проанализируйте json и вызовите соответствующий быстрый метод.
func callSwiftMethod(prompt : JSON) -> String{
let functionName = prompt["functionName"].string!
let param = prompt["data"]
var returnValue = "returnvalue"
AppConstants.log("jsi_", "functionName: \(functionName) param: \(param)")
switch functionName {
case "functionOne":
returnValue = handleFunctionOne(param: param)
case "functionTwo":
returnValue = handleFunctionTwo(param: param)
default:
returnValue = "returnvalue";
}
return returnValue
}
У меня есть обходной вопрос для вопроса 1.
PostMessage с JavaScript
window.webkit.messageHandlers.<handler>.postMessage(function(data){alert(data);}+"");
Обращайтесь к нему в проекте Objective-C
-(void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
NSString *callBackString = message.body;
callBackString = [@"(" stringByAppendingString:callBackString];
callBackString = [callBackString stringByAppendingFormat:@")('%@');", @"Some RetString"];
[message.webView evaluateJavaScript:callBackString completionHandler:^(id _Nullable obj, NSError * _Nullable error) {
if (error) {
NSLog(@"name = %@ error = %@",@"", error.localizedDescription);
}
}];
}
Мне удалось решить эту проблему - добиться двусторонней связи между собственным приложением и WebView (JS) - с помощью postMessage в JS и evaluateJavaScript JavaScript в собственном коде.
Решение от высокого уровня было:
getDataFromNative для Native, которая вызывает другую функцию обратного вызова (я назвал ее callbackForNative), которую можно переназначитьcallbackForNative для любой функции, которую вы хотитеpostMessageuserContentController для прослушивания входящих сообщений из WebView (JS)evaluateJavaScript для вызова getDataFromNative функции JS с любым PARAMS вы хотитеВот код:
JS:
// Function to get data from Native
window.getDataFromNative = function(data) {
window.callbackForNative(data)
}
// Empty callback function, which can be reassigned later
window.callbackForNative = function(data) {}
// Somewhere in your code where you want to send data to the native app and have it call a JS callback with some data:
window.callbackForNative = function(data) {
// Do your stuff here with the data returned from the native app
}
webkit.messageHandlers.YOUR_NATIVE_METHOD_NAME.postMessage({ someProp: 'some value' })
Родной (Свифт):
// Call this function from 'viewDidLoad()'
private func setupWebView() {
let contentController = WKUserContentController()
contentController.add(self, name: "YOUR_NATIVE_METHOD_NAME")
// You can add more methods here, e.g.
// contentController.add(self, name: "onComplete")
let config = WKWebViewConfiguration()
config.userContentController = contentController
self.webView = WKWebView(frame: self.view.bounds, configuration: config)
}
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
print("Received message from JS")
if message.name == "YOUR_NATIVE_METHOD_NAME" {
print("Message from webView: \(message.body)")
sendToJavaScript(params: [
"foo": "bar"
])
}
// You can add more handlers here, e.g.
// if message.name == "onComplete" {
// print("Message from webView from onComplete: \(message.body)")
// }
}
func sendToJavaScript(params: JSONDictionary) {
print("Sending data back to JS")
let paramsAsString = asString(jsonDictionary: params)
self.webView.evaluateJavaScript("getDataFromNative(\(paramsAsString))", completionHandler: nil)
}
func asString(jsonDictionary: JSONDictionary) -> String {
do {
let data = try JSONSerialization.data(withJSONObject: jsonDictionary, options: .prettyPrinted)
return String(data: data, encoding: String.Encoding.utf8) ?? ""
} catch {
return ""
}
}
PS Я разработчик Front-End, поэтому я очень опытный в JS, но у меня очень мало опыта в Swift.
PS2 Убедитесь, что ваш WebView не кэшируется, или вы можете расстроиться, если WebView не меняется, несмотря на изменения в HTML/CSS/JS.
Рекомендации:
Это руководство мне очень помогло: https://medium.com/@JillevdWeerd/creating-links-between-wkwebview-and-native-code-8e998889b503
Вы не можете. Как упоминалось в @Clement, вы можете использовать promises и вызвать функцию разрешения. Довольно неплохо (хотя использование Deferred - который теперь считается анти-шаблоном) - GoldenGate.
В Javascript вы можете создать объект двумя способами: отправить и решить: (Я скомпилировал cs для js для упрощения чтения)
this.Goldengate = (function() {
function Goldengate() {}
Goldengate._messageCount = 0;
Goldengate._callbackDeferreds = {};
Goldengate.dispatch = function(plugin, method, args) {
var callbackID, d, message;
callbackID = this._messageCount;
message = {
plugin: plugin,
method: method,
"arguments": args,
callbackID: callbackID
};
window.webkit.messageHandlers.goldengate.postMessage(message);
this._messageCount++;
d = new Deferred;
this._callbackDeferreds[callbackID] = d;
return d.promise;
};
Goldengate.callBack = function(callbackID, isSuccess, valueOrReason) {
var d;
d = this._callbackDeferreds[callbackID];
if (isSuccess) {
d.resolve(valueOrReason[0]);
} else {
d.reject(valueOrReason[0]);
}
return delete this._callbackDeferreds[callbackID];
};
return Goldengate;
})();
Затем вы вызываете
Goldengate.dispatch("ReadLater", "makeSomethingHappen", []);
И со стороны iOS:
func userContentController(userContentController: WKUserContentController, didReceiveScriptMessage message: WKScriptMessage) {
let message = message.body as! NSDictionary
let plugin = message["plugin"] as! String
let method = message["method"] as! String
let args = transformArguments(message["arguments"] as! [AnyObject])
let callbackID = message["callbackID"] as! Int
println("Received message #\(callbackID) to dispatch \(plugin).\(method)(\(args))")
run(plugin, method, args, callbackID: callbackID)
}
func transformArguments(args: [AnyObject]) -> [AnyObject!] {
return args.map { arg in
if arg is NSNull {
return nil
} else {
return arg
}
}
}
func run(plugin: String, _ method: String, _ args: [AnyObject!], callbackID: Int) {
if let result = bridge.run(plugin, method, args) {
println(result)
switch result {
case .None: break
case .Value(let value):
callBack(callbackID, success: true, reasonOrValue: value)
case .Promise(let promise):
promise.onResolved = { value in
self.callBack(callbackID, success: true, reasonOrValue: value)
println("Promise has resolved with value: \(value)")
}
promise.onRejected = { reason in
self.callBack(callbackID, success: false, reasonOrValue: reason)
println("Promise was rejected with reason: \(reason)")
}
}
} else {
println("Error: No such plugin or method")
}
}
private func callBack(callbackID: Int, success: Bool, reasonOrValue: AnyObject!) {
// we're wrapping reason/value in array, because NSJSONSerialization won't serialize scalar values. to be fixed.
bridge.vc.webView.evaluateJavaScript("Goldengate.callBack(\(callbackID), \(success), \(Goldengate.toJSON([reasonOrValue])))", completionHandler: nil)
}
Пожалуйста, рассмотрите эту замечательную статью о promises