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

Question

Android 的 WebView 让我有机会添加可以直接从服务器调用的函数。例如，我可以这样写一个函数 displayToast(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.displayToast()（如下面的代码片段所示），然后在用户屏幕上显示消息。

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

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

Answer 1

您可以通过将 javascript 代码注入 webview 来实现。

例如，我们想在我们的应用程序中获取 console.log 的打印，以便在我们的应用程序中显示它。

来自 javascript 如果您想向 webkit 发送消息，您必须使用此 window.webkit.messageHandlers.{NAME_TO_IDENTIFY_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) 之前声明）：

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)

所以在这里我向你解释了它是如何工作的，我们以句柄console.log为例。

最重要的是要记住，您可以通过 window.webkit.messageHandlers.{NAME_TO_IDENTIFY_RECEVEID_MESSAGE}.postMessage({MESSAGE_TO_SEND})

发送消息

并在这里处理func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage)

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

How do I add web-interface functions to my Swift WebView

swift

wkwebview

server