如何将web界面功能添加到我的Swift WebView

Android让我有机会添加可以直接从服务器调用的功能。例如，我可以这样编写函数

displaytoos（message）

：

...
// add webapp interface to webview
webView.addJavascriptInterface(new WebAppInterface(), "Android");

// Web app interface
public class WebAppInterface {

    // Javascript interface function to display a toast
    @JavascriptInterface
    public void displayToast(String message) { 
        Toast.makeText(getApplicationContext(), message, Toast.LENGTH_SHORT).show();
    }

}

然后，我可以在我的Javascript代码中调用

Android.displaytoos（）

（如下面的代码片段所示），然后在用户屏幕上显示一条toast消息

const performOperation = () => {
    ...
    Android.displayToast("The process was successful")
}

---

我想使用Swift在本机iOs代码库中实现类似的东西我想在Swift中包含可以直接从服务器调用的函数。我该怎么做？

您可以通过向webview中注入javascript代码来实现这一点

例如，我们希望在应用程序中获得

console.log

的打印，以便在应用程序中显示它

如果要从javascript向webkit发送消息，必须使用

window.webkit.messageHandlers.{NAME_to_identification_RECEVEID_message}.postMessage（{message_to_send}）

例如

window.webkit.messageHandlers.logging.postMessage（MyLog）

必须将此类型注册到webview：

webView.configuration.userContentController.add(self, name: "logging")

在

WKScriptMessageHandler

的委托中接收消息：

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        let type = message.name
        let message = message.body

        print("Received message: \(message) from \(type)")
        // Output Received message: MyLog from logging
    }

如果您有权访问服务器代码，只需添加以下代码即可覆盖日志功能，该功能将向webkit发送消息：

var console = { log: function(msg){window.webkit.messageHandlers.logging.postMessage(msg) } };

如果您没有访问服务器的权限，可以像这样从webview注入javascript代码（在

webview.load（request）

之前声明）：

在这里我向您解释了它是如何工作的，我们以处理

控制台.log

为例

要记住的最重要的一点是，您可以通过

window.webkit.messageHandlers.{NAME_to_identification_receiveid_MESSAGE}.postMessage（{MESSAGE_to_send}）

---

然后在这里处理它

func userContentController（uusercontentcontroller:WKUserContentController，didReceive message:WKScriptMessage）

哇，太棒了！我也可以用这个逻辑来添加更多的函数，对吗？例如，我还想添加一个返回用户联系人的函数。我可以拥有一个func

getContacts（）

，然后像那样直接从服务器调用它（PS：我可以访问服务器代码）。是的，它仍然保持相同的逻辑，您必须向您的webview发送消息，告诉他检索联系人，在检索完联系人后，您可以将其发送到API。如果我的回答帮助您标记为Resolved，那么我实际上希望避免使用API。在Android上实现这一点时，我不必使用API。我完全依赖于函数的返回值及其参数。例如，要发送联系人列表，我的函数只需返回一个JSONArray；我只是在服务器代码中解耦成一个普通列表。你明白吗？顺便说一句，谢谢+1。如果您想将没有api的联系人直接发送到webview，您可以这样做，在检索完联系人后，您可以使用

evaluateJavaScript（）

函数将其插入webview。因此，如果在服务器中有一个函数接收数组或jsonObject数组作为参数，则可以传输它。看看这个：

let scriptJS = "var console = { log: function(msg){window.webkit.messageHandlers.logging.postMessage(msg) } };"
let logScript = WKUserScript(source: scriptJS, injectionTime: .atDocumentStart, forMainFrameOnly: false)

 webView.configuration.userContentController.addUserScript(logScript)